Aktualizacja Angulara na Modułowej Platformie SaaS

Aktualizacja Angulara w złożonej aplikacji to coś więcej niż tylko przejście na nową wersję to strategiczna decyzja, która wpływa niemal na każdą część kodu. W tym artykule przedstawiamy, jak skutecznie przeprowadzić aktualizację wielowersyjną w modułowej platformie B2B dla branży medycznej.

To zakulisowe spojrzenie ukazuje nasze podejście do planowania, realizacji i stabilizacji podczas dużej migracji – przy jednoczesnym zachowaniu ciągłości rozwoju i stabilności produktu. Jeśli rozważasz podobną aktualizację lub zastanawiasz się, czy to dobry moment – mam nadzieję, że ten materiał pomoże Ci podjąć świadomą i pewną decyzję.

Przegląd projektu i branży

Zaktualizowaliśmy platformę internetową B2B w branży opieki zdrowotnej, łączącą szpitale i kliniki z producentami sprzętu.

W momencie rozpoczęcia aktualizacji w 2023 roku projekt działał na Angularze 14 – wersji, która nie była już oficjalnie wspierana. Naszym celem było przejście na Angulara 17, najnowszą wtedy stabilną wersję, aby zapewnić długoterminową stabilność i dostęp do nowych funkcji, takich jak Signals, Standalone API i nowe konstrukcje sterujące w szablonach.

Frontendem zajmowało się czterech programistów frontendowych i dwóch full-stack, pracujących nad dużym, modułowym kodem. Ponieważ nowe funkcje były rozwijane równolegle, potrzebowaliśmy planu aktualizacji, który będzie przewidywalny, bezpieczny i umożliwi stopniowe testowanie i wdrażanie zmian.

Dzięki takiemu podejściu udało się później bezproblemowo przejść do Angulara 19, co potwierdza, że włożony wysiłek przynosi długofalowe korzyści.

Powód aktualizacji Angulara

Przejście na Angulara 17 było strategicznym krokiem w kierunku szybszego, stabilniejszego i nowocześniejszego produktu. Wyczerpywaliśmy już możliwości Angulara 14, a pozostanie przy przestarzałej wersji tylko by nas spowalniało.

Korzyści biznesowe były oczywiste: szybsze wdrażanie funkcji, krótsze cykle rozwoju, mniej regresji i lepsze doświadczenia zespołu. Technicznie: lepsza wydajność, łatwiejsza skalowalność i solidna baza pod dalszy rozwój.

Nowe funkcje Angulara 15-17, które to umożliwiły:

Signals (v16): przewidywalna i wydajna reaktywność, przydatna w złożonych fragmentach aplikacji,
Standalone API (od v15): uproszczenie struktury modułów, mniej boilerplate’u,
Nowa składnia przepływu sterowania (v17): uproszczenie szablonów i ich lepsza czytelność,
Wzrost wydajności: szybsze buildy dzięki esbuild i oficjalne wsparcie SSR.

📘 Chcesz wiedzieć więcej o zmianach w Angularze 14-20? Pobierz bezpłatny ebook „The Ultimate Guide to Angular Evolution”.

Wyzwania

Chociaż aktualizacja do Angulara 17 ostatecznie przyniosła dobre rezultaty, proces ten nie obył się bez problemów. Jak to bywa przy migracjach na dużą skalę, musieliśmy zmierzyć się z kilkoma technicznymi i organizacyjnymi wyzwaniami.

Aktualny stan projektu
W momencie przeprowadzania aktualizacji projekt działał na Angularze 14, a interfejs użytkownika był oparty na Angular Material. Sama aplikacja była rozbudowana i modularna, obejmując wiele obszarów biznesowych, co oznaczało, że nawet drobne zmiany mogły nieoczekiwanie wpływać na inne części systemu.

Architektura i używane technologie
Architektura dodawała kolejną warstwę złożoności. Do zarządzania monorepozytorium używaliśmy Nx, do obsługi stanu NgRx, do tworzenia komponentów Storybooka, a także własnego systemu projektowania opartego na Angular Material. Był to potężny stos technologiczny, ale wymagający ostrożności. Każda większa aktualizacja musiała być sprawdzana pod kątem kompatybilności z dziesiątkami komponentów i usług.

