W oparciu o zrobiony research oraz moje wrażenia po niespełna miesiącu kodowania w React, przedstawię Wam powody, które przekonały mnie do postawienia na tę bibliotekę.
Projektowanie oparte o komponenty
Jak pewnie wiesz, React jest biblioteką przeznaczoną do tworzenia interfejsu użytkownika. Część społeczności front-endowej już wiele lat temu zauważyła, że przyszłością nowoczesnych interfejsów jest projektowanie oparte o komponenty. Jest to rozwiązanie, które charakteryzuje prostota i elegancja. To moje dwa ulubione wyznaczniki potencjału.
Najlepszym testem na to, czy rozwiązanie faktycznie cechują te dwie właściwości, jest przedstawienie jej laikowi.
Wystarczy otworzyć losową stronę internetową i rozłożyć ją na komponenty składowe. Zobaczmy, jak mogłoby to wyglądać w przypadku Twittera.
To wszystko. Cała esencja projektowania aplikacji w React zamknięta w jednym zrzucie ekranu. Bez żargonu. Bez górnolotnych abstrakcji.
W ramach rozgrzewki, zastanów się jakie komponenty zostały przeze mnie pominięte.
Nie wiem jak Tobie, ale mi bardzo łatwo przestawić się na taki sposób patrzenia na aplikacje. Zbiór komponentów o prostej hierarchii, które oferują różne funkcjonalności. Jak powtarza Steve McGonnal w klasyku Kod Doskonały: im abstrakcja jest prostsza do zrozumienia, tym łatwiej będzie utrzymać niski poziom złożoności naszej aplikacji. W ostatecznym rozrachunku prowadzi to do szybszego powstawania aplikacji, która jednocześnie posiada mniejszą ilość błędów.
Od kuchni komponenty to nic innego jak proste funkcje/klasy. Przekazujemy im dane wejściowe i otrzymujemy dane wyjściowe w postaci interfejsu.
Idea, która napędza projektowanie oparte o komponenty w Reacta to: twórz własne elementy HTML, o funkcjonalności dostosowanej do Twoich potrzeb.
<App>
<Header />
<ItemList>
<Item name="Buty" onClick={this.itemClickHandler}></Item>
<Item name="Płaszcz" onClick={this.itemClickHandler}></Item>
<Item name="Koszula" onClick={this.itemClickHandler}></Item>
<Item name="Spodnie" onClick={this.itemClickHandler}></Item>
</ItemList>
<Footer />
</App>
To, co widzicie powyżej, to specjalne rozszerzenie JavaScript o nazwie JSX. Łączy w sobie składnię HTML i JS.
To rozwiązanie wywołało wiele kontrowersji w ubiegłych latach. Front-endowi puryści słusznie zauważyli, że w jawny sposób narusza zasadę separacji. W końcu warstwa zachowań powinna trzymać się z dala od warstwy zawartości.
Wbrew przestrogom, nie doszło do otworzenia front-endowej puszki pandory. Czas pokazał, że to, co sprawdzało się w przeszłości, nie musi być najlepszym wyznacznikiem tego, jak działać w teraźniejszości. Interfejsy użytkownika mają się dobrze jak nigdy.
Coraz większa liczba programistów dała szansę JSX i przekonała się, że to naprawdę praktyczne i przyjemne rozwiązanie. Potwierdza to rosnąca popularność Reacta i satysfakcja na poziomie 93% wśród osób korzystających z tej biblioteki[[link dostateofjs]].
Deklaratywność
React promuje deklaratywne podejście do tworzenia interfejsów.
Aby zrozumieć, czym jest deklaratywność, najłatwiej posłużyć się porównaniem z alternatywną imperatywnością.
Podejście imperatywne stosowało się w erze świetności jQuery.
Kod opisywał dokładny proces tego, JAK chcemy doprowadzić do zmian w interfejsie.
Podejście deklaratywne sprowadza się do zadania sobie pytania JAKIE zmiany chcemy zaobserwować w interfejsie. Odpowiedzi udzielamy, modyfikując stan naszego komponentu.
Całą resztę zostawiamy programistom facebooka. React zadba o odzwierciedlenie zmian w interfejsie bez naszej pomocy.
Złota zasada deklaratywności: trzymaj się z daleka od własnoręcznego grzebania w DOM, wujek React zajmie się tym za Ciebie.
Deklaratywność Reacta ma zbawienny wpływ na liczbę błędów, szybkość tworzenia aplikacji oraz jej wydajność.
Jednokierunkowy przepływ danych
Kolejnym ułatwieniem są jasne praktyki dotyczące przepływu danych w aplikacji. Zastosowany wzorzec to jednokierunkowy przepływ danych.
W React dane zawsze płyną od komponentu-rodzica do zagnieżdżonych w nim komponentów-dzieci. Dzieje się to za pośrednictwem obiektu props. Jest on przeznaczony tylko do odczytu.
Oczywiście rodzic ufa swoim dzieciakom i zostawia im furtkę do poinformowania o tym, co się z nimi dzieje. Służą do tego przekazywane w props referencje do metod obsługujących zdarzenia w komponencie-rodzicu.
Więcej na ten temat w nadchodzącej serii ‚Pierwszy projekt w ReactJS’.
React ma łagodną krzywą nauki
React, w porównaniu do konkurencji (patrzę na ciebie, Angular!), posiada naprawdę skromne API.
Czas potrzebny na przejście z piaskownicy do produktywnej pracy jest przede wszystkim uzależniony od znajomości vanilla JS.
Programiści, którzy opanowali JS i zrobili następnie solidną powtórkę, będą gotowi do boju w przeciągu kilku dni.
Nie jesteś przekonany, że należysz do tej grupy? Tak się składa, że wszystkie istotne zagadnienia czekają na Ciebie w wpisach z serii ‚Powtórka przed ReactJS’.
React to vanilla JS na sterydach, to nie stracimy czasu na naukę funkcjonalności, których nie użyjemy w kolejnym ‚best new thing’.
W związku z tym, React to solidny wybór dla osób rozpoczynających swoją przygodę z pierwszym frameworkiem/biblioteką.
Wielki ekosystem
React cieszy się niesamowitą popularnością wśród programistów w Stanach Zjednoczonych. Liczba osób pracujących w React wzrasta z każdym miesiącem również w Polsce.
Efektem ubocznym tego procesu jest niesamowita społeczność i rozwijany przez nią ekosystem.
Technologie związane z Reactem zapracowały na największą ilość nowych gwiazdek w 2017 roku.
Możemy szukać odpowiedzi na nurtujące nas pytania w jednym z ponad 70 tysięcy wątków na stackoverflow.
Każdego dnia pojawiają się nowe narzędzia. Większość z nich proponuje coraz bardziej eleganckie rozwiązania dla najpopularniejszych problemów.
W internecie w zastraszającym tempie pojawiają się wszelkiej maści treści dotyczące Reacta. Artykuły publikowane na łamach medium.com, kursy na udemy i egghead.io oraz darmowe ebooki.
Jeżeli jesteś zainteresowany materiałami, które udało mi się zgromadzić do tej pory, daj znać w komentarzu. W przypadku szerszego zainteresowania utworzę kompilację tych perełek.
Wszechstronność
Ostatnią zaletą Reacta, którą niesamowicie sobie cenię, jest jego wszechstronność.
Zawsze chciałem spróbować swoich sił w tworzeniu aplikacji mobilnych. Nie uśmiechało mi się porzucać JSa na rzecz Javy lub Swifta. Teraz wiem, że nie będzie takiej potrzeby. Furtką do świata urządzeń mobilnych będzie dla mnie React Native.
To nie wszystko. Kod Reacta może być renderowany na serwerze za pomocą Next.js.
Chcesz spróbować swoich sił z wirtualną rzeczywitością? Nie ma problemu, sprawdź React VR.
Naucz się raz, pisz wszędzie. Coraz bliżej do realizacji marzenia każdego programisty.
