#238

Full Stack JavaScript – RxJS – podstawy reaktywnego programowania

Przedstawiamy kolejny warsztat z serii Full Stack JavaScript, 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. Rozwiązuje problemy, które mamy w Promisach czy funkcjach zwrotnych (callbacks).

RxJS to odpowiednik Lodash, jednakże przeznaczony do obsługi strumieni zdarzeń (event streams).

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 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 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
      • Observable
      • Observer
      • Subscription
      • Callback vs Promise vs Observable
    2. Tworzenie strumieni
      • Własny strumień: Observable.create()
      • Wbudowane kreatory strumieni: of, from, fromEvent, timer…
    3. Jak działają operatory
      • Użycie metody pipe()
      • Podstawowe operatory: map, filter, reduce, switchMap
    4. Observable i Observer w jednym
      • Subject
      • Behavior Subject
      • Replay Subject
    5. MultiCasting
      • Cold i Hot Observable
      • 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.