#247

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

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

W trosce o jakość warsztatów jesteśmy zmuszeni ograniczyć liczbę uczestników. **Kwalifikacja odbywa się na podstawie odpowiedzi udzielonych w formularzu zgłoszeniowym oraz - w dalszym kroku - kolejności zgłoszeń.** Potwierdzenie udziału w warsztatach wraz z instrukcją przygotowania środowiska otrzymasz najpóźniej na 7 dni przed planowaną datą wydarzenia.

Zapisy na wybrany warsztat zostały zakończone.