Zeszły rok był dla mnie zdecydowanie rokiem zawodowego startu z nowym. Oprócz podstawowej zmiany, czyli języka backendowego, z dotychczasowego PHP na C#, zacząłem też przygodę z Angularem. Nie miałem z nim wcześniej do czynienia i w Idea Banku pewnie długo jeszcze bym nie miał, bo nasz główny projekt był aplikacją monolityczną, a ze względu na swój rozmiar nie byłoby nawet rozmowy o jego przepisaniu.
Stack w postaci backendu na mikroserwisach + frontend nie był mi obcy, w tematyce REST-owych API czułem się dość dobrze, jednak nigdy nie dotykałem frontu na nowoczesnych frameworkach, jak właśnie Angular czy React. Bardzo długo miałem też do tego typu podejścia negatywny stosunek, uważając to za ślepą uliczkę w rozwoju technologii. Nie wiem, czy argumenty, którymi sobie to tłumaczyłem, były sensowne, czy była to po prostu racjonalizacja sobie braku znajomości tematu w czasach, gdy od dłuższego czasu świat zaczynał w ten sposób pracować.
Uprzedzenie mogło wpływać na moje podejście do Angulara na początku pracy, a już na pewno negatywny wpływ miał mój sposób myślenia i przyzwyczajenia wynikające z pracy w dotychczasowym stacku technologicznym. I to właśnie początki procesu poznawania Angulara chcę opisać w tym wpisie, póki mam je relatywnie na świeżo w głowie. Jest to przy okazji opis tego, jak nie powinno się do tego podchodzić.
Rozpoczynając przygodę z nowymi rozwiązaniami dotychczas najlepiej wychodziło mi klasyczne podejście: na początku poznanie suchej teorii przez lekturę dokumentacji, a dopiero potem z tą wiedzą rozpoczęcie programowania. Nie miałem na to czasu zarówno w przypadku opisywanej poprzednio nauki C#, jak i w przypadku Angulara. Po prostu zostałem przydzielony do nowego projektu i po tasku wdrożeniowym trzeba było przejść do prawdziwych zagadnień.
Początek był toporny. Taska wdrożeniowego zrobiłem w zasadzie kopiując istniejące rozwiązanie w całości i refaktoryzując drobne jej części, bez większego zrozumienia. Nie miałem pojęcia o frameworku, praktycznie żadnego o TypeScripcie, więc nie korzystałem samodzielnie z jego dobrodziejstw w stosunku do JS, nie znałem struktury projektu. Rok wcześniej miałem kilkudniowe szkolenie z Angulara, jednak tutaj czułem się, jakby było to coś zupełnie innego (bo w rzeczywistości było, o czym później). Zbieżne z tym szkoleniem były jedynie podstawowe składowe projektu angularowego.
Brak rozpoznania struktury projektu był moim podstawowym błędem. Oprócz Angulara korzystamy z NgRx do obsługi store’a i RxJS do programowania reaktywnego. Nie wiedziałem tego i traktowałem całość jako części Angulara, więc przeszukiwanie internetu pod kątem rozwiązywania problemów w Angularze – co naturalne – zwracało zupełnie niepasujące wyniki. Flow aplikacji z grubsza wyczułem po kilku wykonanych taskach, ale nadal była to znajomość po łebkach i bez solidnych podstaw, więc o ile coś nie było określone jawnie w kodzie, to było dla mnie magią i działo poza świadomością sposobu, w którym przebiegało. To powodowało, że z powtarzalnymi problemami jako tako sobie radziłem, jednak każde odstępstwo od tej „magii” było dla mnie dużym problemem. Więc na początek – rozpoznaj strukturę projektu, jeżeli chcesz to zrobić dobrze i nie popełnić moich błędów.
Zanim w pełni świadomie dowiedziałem się o NgRx i RxJS, frustrował mnie flow aplikacji, którego nie rozumiałem. Całe zawodowe życie byłem przyzwyczajony do podejścia (w uproszczeniu): „pobierz wiersz z modelu (opartego na bazie danych), ewentualnie przetwórz, przekaż do widoku, renderuj”. I z takim podejściem starałem się pracować w Angularze. Tyle, że nie zawsze się dało – tam, gdzie było to możliwe, próbowałem pobierać dane w resolverach, by móc się w komponencie dobrać do statycznego snapshota z interesującymi danymi, a strumieni nie rozumiałem, bo – znowu – nie znałem podstaw.
W międzyczasie, gdy już dowiedziałem się, że mamy w projekcie zaprzęgnięty NgRx i RxJS, dotarcie do odpowiednich materiałów było znacznie prostsze. Wtedy też zacząłem oglądać na YouTube tutoriale z nimi związane. Było to dość późno, po ładnych kilku miesiącach (może niecałej połowie roku?) pracy przy aplikacjach napisanych w Angularze. Ale właśnie wtedy coś mi w głowie zaskoczyło. Gdy rozeznałem się już w RxJS, siłą rzeczy musiałem poznać lepiej observbables i regularne operacje na nich. Zmieniłem sposób myślenia z zafiksowania na „pobieranie” wierszy, zamieniając to na operacje na observables, kolejne komunikaty z nich, ich przetwarzanie, subskrypcje, itd. A przynajmniej przestałem się ich bać. W podobnym czasie zaczęło mi się w głowie klarować podejście do store’a – poza znanymi z zastanego kodu akcjami i efektami też pierwsze operacje na state. A więc kolejna rada, jak oszczędzić sobie czasu – zmień sposób myślenia, poznaj strumienie i podstawy operacji na nich. Nie da się efektywnie (o ile w ogóle) pracować na Angularze z takim podejściem, jak moje inicjalne. Jest to zresztą jedna z największych zalet pracy z Angularem – gdy już to poznasz, większość dynamicznej aktualizacji treści masz z głowy, zrobi się „sama”.
Od ww. momentu pracowało mi się już sprawniej mimo, że nadal świadomie wielu rzeczy nie znałem (i nie znam do tej pory). Pracując jednak na już istniejącym projekcie można sobie na taki luksus pozwolić i część zagadnień na samym początku zignorować, aby wrócić do nich, gdy przyjdzie taka potrzeba lub w ramach własnego harmonogramu nauki. I w taki sposób doszedłem po pewnym czasie do bardziej świadomej pracy ze state’em: do selektorów, reducerów, itd. Z czasem poznawałem sposób realizacji w Angularze formularzy, kolejne komponenty material UI, komunikację między komponentami, itd. Stąd też kolejna rada – ułóż swoje priorytety w nauce. Nie wszystko trzeba (a nawet się da) opanować od razu.
Dalsze kroki to już stopniowe poznawanie kolejnych rzeczy, których nie ruszałem wcześniej lub nie miałem świadomości ich istnienia. Ważne jest też zdobywanie doświadczenia przy rozwiązywaniu problemów. Pamiętam swoje zrezygnowanie, gdy pominięcie jednego importu w module skutkowało całą litanią błędów z kaskady powiązanych komponentów. W takich sytuacjach bardzo przydatny jest mentor, który służy swoim doświadczeniem i może nakierować na źródło różnych problemów. W tej kwestii jestem na bardzo dobrej pozycji, bo mamy w zespole kolegę, którego pomoc w zakresie Angulara jest nieoceniona, co na pewno ma kluczowe znaczenie w nauce. Jeżeli pracujesz samodzielnie, warto poszukać mentoringu na zewnątrz. W przypadku konkretnych problemów polecam jak zawsze Stack Overflow – dobre odpowiedzi tam prezentują nie tylko suchy, techniczny kod, ale też nakreślają tło odpowiedzi, co jest też konfrontowane przez innych użytkowników w komentarzach.