RxJS (The Reactive Extensions for JavaScript ) Introduction

Slide 1

Slide 1 text

RxJS Andre Lee

Slide 2

Slide 2 text

The Reactive Extensions for JavaScript Andre Lee

Slide 3

Slide 3 text

Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo

Slide 4

Slide 4 text

Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo

Slide 5

Slide 5 text

Problems

Slide 6

Slide 6 text

Problems time Req: He l l o We Hope

Slide 7

Slide 7 text

Problems time Req: He l l o Resp: resp(H) We Hope

Slide 8

Slide 8 text

Problems time Req: He l l o Resp: resp(H) resp(He) We Hope

Slide 9

Slide 9 text

Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) We Hope

Slide 10

Slide 10 text

Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) resp(Hell) We Hope

Slide 11

Slide 11 text

Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) resp(Hell) resp(Hello) We Hope

Slide 12

Slide 12 text

Problems time Req: He l l o The Real World

Slide 13

Slide 13 text

Problems time Req: He l l o Resp: resp(H) The Real World

Slide 14

Slide 14 text

Problems time Req: He l l o Resp: resp(H) resp(He) The Real World

Slide 15

Slide 15 text

Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) The Real World

Slide 16

Slide 16 text

Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) The Real World resp(Hello)

Slide 17

Slide 17 text

Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) The Real World resp(Hello) resp(Hell)

Slide 18

Slide 18 text

Problems

Slide 19

Slide 19 text

Problems We have Promise pattern but handling

Slide 20

Slide 20 text

Problems We have Promise pattern but handling Exceptions,

Slide 21

Slide 21 text

Problems We have Promise pattern but handling Exceptions, Cancellation,

Slide 22

Slide 22 text

Problems We have Promise pattern but handling Exceptions, Cancellation, and Synchronisation

Slide 23

Slide 23 text

Problems We have Promise pattern but handling Exceptions, Cancellation, and Synchronisation is difﬁcult and error-prone

Slide 24

Slide 24 text

Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo

Slide 25

Slide 25 text

Prerequisite Array Extras Functional Programming

Slide 26

Slide 26 text

Array Extras ECMAScript 5 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.prototype.some Array.prototype.forEach Array.prototype.map Array.prototype.ﬁlter Array.prototype.reduce Array.prototype.reduceRight

Slide 27

Slide 27 text

FP is Avoiding Mutable State Recursion Higher-Order Functions Function Composition Lazy Evaluation Pattern Matching Functional Programming

Slide 28

Slide 28 text

Functional Programming (Cont’d) Examples map ﬁlter reduce some every

Slide 29

Slide 29 text

Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo

Slide 30

Slide 30 text

What is RxJS Developed by Microsoft Open Technologies, Inc. The Reactive Extensions for JavaScript Reactive Manifesto (Trad. Chinese Ver.) Responsive Resilient Elastic Message Driven i.e. RxJS wants to let your system to be Reactive System

Slide 31

Slide 31 text

What is RxJS (Cont’d) RxJS = Observables + Operators + Schedulers

Slide 32

Slide 32 text

Observables A push based collection Observable could be Arrays Events Async I/Os Promises Generators …

Slide 33

Slide 33 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil throttle

Slide 34

Slide 34 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil throttle switchLatest

Slide 35

Slide 35 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil throttle switchLatest count

Slide 36

Slide 36 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil throttle switchLatest retry count

Slide 37

Slide 37 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil throttle switchLatest retry merge count

Slide 38

Slide 38 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil throttle switchLatest retry merge count ……

Slide 39

Slide 39 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil …

Slide 40

Slide 40 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil …

Slide 41

Slide 41 text

Operators map ﬁlter concatAll distinctUntilChanged takeUntil …

Slide 42

Slide 42 text

Schedulers Rx.Scheduler.immediate Rx.Scheduler.currentThread Rx.Scheduler.timeout Rx.HistoricalScheduler Rx.TestScheduler

Slide 43

Slide 43 text

Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo

Slide 44

Slide 44 text

Hello RxJS Back to AutoComplete

Slide 45

Slide 45 text

Hello RxJS http://jsﬁddle.net/mattpodwysocki/AL8Mj/ Code I

Slide 46

Slide 46 text

Hello RxJS http://jsﬁddle.net/mattpodwysocki/AL8Mj/ Code II

Slide 47

Slide 47 text

Hello RxJS Konami Code Drag and Drop Image Cropper Other Examples

Slide 48

Slide 48 text

Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo

Slide 49

Slide 49 text

Why RxJS Promises are good for solving Asynchronous operations such as Querying a service with an XMLHttpRequest, Where the expected behavior is one value and then completion.

Slide 50

Slide 50 text

Why RxJS (Cont’d) The Reactive Extensions for JavaScript Uniﬁes both the world of Promises, callbacks as well as evented data such as DOM Input, Web Workers, Web Sockets. Once we have uniﬁed these concepts, this enables rich composition.

Slide 51

Slide 51 text

Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo

Slide 52

Slide 52 text

Live Demo AutoComplete QNAP Account Center rx.angular.js ok sign

Slide 53

Slide 53 text

References https://github.com/Reactive-Extensions/RxJS http://jhusain.github.io/learnrx/ https://dl.dropboxusercontent.com/u/2586835/talks/ jsdc2014%20-%20RxJS%20for%20f2e.pdf

Slide 54

Slide 54 text

Andre Lee ?