Tworzenie aplikacji internetowych w technologii React - 3 pytania i odpowiedzi ze szkolenia (grudzień 2020)

Seria 3 pytań uczestników, które pojawiły się podczas szkolenia Tworzenie aplikacji internetowych w technologii React realizowanego w dniach 30.11-04.12.2020 r.


Redux vs React Contexts – jak i kiedy stosować?

W mojej opinii (popartej wieloma ciekawymi rozważaniami i artykułami, np. https://dook.pro/blog/technology/39-redux-vs-react-context-which-one-is-the-right-winner), warto stosować w złożonej aplikacje obie te koncepcje. Konteksty dają nam łatwy dostęp do statycznych, niemutowalnych w obrębie całej aplikacji danych (np. domyślny adres głównego REST API, zdefiniowane dla motywu kolory, etc…), jednak słabo radzą sobie z dynamiczną propagacją zmian na całe wirtualne drzewo. Dla modyfikacji stanu całej aplikacji wciąż lepszym rozwiązaniem jest Redux – z użyciem hooków jego używanie stało się bardziej intuicyjne, a architektura flux została już wcześniej zaprojektowana z myślą właśnie o takich działaniach. Podsumowując – konteksty są idealne do rozsyłania globalnych, zdefiniowanych odgórnie wartości do dowolnego elementu wirtualnego drzewa, jednak dla modyfikacji wartości dynamicznych (jak np. aktywny język czy logowanie użytkownika) lepiej skorzystać z Reduxa.

Hooks vs Classes – czy budowanie aplikacji na klasach wciąż jest dobrym pomysłem?

Choć sam przez długi czas nie byłem zwolennikiem hooków (klasy dawały większą kontrolę), to po napisaniu jednej aplikacji jakiś czas temu z użyciem jedynie komponentów funkcyjnych przekonałem się do nich całkowicie. Na ten moment w żadnym nowo tworzonym projekcie nie korzystam już z komponentów klasowych. Zalety hooków są ogromne – od optymalizacji pamięciowej po reużywalność komponentów napisanych w tej właśnie konwencji. Należy jednak pamiętać że pojawiły się one w wersji 16.8 Reacta i ich stosowanie w starszych projektach może nie być po prostu możliwe. Dla nowych projektów polecam jednak przesiąść się na ten właśnie sposób budowania aplikacji – poza kontrolą kodu (jednak dobre rozplanowanie drzewa komponentów i przechowujących je katalogów może zadziałać jak klasa pod kątem zarządzania strukturą) ich używanie to jedynie plusy dla zarówno małych jak i dużych aplikacji.

Popularne biblioteki gotowych komponentów – które są faktycznie najlepsze?

Pytanie bez prostej odpowiedzi :) W mojej opinii najlepsze biblioteka to tak z którą najlepiej czuje się programista lub ich zespół. Popularne jak React-bootstrap (bazujące na popularnym frameworku css) pozwalają nam budować szkielet aplikacji w tak samo kontrolowany sposób jak w przypadku klasycznego podejścia, a do tego dostarczają od razu wbudowane w bibliotekę dynamiczne funkcjonalności, bez implementacji zewnętrznych plików js. Inne często wykorzystywane to Material-Ui – wielka baza gotowych do implementacji komponentów, których użycie we własnym projekcie jest bardzo proste. Ja osobiście polecam jednak połączenie jednego z drugim czyli moduł MDB bootstrap – kompozycja znana większości koderów a styl typu Material. Niemniej wybór zestawu narzędzi dalej leży stricte po stronie zespołu wdrożeniowców .:)