React JS – dlaczego warto go użyć w swoim projekcie?

Kilka słów o React JS

React jest nazywany JavaScriptową biblioteką, służącą do budowania interfejsów dla użytkownika. Umożliwia tworzenie złożonych interfejsów za pomocą małych, odizolowanych od siebie komponentów. Projekt React JS rozpoczął pracownik Facebooka - Jordan Walke w 2011 roku. Jego celem było uproszczenie procesu budowania interfejsu i zapewnienie użytkownikom większej wygody na co dzień. Biblioteka wykorzystuje nowy sposób renderowania stron www, dzięki czemu są one bardziej dynamiczne. Od 2013 roku, kiedy React JS został udostępniony jako open source stał się niezwykle popularny. Głównie ze względu na innowacyjne podejście do programowania. React JS jest wygodny zarówno dla programisty, jak i końcowego klienta.

React JS - framework czy biblioteka?

Przez jednych jest nazywany frameworkiem, przez innych biblioteką. Więc React JS to framework czy biblioteka? Takie rozróżnienie jest trudne. Frameworkiem jest rozwiązanie problemów strukturalnych i architektonicznych na poziomie kodu. React to bardziej ideologia oparta na komponentach. Programista ma kontrolę nad sposobem wdrożenia. React nie rozwiązuje problemów strukturalnych i architektonicznych. Z drugiej strony jest bardzo rozbudowany. Ostatecznie jednak częściej określa się React jako bibliotekę.

Jak działa React JS?

Aby zrozumieć, jak działa React (i dlaczego tak dobrze radzi sobie z tworzeniem dynamicznych, lekkich interfejsów), warto przejść krótko przez proces ładowania strony (lub aplikacji webowej). Gdy użytkownik wchodzi na stronę internetową, z serwera na jego przeglądarkę trafia dokument HTML razem ze stylami CSS oraz, błyskawicznie wykonywany, kod JavaScript. W przypadku tradycyjnego serwisu lub aplikacji (multi-page application) proces ten będzie powtarzać się za każdym razem, gdy użytkownik zechce przejść na inną podstronę.

Mamy więc do czynienia z nieustanną wymianą danych między klientem (przeglądarką) a serwerem oraz koniecznością ciągłego renderowania kolejnych, często powtarzających się linijek kodu. Im bardziej rozbudowana strona, tym potencjalnie większy problem.

React pozwala go rozwiązać. Przy pomocy jego komponentów zbudujemy tzw. single-page application (SPA) - aplikację webową składającą się tylko z jednego dokumentu HTML, który potem będzie modyfikowany przy pomocy JavaScript w czasie rzeczywistym. Wraz z każdą kolejną aktywnością użytkownika na stronie, zmieniać się będą tylko te elementy interfejsu, z którymi użytkownik rzeczywiście wszedł w interakcję. „Szkielet” pozostaje bez zmian. A to wszystko bez konieczności pełnego przeładowywania witryny i dodatkowego obciążenia na linii klient-serwer.

Dlaczego warto korzystać z React JS?

Do budowy aplikacji typu SPA wykorzystuje się różne rozwiązania — choćby Vue czy Angular, a więc najpopularniejszych framework’ach języka JavaScript. W wielu przypadkach React JS działa po prostu szybciej niż jakakolwiek inna implementacja tego rodzaju.

Technologia, która sprzyja dynamicznym interfejsom

React pozwala zbudować bardzo dynamiczny interfejs. Aktualizacje strony dzieją się niemal na oczach użytkownika, zmiany następują w czasie rzeczywistym. Umożliwia to programiście szybszą pracę z obiektami interfejsu i poprawia wydajność. Po stronie użytkownika natomiast skraca do minimum czas odpowiedzi na interakcje z aplikacją.

Zespołowi odpowiedzialnemu za React JS udało się osiągnąć taką szybkość dzięki temu, że biblioteka używa swojej abstrakcyjnej kopii interfejsu aplikacji — Virtual DOM — do porównywania zachodzących w nim zmian. Gdy pojawi się najmniejsza różnica między wirtualnym DOM a tym rzeczywistym, zostaną one natychmiast zsynchronizowane (ale tylko na poziomie pojedynczych, wymagających modyfikacji elementów, nie zaś całego interfejsu!). Przy okazji ujawnia się tu siła deklaratywnego podejścia do programowania. React nie wymaga bowiem od developerów opisywania, jak — krok po kroku — wprowadzane będą zmiany w interfejsie, a jedynie wskazania, jaki powinien być ich efekt w poszczególnych stanach aplikacji.

