RxJS (The Reactive Extensions for JavaScript ) Introduction

It's an internal sharing for RxJS.

There are many hyperlinks on the slide, you can download the pdf and click them to see the samples or references.

Transcript

1. RxJS Andre Lee
2. The Reactive Extensions for JavaScript Andre Lee
3. Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo
4. Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo
5. Problems
6. Problems time Req: He l l o We Hope
7. Problems time Req: He l l o Resp: resp(H) We Hope
8. Problems time Req: He l l o Resp: resp(H) resp(He) We Hope
9. Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) We Hope
10. Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) resp(Hell) We Hope
11. Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) resp(Hell) resp(Hello) We Hope
12. Problems time Req: He l l o The Real World
13. Problems time Req: He l l o Resp: resp(H) The Real World
14. Problems time Req: He l l o Resp: resp(H) resp(He) The Real World
15. Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) The Real World
16. Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) The Real World resp(Hello)
17. Problems time Req: He l l o Resp: resp(H) resp(He) resp(Hel) The Real World resp(Hello) resp(Hell)
18. Problems
19. Problems We have Promise pattern but handling
20. Problems We have Promise pattern but handling Exceptions,
21. Problems We have Promise pattern but handling Exceptions, Cancellation,
22. Problems We have Promise pattern but handling Exceptions, Cancellation, and Synchronisation
23. Problems We have Promise pattern but handling Exceptions, Cancellation, and Synchronisation is difficult and error-prone
24. Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo
25. Prerequisite Array Extras Functional Programming
26. Array Extras ECMAScript 5 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.prototype.some Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.reduce Array.prototype.reduceRight
27. FP is Avoiding Mutable State Recursion Higher-Order Functions Function Composition Lazy Evaluation Pattern Matching Functional Programming
28. Functional Programming (Cont’d) Examples map filter reduce some every
29. Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo
30. 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
31. What is RxJS (Cont’d) RxJS = Observables + Operators + Schedulers
32. Observables A push based collection Observable could be Arrays Events Async I/Os Promises Generators …
33. Operators map filter concatAll distinctUntilChanged takeUntil throttle
34. Operators map filter concatAll distinctUntilChanged takeUntil throttle switchLatest
35. Operators map filter concatAll distinctUntilChanged takeUntil throttle switchLatest count
36. Operators map filter concatAll distinctUntilChanged takeUntil throttle switchLatest retry count
37. Operators map filter concatAll distinctUntilChanged takeUntil throttle switchLatest retry merge count
38. Operators map filter concatAll distinctUntilChanged takeUntil throttle switchLatest retry merge count ……
39. Operators map filter concatAll distinctUntilChanged takeUntil …
40. Operators map filter concatAll distinctUntilChanged takeUntil …
41. Operators map filter concatAll distinctUntilChanged takeUntil …
42. Schedulers Rx.Scheduler.immediate Rx.Scheduler.currentThread Rx.Scheduler.timeout Rx.HistoricalScheduler Rx.TestScheduler
43. Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo
44. Hello RxJS Back to AutoComplete
45. Hello RxJS http://jsfiddle.net/mattpodwysocki/AL8Mj/ Code I
46. Hello RxJS http://jsfiddle.net/mattpodwysocki/AL8Mj/ Code II
47. Hello RxJS Konami Code Drag and Drop Image Cropper Other Examples
48. Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo
49. 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.
50. Why RxJS (Cont’d) The Reactive Extensions for JavaScript Unifies both the world of Promises, callbacks as well as evented data such as DOM Input, Web Workers, Web Sockets. Once we have unified these concepts, this enables rich composition.
51. Outlines Problems Prerequisite What is RxJS Hello RxJS Why RxJS Live Demo
52. Live Demo AutoComplete QNAP Account Center rx.angular.js ok sign
53. 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
54. Andre Lee ?