Od moich pierwszych kroków w świecie Reacta minęło przeszło pół roku. W tym czasie zbudowałem kilka projektów, co pozwoliło mi oswoić się z podstawowym API komponentów. Byłem zadowolony z czynionych postępów, ale zaobserwowałem kilka niepokojących tendencji. Tworzenie wszechstronnych komponentów wymagało ode mnie zbyt dużo mało eleganckiej gimnastyki. Umożliwienie zmiany ułożenia komponentów-dzieci, decydowania o ich widoczności – to przykłady często napotykanych problemów, które doprowadzały do rozmnażania się propsów w niebezpiecznym tempie. Współdzielenie logiki również nie szło tak gładko, fragmenty niektórych komponentów były do siebie podejrzanie podobne. Zacząłem się zastanawiać: czy to normalna kolej rzeczy, czy może brakuje kilku sztuczek w moim programistycznym rękawie?
W poszukiwaniu dobrych wzorców do naśladowania
Nie musiałem długo szukać, żeby zdać sobie sprawę, że zbyt wcześnie zacząłem wątpić w Reacta. Przez kilka lat istnienia społeczność biblioteki zdążyła wypracować techniki kompozycji, które skutecznie neutralizują napotkane przeze mnie przeszkody. Zamiast wynajdywać koło na nowo wystarczy stosować tytułowe wzorce, czyli sprawdzone sposoby na współdzielnie logiki i budowanie czystych komponentów o prostym i eleganckim interfejsie.
Zrozumienie kiedy i jak zastosować dany wzorzec wymaga na początku trochę wysiłku, ale inwestycja zwraca się z nawiązką. W długim okresie zapewni nam oszczędność czasu, zwiększy spójność naszego kodu oraz usprawni komunikację z kolegami i koleżankami z zespołu.
Identyfikujemy listę podejrzanych
Postanowiłem zidentyfikować wszystkie najbardziej użyteczne wzorcwe i omówić je w ramach kolejnej serii. Oto ich lista:
- Komponenty kontenerowe i prezentacyjne
- Switch komponent
- Komponenty wyższego rzędu (HOC)
- Render callback/Render props/Slots
- Compound Components
- Provider/Consumer (Context API)
- Komponenty kontrolowane/niekontrolowane
- Antywzorce (bonus dla wytrwałych ;))
Sorry za językowy misz-masz, ale mam dość pokrętną heurystykę co do tłumaczenia nazw związanych z programowaniem. Już tłumaczę: dopóki efekt tłumaczenia na polski nie narusza mojej godności i rozumu (pozdrawiam komponent przełącznik) i łatwo go skojarzyć z oryginalną nazwą (jak w przypadku komponentów kontenerowych i prezentacyjnych), to trzymam się nazw w języku polskim. Taka sytuacja.
Pewnie jesteś świadom istnienia większości z wymienionych wzorców. Być może stosujesz część z nich w codziennej pracy. Tym niemniej, ilość materiałów na ten temat, zwłaszcza w języku polskim, jest naprawdę skromna. To dla mnie świetna okazja na dostarczenie czegoś naprawdę wartościowego.
Pierwsze dwa wzorce są na tyle proste, że możesz śmiało przyswajać je niezależnie od stopnia zaawansowania. Za to kolejne wymagają solidnego opanowania podstawy Reacta. Jeżeli dopiero stawiasz swoje kroki albo nie jesteś przekonany, czy jesteś gotowy, to polecam zapoznać się z seriami Powtórka przed ReactJS oraz Pierwszy projekt w ReactJS”. Tam znajdziesz wszystko, czego potrzeba do opanowania bardziej złożonych technik.
Pff… wzorzec X? Po co to komu? A dlaczego?
Warto zwrócić uwagę, że kwalifikowanie powyższych wzorców jako przykładu dobrych praktyk czy antywzorców podlega ciągłym (często burzliwym) dyskusjom. Dobrym przykładem na to jest artykuł Function as Child Components Are an Anti-Pattern, który racjonalnie argumentuje przeciwko stosowaniu Render callback (nazewnictwo stosowane zamiennie). W tym samym czasie zachęca do jego stosowania sama dokumentacja Reacta. Kto ma rację? Najpewniej nikt. Nie ma absolutnych odpowiedzi, wszystko jest zaledwie opinią, o której zasadności decyduje kontekst. Zamiast angażować się w spory, odrobimy zadanie domowe pozwalające na wyrobienie własnego zdania. To najlepszy sposób na podejmowanie świadomych decyzji we własnej pracy.
Przeszkoda czy wyzwanie?
Większość z wzorców, mimo niesamowitego potencjału, ogranicza się do sprytnej kompozycji podstawowego api dwóch komponentów. To świetny dowód na to, że sposobów na wykorzystanie maksimum możliwości Reacta jest dużo więcej niż mogłoby się wydawać na pierwszy rzut oka. Część jest stosunkowo prosta, od razu będziesz rozumiał, o co się rozchodzi i znajdziesz sposoby ich zastosowania w praktyce.
Oczywiście nie we wszystkich przypadkach będzie tak różowo. Tak jak do tej pory szedłem przez Reacta i Reduxa jak burza, pierwszy kontakt z niektórymi wzorcami wysłał mnie na randkę z modnym ostatnimi czasami partnerem programistów: syndromem oszusta (ang. imposter syndrom). Im dłużej analizuję to zjawisko na swoim przykładzie oraz czytam relacje innych programistów, tym bardziej dochodzę do wniosku, że wynika to z niedoceniania własnych umiejętności i jednoczesnego przeceniania tego, jak radzą sobie inni.
Kiedy dopada mnie zwątpienie, zawsze przypominam sobie, jak pisałem pierwszy prawdziwy algorytm w kursie Pythona na Udacity. Miałem za zadanie obliczyć ilość dni pomiedzy dwoma datami z uwzględnieniem lat przestępnych. Dym leciał z czachy, aż się kurzyło. Po kilku godzinach wytężonego wysiłku, który wywołał u mnie niezłą migrenę, w końcu się udało. Trzy lata i dziesiątki podobnych sytuacji później zakodowałbym to w kilka minut. Na ogół największy dyskomfort wcale nie leżał w samym wyzwaniu, ale fałszywym przeświadczeniu, że inni na pewno przeszli przez nie bez kropli potu na czole.
Jak wyglądała powtórka z rozrywki w przypadku wzorców? A no do render props podchodziłem kilka razy. Cały ten patent z funkcją zwracającą JSX wydawał mi się przekombinowany i ciężki do zastosowania w praktyce. Czyżbym był zbyt ograniczony na stosowanie podstaw programowania funkcyjnego?. Nic z tych rzeczy. Przeczytałem kilka dobrych artykułów, zaprojektowałem własne komponenty wykorzystujące ten wzorzec i… zaskoczyło. Teraz render props wydaje mi się oczywiste, eleganckie i niesamowicie użyteczne.
Podsumowując. Ostrzegam, część z zaawansowanych wzorców może z początku być dla Ciebie onieśmielająca. Zwłaszcza jeżeli będziesz miał mylne wrażenie, że dla mnie czy innych to wszystko było proste od samego początku. Pamiętaj, że wielu ludzi, w tym ja, prezentuje Ci tylko precyzyjnie spreparowane highlighty, podczas gdy pot płynie strużkami za zamkniętymi drzwiami.
Kończę dygresję i przejdę nareszcie do tego, co zaanonsowałem w tytule wpisu.
Nowa forma, nowe możliwości
Na początku września minie rok od opublikowania pierwszego wpisu na tym blogu. 32 artykuły później wiem jedno: pisanie jest dla mnie bardzo czasochłonne. Nie byłoby w tym nic złego, ale niewspółmiernie dużo czasu poświęcam na redakcję tekstu. Często brakuje mi już energii na dopieszczenie części merytorycznej, przygotowanie praktycznych wyzwań czy promowanie treści tak, żeby mogły dotrzeć do szerszego grona odbiorców.
I tutaj przypomniało mi się, że przecież nie jestem ograniczony do dotychczasowej formy. Ba, wstyd się przyznać, ale za nagrywanie video chciałem zabrać się już od początków liceum. Wtedy marzyło mi się prowadzenie kanału z poradnikami do gry League of Legends. Minęło 8 lat, dawno zarzuciłem potyczki na polach sprawiedliwości, a mój kanał na YT nadal świeci pustkami. Opór pod postacią wymówek „nie mam odpowiedniego sprzętu”, „nie mam czasu” skutecznie blokował realizację jednego z moich największych celów. Już w przypadku poprzedniej serii mocno zastanawiałem się nad tym eksperymentem, ale znowu odłożyłem go „na później”. Tym niemniej, koniec czekania na „właściwy moment”, czas wreszcie zabrać się do roboty.
Jestem przekonany, że forma video lepiej sprawdzi się przy dalszym zapoznawaniu się z tajnikami Reacta niż posty na blogu. Zresztą, jako ekstrawertyk, wykorzystam każdą okazję do pogadania, nawet jeżeli bezpośrednim odbiorcą będzie wyłącznie mój pierwszy „profesjonalny” mikrofon :).
Kiełbasa wyborcza
Serie o wzorcach zrealizuję w formie tutoriali video. Każdy film będzie poświęcony jednemu wzorcowi. Przede wszystkim postaram się udzielić jasnych odpowiedzi na dwa najważniejsze pytania:
- Jaki problem rozwiązuje ten wzorzec?
- Jak zaimplementować go praktyce?
Te pytania będą dla mnie podstawą do poruszenia wszystkich istotnych zagadnień. Nie chcę Cię zostawiać z fałszywym poczuciem kompetencji. Wielu ludzi narzeka, że nie da się uczyć programowania z video czy blogów. Bierna konsumpcja, bez samodzielnej pracy, nie daje szans na utrwalenie wiedzy, niezależnie od źródła informacji. Oczywiście forma przekazywania wiedzy przez nauczyciela ma niesamowity wpływ na efekty osiągane przez ucznia. Problem polega na tym, że bardzo często to właśnie krótkie materiały, z których tak naprawdę niewiele wynika, cieszą się największą popularnością i kuszą do takiego ukierunkowania wysiłków. Jednak jak przypomina Jordan Peterson w 12 zasadach życia (must read!), w długim terminie warto robić to, co ma znaczenie, a nie to, co wydaje się opłacalne.
Obiecuję, że postaram się zaoszczędzić Wam tłumaczenia czegokolwiek na przykładzie komponentów typu Counter. Będę dawał linki do projektów w CodeSandbox przed i po zastosowaniu wzorca, żebyście mogli sami pogrzebać w kodzie i użyć ich jako materiał referencyjny przy przenoszeniu wzorców do Waszych komponentów. Prawda jest taka, że to właśnie w tym momencie będziesz miał okazję do prawdziwego utrwalenia wiedzy, przekucia informacji w umiejętność.
Oglądasz na własną odpowiedzialność 😉
Jednocześnie prawilnie przestrzegam: nie mam doświadczenia w przemówieniach publicznych, obróbce video oraz audio. Liczę się z tym, że część z Was stwierdzi, że „kiedyś było lepiej” i „wracaj do blogowania”. Cóż, zalecam cierpliwość :). Jestem pełen entuzjazmu co do wizji migracji AlgoSmart na YT. Chcę dzielić się wiedzą w mojej ulubionej formie jej konsumpcji, zdobyć nowe umiejętności i poradzić sobie z nowymi wyzwaniami. Jedyne, co mogę obiecać na początek: dołożę wszelkich starań, żeby każdy kolejny materiał był lepszy od poprzedniego.
Co z blogiem?!
Czy to oznacza, że to koniec pisania artykułów na bloga? Raczej nie. Kiedy nabiorę wprawy w produkcji video, wrócę do pisania artykułów. Myślę, że będzie pojawiało się więcej treści okołoprogramistycznych, tematykę czysto techniczną chciałbym właśnie przenieść na YT. Kolejny artykuł na blogu będzie podsumowaniem pierwszego roku AlgoSmart w internetach (urodziny już 4 września :D!). Anyways, nie planuję porzucenia tego miejsca na pastwę botów, które wytrwale spamują mi skrzynkę przez formularz kontaktowy ;).
