Dr. Bilicki Vilmos Szoftverfejlesztés Tanszék AngularRxJS

(1)

UNIVERSITY OF SZEGED Department of Software EngineeringUNIVERSITAS SCIENTIARUM SZEGEDIENSIS

Angular RxJS

Dr. Bilicki Vilmos

Szoftverfejlesztés Tanszék

(2)

Az előző előadás áttekintése

4Reaktív űrlapok

4Sablon alapú űrlapok 4Űrlap validáció

4Dinamikus űrlapok

2019. 03. 12. Webfejlesztés keretrendszerek 2

(3)

Áttekintés

4Aszinkron programozás 4Callback

4Promise 4Generator 4Async/Await 4Observation

(4)

Aszinkron programozás

4Fontos aspektus

■ A felhasználói események aszinkronok

■ Erőforrások elérése a böngészőből és a szerver oldalon aszinkron

■ Időben eltolt futtatás

4JavaScript

■ egyszálas

■ nincs eszköztár a párhuzamos futás kezelésére (pl.: zárolás,…)

(5)

Aszinkronitás

4Futás befejezésig

■ Az adott kódrészlet nem szakítódik meg

■ Addig fut amíg át nem adja a vezérlést (return)

4Esemény hurok

■ A szálak eseményekkel kommunikálnak

egymással

■ Nem férnek hozzá egymás memória területéhez

■ Nincs rá garancia, hogy mennyi idő múlva kapja meg valaki az eseményt

(6)

Példa

(7)

Megoldás

4Callback

■ Hívj fel ha végeztél

4Promise

■ Itt a ketyere megszólal ha végeztem

4Generator

■ Kétirányú kommunikáció

4Async/Await

■ Generator egyszerűsítve

4Obeservable

■ Sorozat

(8)

Aszinkron programozás

4Megoldásmódok

■ Callback

– Egyszerű a szinkron kódhoz közelálló megoldás:

■ Promise, Future

– Egy proxy THEN metódussal

■ Observer

– Rekatív programozás

Webfejlesztés keretrendszerek

(9)

Promise alapokon

(10)

Observable alapokon

(11)

Összefoglalva

(12)

Callback

4Klasszikus módszer az aszinkronitás kezelésére

4Regisztrálunk egy függvényt amit meghívnak ha befejezték a munkát

■ Ez általában anonim függvény

■ A Callback az eseménysorba kerül (valamikor megkapja a szálat)

(13)

Hiba-először

4Error-First Callback

4Mivel problémás a hibakezelés ezért először megnézi van-e hiba

(14)

Callback hell

4Pokol piramisa

4A program állapota a komplexitás miatt átláthatatlan lesz

4A programozó a sorok sorrendjét a végrehajtás sorrendjének veszi

(15)

Callback megoldás

(16)

Promise

4 A Callback problémáit próbálja kezelni

4 Garantálja, hogy a callback-ek mindég ugyanolyan módon determinisztikusan kezelődnek

■ Nem hívhatja meg többször

■ Nem lehet egyszer ilyen egyszer olyan eredménye

■ Egy eredménye lehet

4 Az aszinkron függvény egy Promise objektumot ad vissza

■ Teljesített (fulfilled)

■ Elutasított (rejected)

4 Mivel objektum ezért továbbadható

(17)

Egyszerű Promise

(18)

Promise objektum

4 resolve/then - callback 4 reject/catch – callback 4 resolver

(19)

Promise állapotok

4A Promise objektumon belül van tárolva

■ Pending

■ Fulfilled

■ Rejected

4Miután a pending állapotból kilép az értékei már nem változhatnak

4Ha egy sikertelen műveletet újra akarunk kezdeni az egy új Promise lesz

■ Egy próbálkozása leírója

(20)

Promise

4Állapot átmenetek szabályozottak 4Resolve != Fulfill

■ Egy argumentummal meghívva -> fulfilled

■ Ha egy Promise-t adunk át akkor ezek kapcsolódnak

(21)

Promise belső állapotok

4A state és result belső állapotok, nem férünk hozzá

4Erre használhatjuk ezeket a metódusokat:

■ .then

■ .catch

■ .finally

(22)

Promise láncolás

(23)

Promise láncolás

4Minden then hívás egy újabb promise-t ad vissza

(24)

Több .then egy Promise-hoz

(25)

Végrehajtási sorrend

4Resolver – szinkron

4Then/catch - aszinkron

(26)

Promise visszaadása

(27)

.then

(28)

Promise API

4Promise

4promise.then 4promise.catch 4Promise.resolve 4Promise.reject 4Promise.all

4Promise.race

(29)

async/await

4Speciális szintaxis, Promise (Generator) van a háttérben

■ Async – Promise-t ad vissza

■ Await - ”megállítja a futást”

(30)

.then vs async/await

(31)

Generátor

(32)

A Generátor iterálható

(33)

Generátor

4Igény szerint több visszatérési érték, egyszerre egy

■ Observable – aktív (nem vár senkire sem)

■ Generátor – passzív

(34)

Aszinkron generátor

(35)

Reaktív programozás - RxJS

4 Aszinkron adatfolyam kezelés

■ Esemény buszok

■ Esmény kezelők

4 Bármiből gyárthatunk adatfolyamot

4 Folyamon alapuló logika

■ Egyik folyam lehet egy másik folyam forrása

■ Összeolvasztahtunk több folyamot, …

4 Folyam: a bekövetkezett események időben rendezett folyamatos listája 4 Az érték halmaza:

■ Normál értékek

■ Hibák

■ Folyam vége

4 Ezen eseményeket aszinkron módon kezeljük:

■ Függvény a normál értékekre

■ Függvény a hibákra

■ Függvény a végére

(36)

Reaktív programozás - RxJS

4Folyamokra fel lehet íratkozni 4A folyamokat “megfigyeljük”

4Megfigyelő tervezési minta

(37)

Reaktív programozás - RxJS

4A folyamok általában megváltoztathatatlanok (immutable)

4Új folyamok előállítása:

■ map – új folyamot állít elő a megfelelő F leképezéssel

■ filter – kiszűr adott eseményeket

■ scan - aggregáló függvénnyel minden beérkezett értéket aggregál

■ …

(38)

Reaktív programozás - RxJS

4Dupla kattintás:

■ 250 ms –

esemény csend alapján

csoportosítjuk

■ Összeszámoljuk

■ Kiszűrjük

(39)

RxJS

4Obervables

■ Push alapú lista

■ Adat forrás -> adat nyelő (felíratkozott lista tagok)

4LINQ

4Schedulers

(40)

Observables

(41)

Observables

4Forró vs. Hideg (Hot vs Cold)

■ Forró

– Amennyiben senkit sem érdekel akkor is fut a háttérben

– Amikor valaki fleíratkozik a legutolsó értéket kapja meg

– Megvan osztva a fleíratkozottak között

■ Hideg

– Csak akkor kezdi el az értékek kiadását, ha valaki felíratkozott rá

– Nincs megosztva a fleíratkozottak között

(42)

RxJS operátorok

(43)

RxJS operátorok

(44)

Időzítők

4A futtatandó feladatok mendzselése

■ Adat struktúra

■ Várakozási sor

■ Futási kontextus

■ Időzítés

4Virtuális idő

4Időzítő típusok

■ Standard

– Adott időpontban – Adott időpontig

■ Rekurzív

■ Periodikus

(45)

Áttekintés

4Aszinkron programozás 4Callback

4Promise 4Generator 4Async/Await 4Observation

(46)