Piszę tutaj głównie o JavaScript i React ale pojawiają się też wpisy na temat innych obszarów frontendu. Więcej o mnie tutaj.
Kategoria - programowanie
-
Inspirację do napisania tego wpisu, jak to często już u mnie bywało, przyniosło samo życie. Jednym z pierwszych projektów w Going., w którym przyszło mi brać udział było stworzenie statycznej strony strony www. Mogłem oczywiście napisać wszystko w czystym HTML + CSS + jQuery (sic…). Strona miała jednak zawierać dość dużo logiki biznesowej w JavaScript, do tego routing, a poza tym chodziło również o to, aby rozwiązanie było podstawą do dalszej rozbudowy w przyszłości.
-
Wraz z pojawieniem się wersji v16.3.0 Reacta, do naszych rąk trafiła całkiem nowa i myślę, że całkiem przydatna funkcjonalność. Mowa tutaj o tytułowym Context API, które pozwala na wprowadzenie do aplikacji pewnych globalnych ustawień, od których zależeć mogą niektóre komponenty. Dzięki temu implementacja w aplikacji, na przykład, wielu wersji kolorystycznych staje się dziecinnie prosta. Zresztą sam się za chwilę o tym przekonasz!
-
Halo, halo! Witam po dłuższej przerwie, spowodowanej… trochę lenistwem, a trochę innymi sprawami życiowymi. No nic to. Najważniejsze, że w końcu wracam do pisania! A tematem dzisiejszego posta są komponenty wyższego rzędu w React, czyli z angielska higher order components (a skracając: HOC). W wielkim skrócie jest to technika re-używania logiki komponentów, która wbrew pozorom jest dość powszechnie stosowana. Ale o tym w dalszej części tego wpisu.
-
Dziś znów krótko… no ale lepszy rydz niż nic! Jeśli jesteś na czasie z nowościami w świecie React, śledzisz Twittera itp., to na pewno zauważyłeś ostatnio spore zamieszane związane z nowym “ficzerem” jaki ma się niebawem pojawić w ramach biblioteki React. Nosi on nazwę React Suspense i mówiąc w skrócie, ma pozwalać na opóźnienie renderowania części aplikacji dopóki nie zostanie spełniony określony warunek.
Zresztą, najlepiej będzie jeśli obejrzysz wystąpienie Dana Abramova na konferencji JSConf Iceland, w którym przedstawił on nowe API:
Moim zdaniem, nic dziwnego, że jest to ostatnio tak gorący temat - React Suspense pozwoli na tworzenie interfejsu użytkownika, ze znacznie lepszym UX. Obecnie standardem jest, że podczas asynchronicznego pobierania danych z serwera (AJAX) pokazywany jest “loader”. Posiadając jednak bardzo szybkie łącze internetowe często zdarza się, że ów “loader” pojawia się tylko na ułamek sekundy… Dzięki opóźnieniu renderowania, na przykład o sekundę, można zwiększyć prawdopodobieństwo, że dane załadują się jeszcze przed pojawieniem się “loadera”.
BTW: ostatnio zaimplementowałem podobne rozwiązanie w projekcie, w którym biorę udział - fajnie, że niedługo będzie ono dostępne “z pudełka”!
P.S.1 Na koniec jeszcze link do przydatnego źródła - na temat React Suspense napisał już Bartosz Szczeciński i moim zdaniem warto zapoznać się z tym artykułem.
P.S.2 Trzeba też dodać, że opisywany “ficzer” jest wciąż w fazie “alfa” i jego ostateczna wersja może się jeszcze zmienić. Nie jest to więc coś, co można już bezpiecznie używać “na produkcji”!
-
Dzisiejszym wpisem zakończymy serię o Server Side Rendering w React. W zasadzie to po poprzednich 4 wpisach wiesz już wszystko by stworzyć swoją pierwszą aplikację izomorficzną React. Postanowiłem jednak, że pokażę Ci jeszcze pewną alternatywę do tego, co zostało dotychczas pokazane. Istnieje bowiem coś takiego, jak Next.js, czyli specjalny framework pozwalający w łatwy sposób stworzyć aplikację React, która “z pudełka” posiada obsługę renderowania po stronie serwera!
-
Ostatnio dało się odczuć trochę mniejszą moją aktywność na blogu ale to nie znaczy, że z nim kończę (zresztą pisałem już o tym nieco w poście noworocznym). Mam przecież rozpoczętą serię o Server Side Rendering w React… A skoro, podobno, mężczyznę poznaje się nie po tym jak zaczyna ale jak kończy, to wydaje mi się, że moim obowiązkiem jest dokończyć to co zacząłem! Dlatego też dziś przedstawiam czwartą cześć moich wpisów na temat SSR, w której pokażę, jak zaprząc do działania bibliotekę react-router zarówno po stronie klienta jak i serwera. Zapraszam do lektury!
-
W ostatnim, dosyć długim wpisie pokazałem jak skonfigurować Server Side Rendering w React w oparciu o framework ExpressJS po stronie serwera. To jednak nie wszystko - podstawowy zestaw narzędzi używanych w większości aplikacji React, zawiera też przecież bardzo często bibliotekę Redux… Dlatego też dziś, rozszerzę przedstawiony tydzień temu przykład o wsparcie dla tej biblioteki. Jak sam się przekonasz, nie jest to nic trudnego!
-
Ostatnio, we wstępie do serii na temat Server Side Renderingu w React, opowiedziałem co nieco czym jest aplikacja izomorficzna/uniwersalna. W poście tym przedstawiłem też kilka zalet oraz wad tego podejścia. Dziś natomiast przejdziemy do rzeczy. Zajmiemy się bowiem praktyczną stroną tego zagadnienia - skonfigurujemy uniwersalną aplikację React przy użyciu frameworka ExpressJS po stronie serwera!
-
Server Side Rendering w React to temat, do napisania którego zabierałem się już od dość dawna… W dobie rozbudowanych aplikacji internetowych typu SPA rozwiązanie to sprawdza się znakomicie i nie mogę pozwolić sobie na jego pominięcie na moim blogu! Ogólnie tematyka ta jest szeroka, postanowiłem więc podzielić to zagadnienie na mniejsze części i zrobić z tego serię. Z dzisiejszego wpisu dowiesz się więc, co to jest aplikacja izomorficzna/uniwersalna, czym jest Server Side Rendering oraz jakie są jego największe zalety. W kolejnych postach przedstawię natomiast różne sposoby konfiguracji tego podejścia w Twojej aplikacji.
-
Zgodnie z obietnicą z poprzedniego wpisu tej serii, dziś przedstawię drugą część na temat migracji mojego bloga z Wordpressa do Jekylla. Jej tematem będzie deployment do Heroku czyli hostowanie bloga w chmurze. Ogólnie nie jest to nic specjalnie skomplikowanego - zresztą sam się zaraz przekonasz. Zapraszam do lektury!