Problemy napotkane podczas aktualizacji
Jednym z głównych wyzwań była złożoność samego projektu. Każdą zmianę należało starannie zweryfikować w wielu domenach biznesowych i modułach, aby zapobiec regresjom.
Znaczącego wysiłku wymagała także aktualizacja Angular Material do nowych komponentów opartych na MDC, wprowadzonych w wersji 15. Ponieważ nasz interfejs był mocno dostosowany, nie mogliśmy polegać na automatycznych migracjach. Zdecydowaliśmy się odłożyć ten krok do momentu przejścia na Angulara 15, aby ograniczyć ryzyko, a następnie migrowaliśmy komponenty Material stopniowo, by zachować stabilność i nie zakłócać bieżącej pracy.

Musieliśmy również rozwiązać kilka problemów związanych z zależnościami zewnętrznymi. Niektóre biblioteki nie były jeszcze dostosowane do najnowszych wersji Angulara, co zmuszało nas do ręcznych aktualizacji, łatania ich lub — w niektórych przypadkach — dostosowania własnego kodu. Ta część procesu wymagała szczególnej uwagi i dokładnych testów, aby upewnić się, że nic się nie zepsuło.

Proces aktualizacji

Ponieważ migracja obejmowała kilka głównych wersji (z Angulara 14 do 17), od początku wiedzieliśmy, że próba zrobienia wszystkiego naraz byłaby zbyt ryzykowna. Zamiast tego zaplanowaliśmy stopniową aktualizację — wersja po wersji — aby odizolować potencjalne problemy, uprościć debugowanie i utrzymać cały proces w ryzach.

Planowanie i przygotowania do aktualizacji

Przegląd changeloga Angulara i audyt zależności
Przed rozpoczęciem aktualizacji dokładnie przeanalizowaliśmy changelog i zmiany niezgodne wstecznie wprowadzone w każdej wersji Angulara od 15 do 17. Sprawdziliśmy także kompatybilność zewnętrznych bibliotek, by upewnić się, że będą działały z docelowymi wersjami lub zidentyfikować miejsca wymagające aktualizacji lub dostosowania.

Termin rozpoczęcia i zarządzanie zasobami
Odpowiedni moment był równie ważny jak samo planowanie. Ponieważ nad projektem pracowało wielu programistów, musieliśmy zsynchronizować aktualizację z innymi trwającymi pracami. Wybraliśmy sprint, w którym frontend był nieco przed backendem, a żadne kluczowe funkcjonalności nie były aktywnie rozwijane. Dzięki temu mogliśmy przeprowadzić aktualizację w izolacji, bez zakłócania szerszego harmonogramu, a pozostali programiści mogli w tym czasie kontynuować prace nad mniejszymi funkcjami równolegle.

Chociaż jedna osoba mogłaby poradzić sobie z tym zadaniem, przypisaliśmy do niego dwie osoby, aby szybciej wychwytywać regresje i naprawiać problemy z budowaniem projektu, błędy wizualne czy nieprzechodzące testy jednostkowe.

———————————-

———————————–

Identyfikacja nieaktualnych lub mocno zmodyfikowanych bibliotek
Dużą część przygotowań stanowiło zmierzenie się z przejściem Angular Material na komponenty oparte na MDC — był to najbardziej złożony aspekt całej aktualizacji. Zaplanowaliśmy, że najpierw zaktualizujemy aplikację do Angulara 15, pozostawiając starsze komponenty Material bez zmian.
Aktualizacja wersja po wersji
Świadomie zdecydowaliśmy się nie przechodzić od razu przez wszystkie wersje. Po każdej dużej aktualizacji testowaliśmy aplikację dokładnie i monitorowaliśmy ewentualne regresje. Pozwoliło nam to skuteczniej izolować i debugować problemy, co sprawiło, że cały proces był bardziej przewidywalny i stabilny.

Narzędzia użyte podczas migracji

