Szkolenie Reactive Angular 

Zapraszamy na 3-dniowe intensywne warsztaty szkoleniowe z Reactive Angular

Reaktywny Angular to połączenie najlepszych elementów ze świata Angulara oraz Reduxa (znanego z Reacta) i RxJS.

Termin functional reactive programming (FRP) coraz częściej słychać w świecie JavaScriptu. Jego założenia opierają się o deklaratywny, a nie imperatywny kod. Na tym paradygmacie opierają się właśnie Reactive Extensions i RxJS.

Aplikacje reaktywne implementowane są poprzez łączenie strumieni: oznacza to znacznie mniej zmiennych określających stan aplikacji. W efekcie, oprócz czystej architektury, zmniejszamy liczbę potencjalnych błędów w aplikacji.

Reaktywny Angular to połączenie najlepszych elementów ze świata Angulara oraz Reduxa (znanego z Reacta) i RxJS.

Pozwala w łatwy sposób budować aplikacje, które są wygodne w utrzymaniu gdzie stan i logika są oddzielone od widoku, natomiast zmiany stanu są automatycznie propagowane do interfejsu użytkownika.

Konsekwencją takiego podejścia jest czytelniejszy kod oraz odseparowanie komunikacji z backendem (szczególnie w momencie kiedy dane pochodzą z różnych źródeł – np. REST API lub websockets) od całości kodu UI.

Na warsztatach zaimplementujemy aplikację typu “Trello”, w której wykorzystamy poznane techniki. Wykorzystamy też funkcję undo/redo i nauczymy się debuggować aplikację korzystając z Time Traveling Debugger – mechanizmu Reduxa znanego programistom Reacta. Znaczną część czasu poświęcimy na zaprojektowanie i omówienie najlepszych rozwiązań architektury aplikacji.

Kod na szkoleniu będzie poparty testami. Wykorzystamy framework Jasmine wraz z omówieniem najlepszych praktyk w pisaniu dobrze testowalnego kodu (m. in. jak wydzielić moduły, by nie miały zależności).

Dla kogo?

Warsztaty są skierowane do osób mających minimalne podstawy w Angularze 2+, m. in.:

  • Tworzenie komponentów
  • Przepływ danych pomiędzy komponentami (inputs / outputs / services)
  • Umiejętność tworzenia zapytań http
  • Umiejętność zaimplementowania formularza
  • Podstawowa znajomość routingu

Dla osób nie znających Angulara, wprowadzamy dodatkowy “dzień 0” (patrz “Agenda, punkt 0”).

Agenda

0. Wstęp do Angulara, dla osób, które nie mają w nim doświadczenia (opcjonalnie)

Opcjonalny cały dzień szkoleniowy dla osób, podczas którego wejdziemy w świat Angulara (2+), zanim skoncentrujemy się na reaktywności.

Przygotowanie środowiska pod warsztaty

  • przygotowanie szkieletu aplikacji z wykorzystaniem podstawowych elementów Angulara: moduły, komponenty, serwisy, dyrektywy, routing, formularze, http, itp.
  • wprowadzenie oraz omówienie Angular CLI

Wprowadzenie do Reactive Extensions (RxJS)

  • czym są streamy i jak się mają do observables?
  • jakie korzyści dają w porównaniu do callbacków i promise’ów
  • tworzenie własnego strumienia – Subject vs Observable
  • hot i cold observables
  • podstawowe operatory: map, filter, mergeMap, take, scan, catchError…

Budowanie aplikacji Angularowych z użyciem NgRx

  • architektura i koncepcja przepływu danych w aplikacji
  • deklaratywne zarządzanie stanem w aplikacji – zalety i wady
  • integracja NgRx do stworzonej aplikacji
  • wykorzystanie devtools (Redux Devtools)

 Obsługa akcji użytkownika – action creators

  • Tworzenie funkcyjnych lub obiektowych action creators
  • Redukcja duplikacji kodu przy pomocy generycznych kreatorów (np. odpytywanie API, sukces, błąd)

Dzielenie stanu i przekazywanie informacji ze store’a do komponentów

  • Skalowanie aplikacji – łączenie reducerów (rozbijanie stanu aplikacji / struktura folderów)
  • Reselect – rozwiązanie problemów selektorów w wielu miejscach aplikacji
  • Przekazywanie danych do widoku
  • Co przechowywać w store a czego nie?

Reaktywne formularze

  • Dlaczego reaktywne formularze – czyli jak wpiąć streamy do formularzy?
  • Budowanie formularzy
  • Walidacja formularzy
  • Pobieranie eventów z formularzy jako streamy
  • Integracja walidacji backendowej w czasie rzeczywistym (asynchroniczne walidatory, debouncing i throttling)
  • Lokalny stan komponentu vs globalny – co przechowywać w store a co w komponencie?

Side effects – @ngrx/effects

  • Jak dobrze implementować komunikację aplikacji “ze światem zewnętrznym”
  • przechwytywanie akcji – jak wywołać zapytanie do API za pomocą akcji
  • połączenie z routerem – @ngrx/router-store – powiadomienie store’a o zmianie ścieżki
  •  połączenie z serwisami i asynchroniczność (http, websockety)
  •  autoryzacja z użyciem JWT (JSON Web Tokens)

Testowanie:

  • Wstęp do testów przy pomocy Jasmine
  • akcje, action creators
  • reducery
  • dispatchowanie akcji z komponentów

Dodatkowe tematy:

  • @ngrx/db – reaktywna baza danych po stronie klienta oparta o IndexedDB
  • synchronizacja stanu aplikacji z local storage

 

100% praktyki

Podczas warsztatów pod okiem trenera uczestnicy od podstaw stworzą klon popularnego narzędzia Trello, poznając omawiane narzędzia oraz techniki implementacji w Angularze w sposób reaktywny.

Oprócz aspektów związanych z implementacją, przejdziemy samodzielnie przez przygotowanie środowiska developerskiego, przygotowanie aplikacji do wypuszczenia na produkcję, testowanie oraz deployment.

Aplikację stworzymy w sposób kompletny, aby zawierała:

  • połączenie z serwerem REST
  • połączenie z serwerem poprzez WebSocket (“live updates”)
  • autoryzację i autentykację
  • zapis danych użytkownika lokalnie

 

Informacje praktyczne

Kiedy?
Warsztaty wewnętrzne: termin do indywidualnego ustalenia z Waszym zespołem

Gdzie?
Dowolne miasto w Polsce

Uczestnicy
Od 4 do 12 osób

Kontakt i zapytania ofertowe
Piotr Zwoliński, CEO
[email protected]
Tel: + 48 784 811 497

Pobierz agendę tego szkolenia w formacie PDF:
agenda_szkolenia_developers_peak.pdf

Zainteresowany szkoleniem?
Piotr Zwoliński, CEO
[email protected], tel: + 48 784 811 497