X

Vitajte!

Nepremeškajte nové videá a zaujimavé novinky zo sveta Angularu 2+...

00:17 - 00:17Vitajte
00:18 - 00:22V tomto videu si povieme a ukážeme teoretické základy dôležitej témy
00:23 - 00:27Tou bude reaktívne programovanie s použitím RxJS a Observables
00:28 - 00:31Je to rozsiahlejšia téma ktorá je nad rámec tohoto kurzu
00:32 - 00:34v tomto videu si ukážeme len nutný základ
00:35 - 00:37Ak sa chcete dozvedieť viac
00:37 - 00:38navštívte stránku
00:39 - 00:41ReactiveX.io
00:42 - 00:43Čo sú to Observables?
00:45 - 00:50Angular prináša mnoho nových konceptov ktoré nám majú pomôcť vylepšiť naše Javascriptové aplikácie.
00:51 - 00:55Observables nám pomáhajú spravovať asynchrónne dáta a streamy dát
00:56 - 00:57Stream dát môže byť čokoľvek
00:58 - 01:01od jednoduchého čisla, cez viaceré hodnoty naraz
01:01 - 01:05v podobe objektov či obyčajný text zadaný do textového poľa
01:06 - 01:08Observables sú podobné Promisom
01:08 - 01:10ale s pár kľúčovými rozdielmi
01:10 - 01:15Za prvé Observables umožňujú vysielať viaceré hodnoty v priebehu času
01:16 - 01:18Ak ich porovnáme s promismi
01:18 - 01:23tak promise sa vždy zavolá len raz a buď vráti hodnotu alebo error
01:24 - 01:27Toto je fajn pokiaľ zrazu nemáte množstvo dát v priebehu času
01:27 - 01:30A v takomto prípade prichádzajú na scénu Observables
01:30 - 01:32ktoré v tomto excelujú
01:32 - 01:34Celý Angular rozsiahlo používa Observables
01:35 - 01:39napríklad nový HTTP service a EventEmitter je celý založený na nich
01:40 - 01:43Observables sa podobajú poliam
01:43 - 01:47Každá hodnota v pribehu času je ako jedna hodnota v poli
01:48 - 01:51A na tieto hodnoty môžeme použiť metódy aké používajú polia
01:52 - 01:56napríklad map, flatmap, reduce a podobne
01:57 - 02:00Tým, že Observables ešte nie sú štandardom
02:00 - 02:03v Angulari sa používa RxJS
02:03 - 02:05čo je polyfill/utility knižnica
02:06 - 02:08ktorá nám poskytne podporu Observables
02:08 - 02:09kým sa z neho stane štandard
02:10 - 02:11Jadro Angularu 2+
02:11 - 02:14používa zredukovanú verziu Observables
02:14 - 02:17Táto zredukovaná verzia neposkytuje toľko užitočných operátorov
02:18 - 02:20ktoré robia RxJS tak produktívne
02:20 - 02:24Je to hlavne preto aby základná knižnica ostala malá
02:24 - 02:27Ak chcete použiť tieto extra operátory v Angulari
02:27 - 02:29musíme si ich importovať
02:30 - 02:31napríklad takto:
02:35 - 02:37Poďme si ukázať ako vyzerá Observable
02:37 - 02:39v jeho základnej forme
02:39 - 02:44Vytvoríme si Observable ktorá bude notifikovať naviazaný Observer
02:44 - 02:46vždy keď sa udeje nejaká udalosť
02:55 - 02:57Poďme si vytvoriť novú Angular aplikáciu
02:57 - 02:59Použime príkaz NG NEW
03:11 - 03:13a spustíme ju pomocou príkazu NG SERVE
03:57 - 04:00Predtým ako začneme si musíme importnúť Observable
04:01 - 04:02a Observer
04:02 - 04:05Observable vložíme cez import
04:06 - 04:09'rxjs/Observable'
04:10 - 04:12a podobným štýlom aj Observer
04:14 - 04:16Observable
04:16 - 04:19objekt reprezentuje objekt ktorý posiela notifikácie
04:20 - 04:23a Observer je objekt reprezentuje triedu ktorá ich prijíma
04:25 - 04:28Teraz si v našom komponente zadeklarujeme premennú
04:29 - 04:30observable
04:31 - 04:32typu Observable
04:33 - 04:34ktorá bude prijímať stringy
04:35 - 04:36a premennú Observer
04:36 - 04:39typu Observer ktorá bude prijímať tiež string
04:42 - 04:44Teraz si vytvoríme jednotlivé funkcie
04:45 - 04:48pre všetky callbacky ktoré má Observable
04:48 - 04:50Začneme funkciou handleComplete
04:51 - 04:52ktorá sa spustí
04:53 - 04:56na konci prijímania dát cez Observable
04:58 - 04:59Tiež si vytvoríme funkciu
05:00 - 05:00handleError
05:01 - 05:02ktorá sa spustí
05:02 - 05:04v prípade, že nastane nejaká chyba
05:20 - 05:22Teraz si vytvorme funkciu handleData
05:23 - 05:24ktorá zobrazí
05:24 - 05:26všetky prijímané dáta
05:26 - 05:28ktoré pretečú cez Observable
05:46 - 05:48Do našeho komponentu si implementujeme
05:49 - 05:50ngOnInit
06:02 - 06:04A v ňom vytvorme Observable
06:05 - 06:07s priradeným Observerom
06:40 - 06:44Aby sme vedeli čo sa s našimi dátami v Observable deje
06:45 - 06:46musíme sa k nemu subscribnuť
06:47 - 06:50Použijeme na to naše 3 funkcie pre callbacky
06:50 - 06:53handleData, handleError a handleComplete
07:25 - 07:27Teraz našu Observable
07:27 - 07:28naplníme dátami
07:29 - 07:31použijeme na to funkciu "next()"
07:31 - 07:32Observera
07:33 - 07:35Odošleme hodnoty 1,2,3
07:35 - 07:37potom ukončíme prijímanie dát
07:37 - 07:40a odošleme ešte ďalšiu hodnotu
07:41 - 07:414
07:46 - 07:47a pozrieme si výstup
07:48 - 07:49v konzole
07:50 - 07:51ako vidíte
07:51 - 07:54poz avolaní funkcie observer.complete()
07:54 - 07:55sa už ďalšie dáta
07:55 - 07:56neprenášajú
08:06 - 08:07Ukážme si iný príklad
08:08 - 08:09Vytvorme si textové pole
08:10 - 08:11ktoré pri akejkoľvek zmene
08:12 - 08:14vytvorí HTTP request na server
08:14 - 08:16pomocou RxJSa Observables
08:16 - 08:18Budeme elegantne manipulovať
08:18 - 08:20s týmto dátovým streamom
08:20 - 08:21ktorý vytvára užívateľ
08:22 - 08:23písaním textu do tohto políčka
08:28 - 08:31Použijeme na to novú Angular aplikáciu
08:53 - 08:57Do nášho hlavného modulu si importnime HTTP modul
08:57 - 08:58Budeme ho potrebovať
09:24 - 09:30A pomocou príkazu NG GENERATE si vytvorme service s názvom MyHTTP
09:31 - 09:34ktorý bude komunikovať s našim externým API
09:38 - 09:42Do našeho servisu si importnime HTTP a Observable
10:10 - 10:13Cez konštruktor si načítame HTTP modul
10:24 - 10:26vytvorme funkciu loadSomething()
10:27 - 10:29ktorá bude mať ako parameter text
10:29 - 10:31a vracať bude Observable
10:32 - 10:33typu string
11:03 - 11:06Vo vnútri tejto funkcie vytvoríme HTTP request
11:07 - 11:11na stránku http://echo.jsontest.com/text
11:11 - 11:12čo je imaginárny
11:13 - 11:18API endpoint ktorý nami zadaný text xobrazí v JSONe
11:19 - 11:21Pomocou metódy Map si response
11:22 - 11:23prekonvertujeme na JSON
11:46 - 11:49Do našeho hlavného komponentu si načítame náš
11:50 - 11:51HTTP service
11:51 - 11:54a pár RxJSoperátorov ktoré si ukážeme
13:20 - 13:22Pomocou ElementRef
13:22 - 13:24si vytvoríme Observable
13:24 - 13:28z globálneho eventu KEYUP teda pri stlačení
13:28 - 13:31a uvoľnení tlačidla na klávesnici
13:31 - 13:34Subscribneme sa k tomuto Observable
13:34 - 13:36a výstup vypíšeme do konzoly
14:34 - 14:38A samozrejme nesmieme zabudnúť pridať náš HTTP service do providerov
14:38 - 14:40inak dostaneme takýto error
14:51 - 14:53V našej konzole zatiaľ nie je výstup
14:53 - 14:56a preto si implementujeme metódu ngOnInit
15:00 - 15:04v nej zavoláme našu metódu handleInputFieldData()
15:04 - 15:06ktorá vráti Observable z eventu
15:15 - 15:19V našej konzole už vidíme keyword event s rôznymi údajmi
15:19 - 15:21nás ale zaujíma
15:21 - 15:22aktuálne stlačená klávesa
15:23 - 15:25tú si vieme prebrať z objektu $event
15:26 - 15:28konkrétne e.target.value
15:29 - 15:30a pomocou metódy Map
15:31 - 15:33si ho nastavíme ako hodnotu
15:33 - 15:35pre našu Observable
15:39 - 15:42Takto vyzerá náš stream dát v čase
15:54 - 15:56Teraz pri každom stlačení klávesu
15:56 - 15:57sa vyvolá event
15:58 - 16:00Ukážeme si funkciu debounceTime()
16:01 - 16:04ktorá stlačenie kláves oddiali o delay
16:04 - 16:06Pridajme si ho do nášho Observable
16:08 - 16:11Ako vidíte aj pri mnohonásobnom stlačení kláves
16:12 - 16:14sa dáta zo streamu odošlú
16:14 - 16:16v skupine oddialené o 1 sekundu
16:24 - 16:28Poďme si ukázať metódu distinctUntilChanged()
16:28 - 16:29ktorá robí to
16:29 - 16:32že dáta sa do streamu pridajú len vtedy
16:33 - 16:35ak sú odlišné ako predchádzajúce
16:35 - 16:38takže napríklad mnohonásobné stlačenie ENTERu nič nespôsobí
16:39 - 16:44bez distinctUntilChanged sa pri stlačení ENTERu sa odošlú dáta do streamu, vždy
16:52 - 16:53Teraz si ukážeme
16:53 - 16:55ako v Observable
16:55 - 16:56zavolať náš servis
16:57 - 16:59ktorý urobí HTTP request
16:59 - 17:00pri každom stlačení
17:00 - 17:03na náš imaginárny API endpoint
17:04 - 17:06Použijeme na to metódu flatMap
17:18 - 17:20Ako vidíte pri každom stlačení
17:21 - 17:23sa odosiela HTTP request na naše API
17:24 - 17:27V reálnom živote by to ale mohol byť problém
17:27 - 17:29odosielať na náš server toľko requestov
17:29 - 17:31ktoré na seba nečakajú
17:32 - 17:34a niektoré by mohli byť vykonané skôr ako ostatné
17:34 - 17:36ale dá sa to celkom elegantne vyriešiť
17:37 - 17:38pomocou metódy switchMap
17:39 - 17:41ktorá všetky nedokončené
17:41 - 17:44requesty zruší a vykoná len ten posledný
17:45 - 17:48Vidíte? V prípade, že píšete pomaly
17:48 - 17:50tak jednotlivé requesty sa vykonávajú po jednom
17:51 - 17:54ale akonáhle napíšte veľa kláves za sebou
17:54 - 17:56a niektoré requesty sa nestihli spracovať
17:56 - 17:58tak Observable ich zruší
17:59 - 18:00a nechá vykonať len posledný
18:01 - 18:02Krásne a elegantné
18:11 - 18:13Aby naša ukážka bola kompletná
18:14 - 18:16poďme si prerobiť našu Observable
18:16 - 18:20aby nebrala event z globáleneho KEYUP
18:20 - 18:23ale aby odchytávala našu vlastnú akciu
18:24 - 18:27K Observable si naimportujme Subject
18:29 - 18:32Jeden zo spôsobov ako to spraviť je použitie Subjectu
18:32 - 18:34ktorý sa správa ako Observable
18:35 - 18:36a zároveň aj ako Observer
18:36 - 18:39Teda nám ho stačí len naplniť dátami
18:39 - 18:41a subscribnúť sa k nemu
18:56 - 18:58Vytvorme si funkciu onChange
18:58 - 19:02ktorá priradí našemu Subjectu cez funckiu NEXT hodnotu
19:03 - 19:05a riadok Observable.fromEvent
19:06 - 19:10zmeňme na this.inputChange.asObservable()
19:23 - 19:25A našemu inputu už len pridáme
19:25 - 19:27event KEYUP s metódou onChange
19:28 - 19:31a ako hodnotu použijeme $event.target.value
19:31 - 19:34teda stlačená klávesa sa prenesie do našeho Subjectu
19:45 - 19:46Ako vidíte dostali sme error
19:46 - 19:48to preto, že v metóde Map
19:49 - 19:52sa snažíme spravi't niečo čo aktuálne nie je možné a preto ho vymažeme
19:56 - 20:00a ďalšiu TypeScriptovú chybu opravíme tak, že
20:00 - 20:04že v metóde switchMap premennej textInput nastavíme typ string
20:06 - 20:09A ako vidíte všetko funguje ako predtým
20:09 - 20:11s jediným rozdielom, že dáta
20:11 - 20:12do našej Observable
20:13 - 20:15posielame cez našu vlastnú funkciu
20:15 - 20:16v evente KEYUP
20:16 - 20:18ktorý má nastavený konkrétny element
20:25 - 20:27V tejto časti sme si ukázali základy
20:28 - 20:30RxJS a Observables
20:30 - 20:32ukázali základnú štruktúru
20:32 - 20:33a callbacky
20:33 - 20:34aké má Observable
20:35 - 20:36tiež sme si ukázali niektoré
20:36 - 20:39metódy ktoré robia RxJS tak flexibilným
20:40 - 20:43samozrejme týchto operátorov a metód je oveľa viac
20:43 - 20:46a možnosti RxJS a reaktívneho programovania
20:46 - 20:47sú skoro neobmedzené
20:49 - 20:51Ak vás reaktívne programovanie zaujíma viac
20:51 - 20:54choďte na stránku ReactiveX.io
20:55 - 20:56a rozšírte svoje znalosti
20:58 - 21:00Dúfam, že sa Vám dnešné video páčilo
21:00 - 21:01a uvidíme sa nabudúce