Oszczędność czasu i zasobów

Z tego też wynika kolejna zaleta tej biblioteki — czas.

React JS pozwala na ponowne wykorzystanie komponentów na innym poziomie tej samej aplikacji lub w zupełnie nowym projekcie. Praca z Reactem przypomina tworzenie konstrukcji z klocków — uniwersalnych modułów o przewidywalnej, stałej, niezależnie od zastosowania, logice. A to w oczywisty sposób zwiększa wydajność programisty i istotnie skraca czas pracy nad aplikacją.

Wysoka stabilność kodu

React JS pozwala na bezpośrednią pracę z komponentami i wykorzystuje takie powiązania, które nie wpływają na pozostałe komponenty i zmiany struktur. Przede wszystkim w tym systemie elementy potomne nie mogą wpływać na nadrzędne. Dzięki temu kod jest stabilny. Aby zmienić obiekt, programista musi zmodyfikować jego stan i zastosować aktualizację. Tylko wyznaczone komponenty zostają zaktualizowane. Przepływ danych w React JS następuje w jednym kierunku — w dół.

To w kwestii stabilności w krótkiej perspektywie. A w długiej? Od początku jedną z fundamentalnych zasad Reacta jest utrzymywanie wstecznej kompatybilności przy kolejnych aktualizacjach biblioteki. Większość „starych” elementów kodu powinna być kompatybilna z najnowszymi wersjami Reacta bez konieczności poważniejszych modyfikacji — w razie potrzeby odświeżenie kodu też nie będzie dla dobrego developera trudne. Z każdą aktualizacją można liczyć na wsparcie skupionej wokół biblioteki społeczności i przygotowywanej przez twórców Reacta dokumentacji, ułatwiającej migrację na nowsze wersje biblioteki z zachowaniem spójności i stabilności kodu.

Rozbudowana społeczność i wsparcie dla innych technologii

Przez lata wokół Reacta utworzyła się ogromna społeczność programistów, stale rozwijających bibliotekę o nowe komponenty, eliminujących błędy i udostępniających dokumentację własnych projektów. Sam React JS jest oczywiście biblioteką open source’ową, więc dostęp do rozwijanych rozwiązań ma w praktyce każdy. Dzięki modularnej budowie Reacta i zaangażowaniu programistów z różnych środowisk biblioteka bardzo dobrze współpracuje z wieloma innymi narzędziami JavaScript. Od stworzonych z myślą o React’cie bibliotek narzędziowych typu Redux czy React-query po całe frameworki, na przykład Next.js.

Pozostałe zalety Reacta

Do mocnych stron facebookowej biblioteki warto także zaliczyć:

• wszechstronność — React sprawdza się nie tylko w projektach webowych, ale także przy rozwoju aplikacji mobilnych (programiści mają do dyspozycji długą listę narzędzi stworzonych z myślą o Androidzie oraz iOS);
• stosunkowo niski próg wejścia — programiści już znający JavaScript nie powinni mieć problemu z opanowaniem możliwości Reacta;
• zgodność z zasadami SEO — React nie tylko ułatwia zbudowanie lekkiej, szybko ładującej się strony (co algorytm Google zawsze docenia), ale także oferuje rozwiązania upraszczające indeksowanie aplikacji webowych bogatych w skrypty JS (które bywają dla crawlerów problemem).

Słabe strony React JS

Zarówno plusem, jak i minusem może być wysokie tempo rozwoju biblioteki React JS. Szybki rozwój powoduje, że programiści muszą stale odnajdywać się w nowinkach, gdyż środowisko i sposób pracy wciąż ewoluuje. To nie dla wszystkich może być wygodne. Ciągłe wydania nowych narzędzi powodują kolejny problem - niekompletna dokumentacja. Programiści tworzą więc ją sami na potrzeby konkretnych projektów. Według niektórych osób słabą stroną React JS jest też to, że używa JSX- deweloperzy i projektanci narzekają na złożoność JSX. Specjaliści radzą, aby przetestować dokładnie stronę pod kątem SEO. Google ma czasami problemy z tak dużą dynamiką jaką umożliwia React, chociaż sama w sobie dynamika zgodnie z zasadami Google jest wręcz pożądana. Niestety czasami algorytmy nie radzą sobie z poprawnym jej odczytem.

