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.

Wszystkie wpisy

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

    Dziś będzie krótko! Bardzo prawdopodobne, że już o tym słyszałeś - sam publikowałem tę informację u siebie na Twitterze - ale zostało opublikowane bardzo ciekawe zestawienie najpopularniejszych projektów świata JavaScript znajdujących się na GitHubie. Myślę, że warto się z nim zapoznać - kto wie, może nie słyszałeś, o którymś z tych projektów, a bardzo by Ci się on przydał?

    Na jakiej podstawie stwierdzono, które projekty są najpopularniejsze? Po prostu policzono ile nowych “gwiazdek” zyskały poszczególne z nich w przeciągu ostatnich 12 miesięcy. Oprócz ogólnego zestawienia mamy też podział na frameworki front-endowe, frameworki node.js i kilka innych kategorii.

    A który JavaScriptowy projekt zyskał w zeszłym roku największą popularność? Otóż okazuje się, że Vue.js (+40.0 tys. “gwiazdek”)! Na drugim miejscu React (+27.8 tys. “gwiazdek”), a na trzecim create-react-app (+22.5 tys. “gwiazdek”). To pokazuje, że z jednej strony “hype” na Vue wciąż trwa - i dobrze bo to świetna biblioteka. Z drugiej strony, zestawienie pokazuje też, że najsilniejszym obecnie “ekosystemem” dysponuje React - sporo bibliotek z czołówki zestawienia jest z nim związanych (wspomniany create-react-app na drugim miejscu, a do tego takie projekty jak np. Next.js czy Redux). Co ciekawe, Angular znalazł się dopiero na 18 miejscu zestawienia…

    Na koniec linki - moim zdaniem warto zajrzeć:

  • 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

    Jak pewnie zauważyłeś, w grudniu jakoś tak wyszło, że zrobiłem sobie przerwę od blogowania. Po części jest to wynik tego, że więcej czasu poświęcam na pracę (biorę udział w ciekawym start-upie, więc jest co robić). Do tego doszedł chyba pewien kryzys twórczy… Stąd też dziś krótki wpis noworoczny, którym wpisuję się w ogólny trend robienia blogowych podsumowań roku minionego i przedstawiania planów na przyszłość!

  • 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

    Będąc programistą trzeba nieustanie trzymać rękę na pulsie, śledzić nowości i cały czas poszerzać swoją wiedzę. Nie jest to łatwe, szczególnie w świecie front-endu, gdzie (podobno) codziennie wypuszczany jest jeden nowy framework oraz dziesięć nowych bibliotek. Jak to wszystko ogarnąć? Postaram się odpowiedzieć na to pytanie w dzisiejszym wpisie… albo raczej pokazać Ci jak ja do tego podchodzę.