RxJS a ObservablesZáklady reaktívneho programovania

V tejto časti si povieme o reaktívnom programovaní s RxJS a Observables. Vytvoríme základný stream a ukážeme si prácu s operátormi ako napr. switchMap, Map, debounceTime či distinctUntilChanged.

Čo sú Observables?

Angular prináša mnoho nových konceptov ktoré nám majú pomôcť vylepšiť naše Javascriptové aplikácie. Observables nám pomáhajú spravovať asynchrónne dáta a streamy dát. Stream dát môže byť čokoľvek, od jednoduchého čisla, cez viaceré hodnoty naraz v podobe objektov či obyčajný text zadaný do textového poľa.

Observables sú podobné Promisom ale s pár kľúčovými rozdielmi. Za prvé Observables umožňujú vysielať viaceré hodnoty v priebehu času.

Ak ich porovnáme s promismi tak promise sa vždy zavolá len raz a buď vráti hodnotu alebo error. Toto je fajn pokiaľ zrazu nemáte množstvo dát v priebehu času. A v takomto prípade prichádzajú na scénu Observables ktoré v tomto excelujú. Celý Angular rozsiahlo používa Observables, napríklad nový HTTP service a EventEmitter je celý založený na nich.

Observables sa podobajú poliam. Každá hodnota v pribehu času je ako jedna hodnota v poli. A na tieto hodnoty môžeme použiť metódy aké používajú polia, napríklad map, flatmap, reduce atď.

