Angular

Skalowalne aplikacje Angular opierają się na czytelnym podziale odpowiedzialności, niskim sprzężeniu i dobrze wyznaczonych granicach między modułami, komponentami oraz usługami. W praktyce warto sprawdzić strukturę domen, sposób komunikacji między warstwami, wykorzystanie dependency injection oraz decyzję, kiedy stosować komponenty standalone zamiast klasycznych modułów. Przykładem jest podział aplikacji na obszary funkcjonalne z osobnym routingiem, usługami i kontraktami danych dla każdej domeny.
Ten temat przerabiamy praktycznie na szkoleniu: Zaawansowane tworzenie aplikacji z użyciem Angular.

Komponenty standalone upraszczają budowę aplikacji Angular, ponieważ ograniczają zależność od NgModules i ułatwiają lokalne definiowanie importów. Przy wyborze warto ocenić wielkość kodu, stopień dojrzałości projektu, sposób ładowania funkcji oraz plan migracji, szczególnie jeśli aplikacje mają już rozbudowaną strukturę modułową. Dobrym przykładem jest stopniowe przenoszenie nowych ekranów do standalone components przy zachowaniu istniejących modułów w starszej części systemu.
Jeśli chcesz przećwiczyć to krok po kroku, zobacz: Zaawansowane tworzenie aplikacji z użyciem Angular.

Zarządzanie stanem w Angular z użyciem NgRx porządkuje przepływ danych przez akcje, reduktory, selektory i efekty, dzięki czemu łatwiej kontrolować logikę aplikacji. Należy sprawdzić, które dane rzeczywiście wymagają wspólnego stanu, jak zorganizować feature store oraz gdzie rozdzielić logikę synchroniczną od asynchronicznej. Przykładem jest obsługa listy zamówień, w której selektory udostępniają przefiltrowane dane, a efekty realizują komunikację z API.
To jedno z zagadnień omawianych podczas szkolenia: Zaawansowane tworzenie aplikacji z użyciem Angular.

RxJS dobrze sprawdza się przy złożonych strumieniach zdarzeń, integracji z HTTP i transformacji danych, natomiast Signals upraszczają lokalną reaktywność oraz aktualizację widoku. Warto przeanalizować, czy problem dotyczy przepływu asynchronicznego, współdzielenia stanu, liczby subskrypcji oraz interoperacyjności z istniejącym kodem reaktywnym. Przykładem jest użycie RxJS do obsługi zapytań z debounce i switchMap oraz Signals do zarządzania stanem formularza lub widoku komponentu.
Wersję warsztatową (z konfiguracją i przykładami) znajdziesz w programie szkolenia: Zaawansowane tworzenie aplikacji z użyciem Angular.

Optymalizacja wydajności w Angular obejmuje kontrolę mechanizmu change detection, ograniczanie zbędnych renderów oraz właściwe ładowanie zasobów i funkcji aplikacji. Trzeba sprawdzić strategię detekcji zmian, sposób użycia lazy loading, wpływ sygnałów lub obserwowalnych strumieni na widok oraz zasadność wdrożenia SSR, prerenderingu albo hydration. Przykładem jest połączenie OnPush, leniwego ładowania komponentów i selektywnego pobierania danych dla tras o największym ruchu.
Dokładnie ten zestaw narzędzi i workflow ćwiczymy podczas szkolenia: Zaawansowane tworzenie aplikacji z użyciem Angular.

Testowanie aplikacji Angular obejmuje testy jednostkowe komponentów, usług i dyrektyw, a także testy integracyjne oraz scenariusze end-to-end. Należy sprawdzić konfigurację TestBed, sposób mockowania zależności, obsługę asynchroniczności oraz to, czy testy obejmują routing, formularze i komunikację z API. Przykładem jest test komponentu formularza z walidacją reaktywną, mockowanym serwisem HTTP i weryfikacją komunikatów błędów po zmianie stanu.
Ten temat przerabiamy praktycznie na szkoleniu: Tworzenie aplikacji z użyciem Angular.