#225

Full Stack JavaScript – Reaktywne Programowanie z RxJS

Przedstawiamy kolejny warsztat z serii Full Stack JavaScript( po pierwszej części, którą był Full Stack JavaScript – Nowoczesny backend W Node.JS I TypeScript.), w którym zapoznamy się z biblioteką RxJS oraz reaktywnym programowaniem w JavaScript.
RxJS to biblioteka wspierająca reaktywne programowanie przy użyciu Observables, pozwala na łatwiejsze programowanie operacji asynchronicznych opartych o promisy, czy funkcje zwrotne (callbacks).
RxJS to odpowiednik Lodash, jednakże skierowany do obsługi eventów.

W ostatnim czasie sporo mówi się o reaktywnym programowaniu, a sama biblioteka jest wykorzystywana jako dependency w takich projektach jak Angular (po stronie przeglądarki), czy NestJS (po stronie serwera).

Najtrudniejszy aspekt programowania reaktywnego, to zacząć myśleć reaktywnie!

Aby nauczyć się myśleć reaktywnie z RxJS, najpierw musimy poznać i zrozumieć jego podstawy, w jaki sposób działają streamy, jak je tworzyć, łączyć, a także zmieniać przesyłane w nich wartości poprzez operatory.

Ucząc się wbudowanych operatorów na przykładach, przestawimy nasze myślenie tak, żeby pozbyć się imperatywnych nawyków pisania kodu. Zamienić architekturę stateful na architekturę reaktywną opartą o strumienie.

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 zapewniamy dostęp do kawy, herbaty, wody oraz ciastek. W porze obiadowej zapewniamy pizzę w wersji mięsnej lub wegetariańskiej.

Żarówka

Czego się nauczysz?

Poznasz podstawowe elementy RxJS, takie jak Observable, Observer, operator, subscription - pisząc je od podstaw samemu.
Na praktycznych przykładach będziesz się uczył wbudowanych operatorów, dzięki czemu szybciej je zrozumiesz i lepiej zapamiętasz ich zastosowanie.
Dzięki przygotowanym ćwiczeniom zobaczysz jakie korzyści płyną z pisania kodu reaktywnego i unikania przechowywania samemu stanu aplikacji.
Nauczysz się wykorzystywania RxJS po stronie przeglądarki oraz serwera.
Grupa

Dla kogo jest ten warsztat?

Warsztat jest przeznaczony dla programistów ze znajomością JavaScript/ES2015 w zakresie podstawowym. Udział w pierwszej części serii nie jest obowiązkowy, pod warunkiem znajomości zagadnień, które będą używane, ale nie omawiane na warsztacie:
- konstrukcje warunkowe,
- pętle,
- operatory logiczne,
- var, const, let,
- funkcja,
- klasa,
- ES Modules (import/export)
- arrow function
- Promise
- callback
Notatnik

Wymagania wstępne

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

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. Podstawy RxJS.
    1. Podstawy działania strumieni
      1. Observable
      2. Observer
      3. Subscription
      4. Callback vs Promise vs Observable
    2. Tworzenie strumieni
      1. Własny strumień: Observable.create()
      2. Wbudowane kreatory strumieni: of, from, fromEvent, timer…
    3. Jak działają operatory
      1. Użycie metody pipe()
      2. Podstawowe operatory: map, filter, reduce, switchMap
    4. Observable i Observer w jednym
      1. Subject
      2. Behavior Subject
      3. Replay Subject
    5. MultiCasting
      1. Cold i Hot Observable
      2. Operatory publish, share, multicast
  2. Praktyczne zastosowanie operatorów.
    1. debounceTime
    2. throttleTime
    3. combineLatest
    4. retry
    5. merge
    6. delay
    7. bufferTime
    8. switchMap
    9. takeUntil

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.