Podczas aktualizacji opieraliśmy się na połączeniu oficjalnych narzędzi oraz narzędzi specyficznych dla Nx. Przewodnik Angular Update Guide pomógł nam zidentyfikować niezgodne już zmiany, przestarzałe API i zalecane kroki dla każdej wersji.

Ponieważ projekt był zbudowany w oparciu o Nx, korzystaliśmy również z nx migrate command, które uprościło proces aktualizacji zależności, generowania migracji oraz wprowadzania zmian w kontrolowany sposób.

Proces aktualizacji krok po kroku

Nasza droga rozpoczęła się od przejścia na Angulara 15. Po wstępnej analizie zależności i architektury projektu uruchomiliśmy proces aktualizacji za pomocą migracji Nx. Narzędzie Nx przejęło większość ciężaru — zaktualizowało pakiety Angular core i NgRx, dostosowało pliki konfiguracyjne i kod tam, gdzie było to konieczne.

Typowy przebieg aktualizacji (z czego kroki 3 i 4 były obsługiwane przez Nx):

Aktualizacja Node.js do wersji wymaganej przez docelową wersję Angulara (jeśli było to konieczne),
Aktualizacja Nx do najnowszej kompatybilnej wersji, aby zapewnić zgodność narzędzi i skorzystać z migracji,
Aktualizacja pakietów Angular core (@angular/core, @angular/cli itd.),
Aktualizacja pakietów NgRx do wersji zgodnych z nową wersją Angulara,
Aktualizacja wszystkich zależności zewnętrznych do wersji zgodnych z nową wersją Angulara,
Naprawa ewentualnych problemów podczas kompilacji wynikających ze zmian lub przestarzałych konfiguracji,
Uruchomienie linterów i testów w celu sprawdzenia jakości kodu i upewnienia się, że nic nie zostało zepsute,
Uruchomienie Storybooka i aplikacji w celu przeprowadzenia testów wizualnych i regresyjnych.

Po wykonaniu tych kroków dokładnie sprawdziliśmy wersje wszystkich pakietów, aby upewnić się, że korzystamy z najnowszych stabilnych wydań. Dodatkowo, porównaliśmy naszą procedurę z oficjalnym Angular Update Guide, by upewnić się, że żaden kluczowy krok nie został pominięty przez automatyzację.

Silnie zalecane jest rozdzielenie każdego z etapów na osobne commity. Ułatwia to śledzenie zmian, debugowanie regresji oraz izolowanie konkretnych kroków aktualizacji. Nx migrations bardzo w tym pomagają, ponieważ mogą uporządkować zmiany w sposób przyjazny do commitowania.

Aktualizacja Angular Material

Po przejściu na Angulara 15 skupiliśmy się na migracji warstwy UI do nowych komponentów Angular Material opartych na MDC. Była to najbardziej złożona część całego procesu — doświadczenie to zapewne podzielają zespoły pracujące z nieco przestarzałymi bazami kodu, które mocno opierają się na Angular Material.

Aby poradzić sobie z tą złożonością, zastosowaliśmy podejście krok po kroku: migrowaliśmy po jednym komponencie Material na raz. Niektóre komponenty wymagały minimalnych lub żadnych zmian, dzięki czemu można było bezpiecznie włączyć je do standardowych sprintów jako drobne, niskiego ryzyka zadania. Takie podejście ułatwiało izolację i weryfikację każdej zmiany, zmniejszając ryzyko regresji oraz umożliwiając szybkie wychwycenie różnic wizualnych lub w zachowaniu interfejsu.

Ponieważ każda aktualizacja była samodzielna, przeglądy kodu i debugowanie pozostały przejrzyste. To podejście pozwoliło nam również kontynuować rozwój nowych funkcji bez narażania stabilności. Był to kluczowy czynnik, który pozwolił nam unowocześnić interfejs użytkownika bez większych zakłóceń w ogólnym przebiegu prac.

Po zakończeniu migracji komponentów MDC wróciliśmy do procesu aktualizacji Angulara — najpierw do wersji 16, potem do 17 — stosując tę samą, sprawdzoną metodę aktualizacji wersja po wersji.

Oddziel nowe funkcje od aktualizacji wersji

