Dawno, dawno temu napisałem front-end aplikacji internetowej w czystym JavaScript, z niewielką pomocą jQuery. Był to szybki sposób, aby rozpocząć pracę. Jednak, gdy mój projekt zaczął rosnąć, zauważyłem smutną konsekwencję mojego podejścia - po około roku kod stał się całkowitym "makaronem"!
Vanilla JS - brama do nałogu
Myślę, że niektórzy programiści zaczynają pracę z JavaScriptem w taki sposób:
- O! Mogę dodać przycisk tylko przez wpisanie
<button>w pliku HTML! Świetnie! Zobaczmy, jak zrobić, żeby coś się działo po jego kliknięciu. - Stosuję więc do tego JavaScript [OSTROŻNIE].
- Dodajmy atrybut
onClick="alert('clicked')"do mojego przycisku. - Następnie, po jakimś czasie dowiadujesz się o [NIEBEZPIECZNEJ] funkcji
getElementById(). W tym momencie zaczyna się prawdziwe szaleństwo związane z Vanilla JS...
Podczas pisania kodu często mam poczucie, co on powinien robić. Oczywiście, czasem jest jakaś specyfikacja, ale mój wewnętrzny "haker" zawsze chce, aby coś było wykonane tylko za pomocą napisanego kodu. Dlatego korzystanie z getElementById() jest tak kuszące za każdym razem. Wystarczy zdefiniować id dla elementu, skopiować i wkleić kod ze Stack Overflow, i bum! Praca wykonana. Jednak tworzenie aplikacji w ten sposób prowadzi do frustracji, frustracja prowadzi do złości, a złość prowadzi do chaotycznego kodu typu spaghetti.
Czasy ciemności
Udało mi się wdrożyć mój nowo stworzony kod do produkcji. Czy wspomniałem, że nie miałem żadnej recenzji kodu? Zaskakująco, ten kod działał większość czasu i nikt nie prosił o większe zmiany, więc zostawiłem go na około 6 miesięcy. Po tym czasie stabilność aplikacji stanęła pod znakiem zapytania, a ja zacząłem zastanawiać się, jak poprawić rzeczy, ulepszyć kompatybilność z przeglądarkami, itd. Nie chciałem nawet patrzeć na ten kod. Składał się z około 900 linii czystego JavaScriptu, z przerażającymi rzeczami, takimi jak getElementById() wszędzie.
Usłyszałem o React, że jest łatwy i potężny. Nigdy jednak nie interesowałem się front-endem, więc nie zacząłem go uczyć się od razu. Po obejrzeniu kilku filmów na YouTube o React, zrozumiałem kluczowe koncepcje. Stopniowo zaczynałem poznawać to narzędzie i postanowiłem wyjść z piekła legacy, które sam stworzyłem.
Szybki start z React
Kiedy zrozumiałem podstawowe koncepcje Reacta - komponenty, stan, właściwości - wszystko zaczęło się robić jasne. W końcu mogłem tworzyć sensowne moduły, izolować rzeczy od siebie, używać fajnej architektury i hierarchii. A to nie wszystko! Po stworzeniu "Hello World" w React zdałem sobie sprawę, że tworzenie front-endu w ten sposób jest jeszcze łatwiejsze niż w czystym JavaScript! W ciągu tygodnia udało mi się pozbyć brzydkich 900 linii mojego własnego legacy i zastąpić je świeżym kodem w React.
Za każdym razem, kiedy uczyłem się nowych funkcji Reacta, doceniałem to w jaki sposób jest zaprojektowany. React lepszy!