Moje wesołe zdjęcie
Cześć! Jestem Bartek i witam Cię na moim blogu!
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

react-1 Created with Sketch.

Kurs "Podstawy React" jest już dostępny!
Zapraszam do sprawdzenia mojej oferty.

Sprawdź
  • Miniaturka obrazka do posta

    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.

  • Miniaturka obrazka do posta

    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”!

  • Miniaturka obrazka do posta

    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!

  • Miniaturka obrazka do posta

    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!

  • Miniaturka obrazka do posta

    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!

  • Miniaturka obrazka do posta

    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!

  • Miniaturka obrazka do posta

    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.

  • Miniaturka obrazka do posta

    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!

  • Miniaturka obrazka do posta

    Dziś krótko! Właśnie pojawiła się nowa wersja Reacta oznaczona numerem wersji: 16.0.0! Na pewno zdążyłeś już gdzieś przeczytać, że w wersji tej następuje bardzo istotna zmiana dotycząca licencji - wszystkie media społecznościowe o tym trąbiły… Fakt, ta nowość na pewno wiele osób ucieszyła, bo skończą się wreszcie te wszystkie dyskusje na temat patentów. Niemniej jednak, wprowadzona właśnie wersja Reacta przynosi ze sobą więcej nowości, o których na pewno warto przeczytać!

    Na końcu tego artykułu znajdziesz linka do oficjalnego komunikatu Facebooka w tej sprawie. Natomiast, jeśli nie chce Ci się go czytać, to masz tutaj ode mnie krótką ściągawkę z jego zawartości:

    • zwracanie tablic i ciągów znaków z metody render - nie trzeba będzie wreszcie otaczać elementu dodatkowym “wrapperem”
    • lepsza obsługa błędów - mniejsza podatność na zawieszenie się aplikacji w przypadku wystąpieniu wyjątku
    • portale - renderowanie children wewnątrz elementu DOM, który jest poza hierarchią DOM rodzica
    • poprawa Server Side Renderingu - renderowanie na serwerze zostało napisane od nowa, więcej w tym artykule
    • wsparcie dla własnych atrybutów DOM - głównie zmiana wydajnościowa
    • redukcja rozmiaru plików modułów react, react-dom - zmniejszono ich rozmiar o 32%
    • przejście na licencję MIT - o tym już na pewno wiesz!
    • nowa “core’owa” architektura o nazwie “Fiber” - zmiany są spore (pod spodem), a więcej przeczytasz tutaj

    W skrócie to tyle! Zachęcam jednak do samodzielnego zapoznania się z artykułem na temat Reacta w wersji 16.0:

    React v16.0 - wpis na blogu Facebooka na temat Reacta

  • Miniaturka obrazka do posta

    Pewnie niektórzy są juz lekko zmęczeni tematem migracji bloga z Wordpressa do Jekylla. Z drugiej strony, sporo osób prosiło mnie o opisanie, w jaki sposób przeprowadziłem się z jednej z tych platform na drugą. Postanowiłem więc, że spełnię te prośby i tym samym raz na zawsze zamkniemy ten temat! Początkowo planowałem opisać całość “za jednym zamachem” ale okazało się, że opis samej tylko migracji danych z Wordpressa do Jekylla to prawie 2 tysiące słów. Dlatego też, temat został podzielony na dwie części: dziś opisuję jak przeniosłem posty i całą resztę do Jekylla, natomiast za tydzień przedstawię jak przeprowadziłem deployment do Heroku!