Mężczyzna stojący na skale

6 powodów, dla których wybrałem Reacta

Przez długi czas zastanawiałem się nad wyborem technologii, za którą zabiorę się po opanowaniu JavaScript. Dla osoby tak podatnej na przesadne analizowanie dostępnych możliwości, podjęcie ostatecznej decyzji nie było łatwe. Dlaczego wybrałem Reacta, zamiast królującego na polskim rynku pracy Angulara lub wschodzącej gwiazdy Vue.js?

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.

Podsumowanie

Mam nadzieję, że jesteś równie podekscytowany jak ja. Pozostało zabrać się do pracy i cieszyć się opisanymi powyżej zaletami.

Zachęcam Cię do towarzyszenia mi w stawianiu pierwszych kroków. O tym, czym będziemy zajmować się przez kilka kolejnych miesięcy, opowiem w kolejnym, wprowadzeniowym wpisie do serii ‚Pierwszy projekt w ReactJS’.

Zapinaj pasy, prawdziwa przygoda dopiero się zaczyna.

PS. Jeżeli chcsz być na bieżąco, zachęcam do polubienia fanpage’u AlgoSmart na Facebooku, śledzenia mojego profilu na Twitterze i zaglądania na Polski Front-End.

unsplash-logoJoshua Earle

  • Gracjan

    Hej. Dzięki za kolejny ciekawy artykuł. Cieszę się że coraz więcej osób zaczyna rozpisywać się na temat reacta bo zawsze to kolejne cenne materiały do nauki.
    Powodzenia !

    • Też czułem niedosyt co do ilości materiałów dot. Reacta w polskiej blogosferze. Stąd moja inicjatywa.

      Dzięki za miłe słowa :)!

  • Nie mozna tez zapomniec, ze react jest rozwijany w sposob bardzo przemyslany, co w porownaniu do chocny angulara, w ktorym co chwile pojawiaja sie brejkingczandzes jest spora zaleta.

  • Mike_P77

    No fajnie, ale nie wspomniałeś dlaczego nie VUE ? Tak pytam, bo właśnie stoję przed wyborem