Szkolenie Angular
Poziom
PodstawowyCzas
40h / 5 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie Angular
Szkolenie Angular to praktyczny program dla programistów, którzy znają podstawy Angulara, JavaScriptu i TypeScriptu oraz chcą budować większe aplikacje SPA w sposób wydajny, testowalny i łatwy w utrzymaniu. Program obejmuje strukturę aplikacji, komponenty, serwisy, dyrektywy, routing, lazy loading, change detection, RxJS, testowanie, aktualizacje wersji Angulara, zarządzanie uprawnieniami, state management, formularze reaktywne, biblioteki komponentów oraz organizację dużych projektów z Nx. Uczestnicy uczą się podejmować decyzje architektoniczne w aplikacjach Angular, ograniczać złożoność kodu, poprawiać wydajność, zarządzać stanem i komunikacją między modułami oraz przygotowywać aplikacje do dalszego rozwoju w środowisku zespołowym.
Dla kogo jest to szkolenie?
Dla programistów posiadających praktyczną znajomość JavaScriptu, TypeScriptu i podstaw Angulara, którzy chcą rozwijać kompetencje związane z tworzeniem zaawansowanych aplikacji internetowych działających po stronie przeglądarki-
Dla programistów front-end lub full-stack, którzy pracują z aplikacjami Angular i chcą uporządkować architekturę, routing, RxJS, formularze, testowanie, wydajność oraz zarządzanie stanem
-
Dla zespołów utrzymujących większe aplikacje Angular, które chcą poprawić strukturę projektu, jakość kodu, proces aktualizacji i organizację pracy w monorepo
Czego nauczysz się na szkoleniu?
- Zaprojektujesz czytelną strukturę aplikacji Angular z logicznym podziałem komponentów, serwisów, dyrektyw, modułów, bibliotek i lazy loadingu
- Zastosujesz dobre praktyki projektowania komponentów, przepływu danych, routing guards, resolverów, formularzy reaktywnych i komunikacji w aplikacji SPA
- Przeanalizujesz wydajność aplikacji Angular, w tym bundle size, Angular budgets, change detection, cykl życia komponentów i strategie ograniczania zbędnych renderów
- Uporządkujesz pracę z RxJS, subskrypcjami, Subjectami, async pipe, cache’owaniem danych oraz typowymi źródłami memory leaks
- Przygotujesz testy komponentów i serwisów, dobierzesz zakres testów jednostkowych oraz wykorzystasz mockowanie i narzędzia wspierające testowanie Angulara
- Zaplanujesz rozwój dużej aplikacji Angular z użyciem state management, NgRx, biblioteki komponentów, Storybooka, Nx, grafu zależności i różnicowego budowania
Program szkolenia
Dzień 1
Dobra struktura aplikacji
- Logiczny podział modułów, standalone components, komponentów oraz efektywny lazy loading
- Dobre praktyki projektowania komponentów: input/output, konfiguracja, content projection i ng-content
- Granice odpowiedzialności komponentów, serwisów i dyrektyw
Kompozycja w dużym projekcie
- Specjalizacja i generalizacja komponentów
- Popularne błędy kompozycji, nadmiernej abstrakcji i współdzielenia logiki
- TypeScript path aliases i organizacja importów
Dzień 2
Wielkość aplikacji
- Analiza webpack-bundle i rozmiaru zasobów aplikacji
- Angular budgets i kontrola limitów wydajnościowych
- Polyfille, wsparcie wielu przeglądarek i strategia zgodności aplikacji
Angular change detection a wydajność aplikacji
- Drzewo detekcji zmian i model aktualizacji widoku
- Cykl życia komponentów i serwisów
- Strategie aktualizacji komponentów i ręczne zarządzanie detekcją zmian
- Gettery, computed values i funkcje w template’ach a change detection
- Wpływ change detection na wydajność aplikacji
- One way data binding i two way data binding
Dzień 3
Popularne pułapki rxjs
- Hot observables i cold observables
- Synchroniczność, asynchroniczność i mechanika Subjectów
- Zarządzanie subskrypcjami RxJS
- Popularne memory leaks w aplikacjach Angular
- Cache’owanie danych przez RxJS
- Async pipe w Angular
Testowanie aplikacji Angular
- Testowanie komponentów
- Testowanie serwisów
- Mockowanie zależności
- Testy jednostkowe, testy komponentów i kryteria doboru zakresu testów
- TestBed i Spectator
Dzień 4
Update wersji Angular
- Migracja na wyższe wersje Angulara
- Angular Schematics i migracje automatyczne
Zarządzanie nawigacją aplikacji a uprawnienia
- Blokady nawigacji oraz ładowania zasobów na podstawie uprawnień w router guards
- Guards i Resolvers
- Dynamiczna konfiguracja router guards
State management w Angular na przykładzie Ngrx
- State management w aplikacjach SPA i rozwiązywane problemy
- Redux pattern
- Kryteria zastosowania state management
- Komunikacja na wysokim i niskim poziomie w aplikacji
- Cache’owanie danych w state
- Tooling i narzędzia do debugowania
Dzień 5
Reactive forms
- Template Driven Forms i Reactive Forms oraz kryteria doboru podejścia
- Bindowanie danych z kontrolkami reaktywnymi w Reactive Forms
- Integracja ng-model z Reactive Forms
- Subskrypcje zmian wartości w formularzach reaktywnych
Biblioteka komponentów
- Własna biblioteka komponentów
- Dokumentacja komponentów: Storybook
Zarządzanie dużym projektem z nx (nrwl/nx)
- Problemy rozwiązywane przez Nx
- Kryteria wprowadzenia Nx do projektu
- Zarządzanie zależnościami przez tagi