Tým, že Observables ešte nie sú štandardom v Angulari sa používa RxJS čo je polyfill/utility knižnica ktorá nám poskytne podporu Observables kým sa z neho stane štandard.

Jadro Angularu 2+ používa zredukovanú verziu Observables. Táto zredukovaná verzia neposkytuje toľko užitočných operátorov ktoré robia RxJS tak produktívne. Je to hlavne preto aby základná knižnica ostala malá.

Ak chcete použiť tieto extra operátory v Angulari musíte si ich importovať, napríklad takto:



        import ‘rxjs/add/operator/map’;
        

V tejto časti si ukážeme pár užitočných operátorov ktoré uľahčia prácu s HTTP requestami, budú to:

distinctUntilChanged

Tento operátor povolí emitovať len také hodnoty ktoré nasledujú po sebe a sú odlišné. Napríklad ak sa budeme snažiť odoslať viac krát za sebou rovnakú hodnotu, distinctUntilChanged to zastaví a počká si na nové dáta ktoré sú odlišné od predchádzajúcich. Ideálne v prípadoch kedy robíme napríklad HTTP requesty ktoré by nám vrátili rovnaké dáta, distinctUntilChanged by takéto zbytočné requesty zastavilo.

switchMap

Tento operátor už podľa názvu zamieňa hodnoty, v praxi si to ukážeme na príklade kde budeme robiť pomocou switchMap HTTP requesty a každý ktorý nestihne dobehnúť switchMap zruší.

debounceTime

Tento operátor ruší emitované hodnoty ktoré sú menšie ako špecifikovaný čas medzi výstupom. Je populárny v prípadoch keď chceme vyrobiť napríklad type-ahead user interface kde užívateľský vstup musí byť kontrolovaný.

Ak Vás reaktívne programovanie zaujíma viac, navštívte stránku ReactiveX.io



Stiahnite si súbory tohoto kurzu
    
#potrebujete node.js a globálne nainštalovaný @angular/cli

#projekt Observables 1
git clone https://github.com/streamer/angular_sk_kurz.git
cd angular_sk_kurz/7/myapp
npm install
ng serve

#projekt Observables 2
git clone https://github.com/streamer/angular_sk_kurz.git
cd angular_sk_kurz/8/myapp
npm install
ng serve
    


Diskusia