Choć kuszące może być wprowadzanie nowych funkcji Angulara przy okazji aktualizacji wersji, kluczowe jest traktowanie ich jako oddzielnego zadania. Większość funkcji Angulara jest wspierana przez kilka ostatnich wersji, więc rzadko istnieje potrzeba ich natychmiastowej adopcji.

Łączenie prac nad nowymi funkcjami z aktualizacją wersji znacząco zwiększa liczbę zmienionych plików, co utrudnia rozróżnienie, co było konieczne dla aktualizacji, a co stanowi część rozwoju funkcjonalności. Skoncentrowanie się wyłącznie na aktualizacji upraszcza przegląd kodu, poprawia śledzenie zmian i zwiększa stabilność. Po zakończeniu i przetestowaniu aktualizacji wersji, wdrażanie nowych funkcji można przeprowadzić bardziej świadomie i czysto w ramach kolejnych zadań.

Aby wprowadzać nowe funkcje Angulara bez zakłócania bieżącego rozwoju, przyjęliśmy strategię migracji inkrementalnej. Zamiast zatrzymywać prace nad funkcjami, modernizowaliśmy kod bazowy przy każdej okazji — jeśli dane zadanie wymagało edycji komponentu, ocenialiśmy, czy warto migrować go do nowszych wzorców Angulara, takich jak standalone components, nowa składnia sterowania przepływem czy API oparte na Signals (inputs, outputs, queries) — o ile zmiany nie wprowadzały zbyt dużego „hałasu” w samej funkcjonalności.

W spokojniejszych okresach lub pomiędzy większymi funkcjami rezerwowaliśmy też czas na dedykowane zadania migracyjne, czasem obejmujące cały moduł aplikacji za jednym razem. Wbudowane schematy Angulara odegrały tu kluczową rolę, ułatwiając adopcję nowoczesnych API bez spowalniania rozwoju. To mieszane podejście pozwoliło nam rozwijać kod bazowy i jednocześnie utrzymywać tempo pracy nad nowymi funkcjami.

Ile trwa aktualizacja Angulara?

Pierwszy etap aktualizacji, z Angulara 14 do 15, sam w sobie nie był szczególnie skomplikowany. Najwięcej czasu pochłonęły testy regresyjne, które miały na celu upewnienie się, że wszystko działa zgodnie z oczekiwaniami po każdej zmianie wersji. W przypadku bardziej złożonych aplikacji taka aktualizacja może zająć nawet kilka dni — w zależności od rozmiaru bazy kodu i liczby zależności.

Gdy komponenty Material zostały zaktualizowane i ustabilizowane, kolejne aktualizacje do Angulara 16 i 17 przebiegły znacznie szybciej. To podejście krok po kroku pomogło nam uniknąć większych problemów i precyzyjnie śledzić regresje, zapewniając stabilność aplikacji.

Istnieje wiele czynników, które mogą wpływać na to, jak długo trwa aktualizacja Angulara. Omówiliśmy je szczegółowo w naszym artykule “How Long Does an Angular Upgrade Take — and How to Keep Feature Delivery on Track.”

Rezultaty

Po aktualizacji mogliśmy zmodernizować aplikację bez zakłócania trwających prac rozwojowych. W tej sekcji przedstawiamy techniczne i biznesowe efekty migracji, wraz z korzyściami, jakie przyniosła, oraz informacją, ile czasu zajął cały proces.

Korzyści techniczne i biznesowe

Z technicznego punktu widzenia aktualizacja doprowadziła projekt do Angulara 17 z czystą i nowoczesną bazą kodu, którą teraz łatwiej utrzymywać i rozwijać. Ta aktualizacja stworzyła również podstawy do wprowadzania nowych funkcji i możliwości w bardziej efektywny sposób. W naszym przypadku później wdrożyliśmy komponenty samodzielne (standalone), Signals i nową składnię przepływu sterowania, co uprościło rozwój i zwiększyło wydajność.