Minusy React JS są dość specyficzne i małostkowe w porównaniu z tym, co biblioteka oferuje. Warto zastanowić się, czy konkretnie te wady mają znaczenie dla danego programisty. Wszystko zależy od specyfiki pracy konkretnej osoby i racjonalnej oceny wpływu wad systemu na projekt.

Kto korzysta z Reacta?

Powiedzieć, że z Reacta korzystają niemal wszyscy byłoby przesadą, ale… nie ma wątpliwości, że jest to jedna z najpopularniejszych technologii webowych. W ubiegłorocznym badaniu przeprowadzonym przez Stack Overflow ponad 40% web developerów zadeklarowało, że na co dzień korzystają z tej biblioteki (wyższy wynik - 42% - osiągnęło jedynie Node.js, czyli standardowe środowisko uruchomieniowe dla JavaScript).

Nic więc dziwnego, że komponenty Reacta znajdziemy też we front-endzie największych witryn, platform webowych i aplikacji mobilnych. A oto kilka przykładów:

• Facebook — przypomnijmy, że to właśnie zespół developerski Facebooka stworzył Reacta. Front-end webowej aplikacji platformy Marka Zuckerberga oparty jest na React JS, zaś interfejs aplikacji mobilnej - na korzystającym z niego pakiecie narzędzi React Native. To właśnie możliwościom tej biblioteki zawdzięczamy aktualizowany na żywo feed z treściami oraz dynamiczny, pozbawiony jakichkolwiek ekranów ładowania interfejs;
• Instagram — React JS jest również fundamentem drugiej platformy należącej do firmy Meta. Komponenty biblioteki tworzą szkielet aplikacji mobilnej, odpowiadają za działanie wielu kluczowych integracji, m.in. z Google Maps i systemem GPS oraz „napędzają” silnik wbudowanej wyszukiwarki;
• Netflix — twórcy największej platformy streamingowej wykorzystali Reacta przy projektowaniu prostego, skalowalnego interfejsu oraz do skrócenia czasu renderowania dostarczanych do użytkownika treści;
• Airbnb — co ciekawe, programiści Airbnb nie tylko korzystają z Reacta do rozwoju jednego z chyba najbardziej intuicyjnych interfejsów mobilnych (biorąc pod uwagę ilość przetwarzanych danych), ale także stworzyli uniwersalny zestaw standardów kodowania przy pomocy tej biblioteki. Do dziś korzystają z nich dziesiątki tysięcy programistów;
• Walmart — dla największej amerykańskiej sieci supermarketów React JS okazał się sposobem nauporanie się z przypominającymi długą kolejkę do kasy czasami ładowania strony WWW i aplikacji mobilnej. Potwierdził to sam CTO sieci, Jeremy King;
• Discord — popularna platforma do rozmów głosowych opiera swój kod źródłowy aż w 98% (!) na komponentach Reacta;
• Dropbox — kolejna na naszej liście (po Discordzie) usługa działająca głównie w chmurze również nie funkcjonowałaby tak sprawnie bez Reacta. W przypadku aplikacji opartej na błyskawicznym przesyle plików, biblioteka ta była oczywistym wyborem, ze względu na możliwość skrócenia czasów synchronizacji danych;
• BBC — w przypadku brytyjskiego nadawcy React posłużył do stworzenia funkcjonalnego, przejrzystego, zdolnego do obsłużenia na bieżąco aktualizowanych treści (w różnych formatach i w ogromnych ilościach) interfejsu;
• Twitch — platforma do prowadzenia transmisji na żywo nie może pozwolić sobie na mało wydajny, obciążający działanie serwerów front-end. Przejście na bibliotekę React JS było dla twórców Twitcha jedną z najważniejszych decyzji, jakie pozwoliły platformie na szybszy rozwój i ustabilizowanie własnej infrastruktury.

Czy React to dobre rozwiązanie na przyszłość?

React JS cały czas się rozwija. Stoi za nim ogromna społeczność. Codziennie powstają nowe narzędzia, z których można korzystać. Przyszłość React JS wydaje się raczej stabilna. React JS nie należy do trudnych i nie wymaga zaawansowanej wiedzy. Jest dostępny dla wszystkich, a w internecie znajduje się wiele samouczków oraz fora internetowe, które znacznie ułatwiają wdrożenie początkującym programistom. Osoba znająca JavaScript powinna poradzić sobie w stosunkowo krótkim czasie z pracą z React JS. Ze względu na korzyści oraz popularność biblioteki - warto spróbować ją opanować.