#306

Full Stack JavaScript – NGRX – Reaktywne aplikacje webowe

Przedstawiamy trzeci warsztat z serii Full Stack JavaScript, w którym nauczymy się reaktywnie zarządzać stanem aplikacji webowej.
Poznamy bibliotekę NGRX, która jest Angularową implementacją architektury Flux.

Flux opiera się o wzorzec projektowy CQRS (Command Query Responsibility Segregation), czyli w wolnym tłumaczeniu, rozdzielenie zapytań od rozkazów. Rozdziela on od siebie fragmenty kodu odpowiedzialne za pobieranie informacji od tych odpowiedzialnych za ich modyfikację.

RxJS to biblioteka wspierająca reaktywne programowanie przy użyciu Observables, pozwala na łatwiejsze programowanie operacji asynchronicznych. Rozwiązuje problemy, które mamy w Promisach czy funkcjach zwrotnych (callbacks). Jest to odpowiednik Lodash, lecz przeznaczony do obsługi strumieni zdarzeń (event streams).

Redux jest jedną z popularniejszych bibliotek, która implementacje architekturę Flux, dodaje ona nieco programowania funkcyjnego i korzysta ze wzorca Event Sourcing.

Można powiedzieć że NGRX jest to Redux na sterydach, który dodaje jeszcze reaktywne programowanie w RxJS, daje nam to reaktywny Store dla naszej aplikacji.

Całość będzie uruchamiana w środowisku Angular i pisana w TypeScript, dzięki czemu wykorzystamy możliwości współczesnej technologi webowej w stu procentach.

Dlaczego JavaScript?

JavaScript pojawił się ponad 20 lat temu jako język skryptowy w przeglądarkach internetowych, czyli po stronie klienta. Później zawitał też po stronie serwera jako Node.js, a dalszy jego rozwój pozwala nam dziś budować aplikacje mobilne, desktopowe, programować bazy danych, a nawet roboty.

Czy wiedziałeś, że najbardziej popularne IDE dla web developerów Visual Studio Code jest napisane w TypeScript HTML i CSS ?

Idea “Full Stack JavaScript” opiera się na wykorzystaniu technologii webowych, HTML, CSS i JavaScript we wszystkich etapach budowy aplikacji:
– Strony internetowe (Czysty HTML+CSS+JavaScript, Angular, React, Vue)
– Aplikacje mobilne (Cordova, Capacitor, Ionic, NativeScript)
– Aplikacje desktopowe (Electron)
– Serwer (Node.js, Express, NestJS, Fastify)
– Bazy danych (MongoDB Shell)
– IoT (Cylon.js, Johnny-five)

Podczas warsztatu uczestnicy korzystają z własnych komputerów.

Podczas warsztatu zapewniamy dostęp do kawy, herbaty, wody oraz ciastek. W porze obiadowej zapewniamy pizzę w wersji mięsnej lub wegatariańskiej.

Żarówka

Czego się nauczysz?

Poznasz architekturę Flux na przykładzie implementacji jej aplikacji Angularowej przy użyciu biblioteki @ngrx/store.
Poznasz zalety reaktywnego programowania przy pomocy biblioteki RxJS.
Nauczysz się jak obsługiwać asynchroniczne zdarzenia przy pomocy biblioteki @ngrx/effects.
Poznasz dobre praktyki przy tworzeniu architektury twojej aplikacji opartej o NGRX.
Dzięki przygotowanym ćwiczeniom zobaczysz jakie korzyści płyną z pisania kodu reaktywnego opartego Store.
Zobaczysz w praktyce narzędzie Redux DevTools służące do debugowania aplikacji oparty o NGRX.
Grupa

Dla kogo jest ten warsztat?

Warsztat jest przeznaczony dla programistów ze znajomością JavaScript (ES2015) i TypeScript w zakresie podstawowym.
Znajomość Angulara nie jest wymagana, lecz znajomość takich pojęć jak Web Components czy Dependency Injection zdecydowanie pomoże.
Ten warsztat będzie dla ciebie wartościowy nawet jeśli nie planujesz używać Angulara na co dzień. Poznasz Reduxową implementację architektury Flux, dzięki czemu bardzo łatwo będziesz mógł wdrożyć ją w innych frameworkach takich jak React + React Redux czy Vue.js + Vuex
Polecamy zapisać się na warsztat RxJS - Podstawy reaktywnego programowania na Stacji IT gdzie podstawy zdobyte na temat RxJs bardzo ułatwią przyswojenie wiedzy z warsztatu.

Prowadzący

Piotr Błaszczak:

Full Stack Web Developer od 2007, konsultant i szkoleniowiec. Zaczynał od PHP i MySQL, lecz szybko dostrzegł potęgę JavaScript i NoSQL. Obecnie pisze backend w Node.js z wykorzystaniem Nest, a front w Angular, po obu stronach wykorzystując TypeScript. Miłośnik RxJS oraz programowania reaktywnego.

Poza pracą w IT jest Instruktorem Freedivingu, nurkowania na wstrzymanym oddechu. Balansuje na slackline, skacze na trampolinach, żongluje. Niepytany bez skrępowania zaznaczy, że "morsowałem" ;)

Program warsztatów

  1. Architektura Flux.
    1. Dispatcher
    2. Store
    3. View
  2. RxJS – wprowadzenie
    1. Podstawy działania strumieni
    2. Tworzenie strumieni
    3. Podstawowe operatory
  3. Angular – wprowadzenie
    1. Struktura projektu
    2. Dependency Injection
    3. Components
    4. Pipe „async
  4. NGRX
    1. Akcje
      • Definiowanie akcji jako klasy
      • Definiowanie typów akcji
      • Wysyłanie akcji
    2. Reducer
      • Tworzenie
      • Reducery w modułach
    3. Selektory
      • Proste
      • Łączone
      • Selektory z parametrami
    4. Effects
      • Wykonywanie asynchroniczne zadań
      • Pobieranie danych z serwera
      • Reagowanie na zmiany na store
      • Transformacje strumienia akcji
  5. Narzędzia
    1. Redux DevTools – debugowanie
    2. @ngrx/schematics – generowanie kodu

Uwaga

Liczba miejsc ograniczona! Organizator zastrzega sobie prawo do zmiany lokalizacji wydarzenia oraz jego odwołania w przypadku niezgłoszenia się minimalnej liczby uczestników.

Zapisy na wybrany warsztat zostały zakończone.