Z perspektywy biznesowej aktualizacja poprawiła długoterminową możliwość utrzymania projektu i zmniejszyła dług techniczny. Prędkość rozwoju wzrosła dzięki lepszej wydajności, szybszym czasom budowania aplikacji (dzięki esbuild) i nowoczesnym narzędziom. Posiadanie aktualnego, stabilnego stosu technologicznego daje nam także większą pewność we wprowadzaniu nowych funkcji i ułatwia wdrażanie nowych programistów. W dłuższej perspektywie ta modernizacja pomaga obniżyć koszty utrzymania i minimalizuje ryzyko nieoczekiwanych problemów spowodowanych przestarzałymi zależnościami.

Wnioski z procesu aktualizacji

Jednym z kluczowych wniosków było to, że planowanie i przygotowanie mają ogromne znaczenie, szczególnie przy aktualizacjach obejmujących wiele głównych wersji. Uniknęliśmy większości niespodzianek, dzieląc proces na mniejsze kroki, wcześniej weryfikując kompatybilność z bibliotekami zewnętrznymi i dostosowując czas aktualizacji do cyklu rozwoju zespołu.

Nauczyliśmy się również, że aktualizacje złożonych elementów, takich jak Angular Material, najlepiej przeprowadzać stopniowo i na wczesnym etapie. Migracja do komponentów MDC osobno pomogła nam uniknąć połączenia dwóch istotnych źródeł zmian jednocześnie.

Ostatnim wnioskiem było to, że pozostawienie czasu pomiędzy głównymi aktualizacjami pozwalało nam lepiej wychwycić regresje i utrzymać stabilność, zamiast spieszyć się z migracją i później zmagać się z zalewem problemów.

Praktyczne porady na przyszłość

Nie zatrzymuj się po początkowej aktualizacji – to może być naprawdę dobry początek. Gdy zaktualizowaliśmy aplikację do Angulara 17, kolejne aktualizacje były znacznie szybsze i płynniejsze. Udało nam się przechodzić na nowsze wersje wkrótce po ich wydaniu, minimalizując opóźnienia i utrzymując projekt na bieżąco z najnowszymi funkcjami.

Kilka kluczowych wskazówek dla udanej aktualizacji:

Dobrze zaplanuj: poświęć czas na zrozumienie zakresu zmian i przygotowanie się na potencjalne przeszkody przed rozpoczęciem aktualizacji.
Podziel aktualizację na mniejsze kroki: rozbij proces aktualizacji na mniejsze części, aby łatwiej było śledzić zmiany i debugować modyfikacje w każdym kroku.
Oddziel nowe funkcje od aktualizacji: unikaj łączenia prac nad nowymi funkcjami z procesem aktualizacji, aby zachować porządek i uniknąć niepotrzebnej złożoności.
Regularne aktualizacje to klucz: regularne aktualizowanie Angulara utrzymuje Twoją aplikację bezpieczną i łatwą w utrzymaniu. Jeśli dopuścisz do kumulacji wersji, znowu możesz się znaleźć w tyle, a przyszłe aktualizacje staną się bardziej uciążliwe i czasochłonne.

Stosowanie tych praktyk sprawi, że proces aktualizacji będzie bardziej płynny i przewidywalny w dłuższej perspektywie.

Podsumowanie

Aktualizacja Angulara w złożonym projekcie to nie lada wyzwanie, ale przy odpowiednim planowaniu i podejściu krok po kroku jest całkowicie wykonalna. Dzięki poświęceniu czasu na migrację między wersjami i rozwiązaniu kluczowych problemów udało nam się zmodernizować aplikację przy jednoczesnym zachowaniu stabilności. Aktualizacja nie tylko poprawiła wydajność i łatwość utrzymania, ale także przygotowała grunt pod szybsze i sprawniejsze aktualizacje w przyszłości.

Jeśli stoisz przed wyzwaniami związanymi z aktualizacją, nie wiesz, od czego zacząć, lub po prostu potrzebujesz drugiej opinii — skontaktuj się z nami. Specjalizujemy się w Angularze i jesteśmy tutaj, by pomóc. Niezależnie od tego, czy potrzebujesz strategicznych wskazówek, czy praktycznego wsparcia, pomożemy Ci ruszyć naprzód z jasnością i pewnością. Porozmawiajmy o Twoim przypadku podczas bezpłatnego 30-minutowego spotkania.