ReactJS rapid development

ReactJS to moje odkrycie 2019/2020. Po gruntownej analizie plusów dodatnich i ujemnych Angular i ReactJS wybrałem ten ostatni. AngularJS 1.x znałem dosyć długo i doskonale zdawałem sobie sprawę z jego minusów, a te są najważniejsze. Przecież to od nich zależy szybkość developmentu i długofalowe utrzymanie projektu. AngularJS poległ pozostawiając nieczytelny i opuchnięty kod, a two-way bindingiem i watcherami doprowadzał do wysokich temperatur podczas debugowania.

Klasyczny development aplikacji webowych oparty jest o renderowanie części klienckiej przez serwer, a właściwie jego fragmentów. MVC (lub jego jakaś inkarnacja) w części serwerowej tworzą totalnie nieczytelny i niespójny generator klienta, z którym obcuje użytkownik i zespół załamanych developerów. Zarządzanie klienckimi assetami przez serwer (taki jak Django ), mimo dobrej implementacji, też nie należy do najprzyjemniejszych. Łatwo o chaos, szczególnie gdy czas developmentu jest krytyczny. Niech serwer robi to, do czego służy najlepiej - niech świadczy usługi za pomocą ustalonego interfejsu. REST , czy też HTTP +JSON , to droga która powinna być standardem.

Nowy stos

Budowa części klienckiej aplikacji, zupełnie od podstaw i niezależnie od serwera, otwiera nowe możliwości. Naturalnie przy rozwiązaniach webowych pierwszym krokiem jest npm - podstawowe narzędzie zarządzania projektem i zależnościami. Ale to dopiero początek tej przygody.

Drugim niezastąpionym monstrum jest Webpack . Dzięki pluginom jest to kompilator, transpiler, bundler i dev server w jednym. Za jego pomocą powstają kompilacje developerskie, z plikami mapjs, i produkcyjne - obfuscowane, zminimalizowane, wielojęzykowe. Składa CSS-y z SASS-a , załącza assety, wraz z Babelem transpiluje ecmasriptowe lub typescriptowe źródła do czystego JS z uwzględnieniem kompatybilności przeglądarek.

Przejście na Webpack to jak przesiadka do przysłowiowego Mercedesa. Kilka skryptów dla npm, kilka targetów w Makefile , i… wszystko samo za mnie się robi i dzieje, od dev servera z automatycznym przeładowywaniem po zmianach, po wynikową kompilację gotową do dystrybucji. Wspomniany już Babel , trzeci istotny składnik stosu, robi tu krecią robotę. Brakujące średniki wywalające się w przeglądarkach Microsoftu? - Przeszłość.

ES5 jest dobry, ale jego implementacja w przeglądarkach często doprowadza programistów do skrętu jelit. Jego względna ubogość jest niezbyt wystarczająca do szybkiego programowania. ES5 = koszt. Ale ES6 to już inna liga. Nowe podejście do scopes, nowe operatory, nowe literały (szablony!), natywne klasy (jako syntactic sugar do modelu prototypowego, ale zwiększają czytelność), oraz game changer - znakomity system importu i eksportu. Czwartym kluczowym składnikiem jest właśnie ES6 (lub nawet TypeScript , choć do niego mam wiele zastrzeżeń).

SASS to piąty istotny składnik. Jego użycie z serwerem aplikacji mijało się z celem. Debugowanie przyprawiało o zawrót głowy (choć nie tak jak użycie HAML-a jako języka szablonów). Ale dzięki Webpack można opracowywać style w SASS , a wraz z webpackowym resolverem importów - budować projekty poskładane z eleganckich modułów.

Nowoczesna przeglądarka z rozwiniętymi narzędziami developerskimi to szósty składnik. Chrome, Opera lub Firefox (choć najwolniejszy) są krytycznymi narzędziami, którym warto poświęcić odrębny monitor.

Siódmym składnikiem jest zintegrowane środowisko programistyczne. Niezmiennie korzystam z VIM-a jako mojego IDE . Oczywiście jest to VIM na sterydach, któremu poświęcę odrębny rozdział.