Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RxJS (The Reactive Extensions for JavaScript ) Introduction

A33cfc536667317a0cc6751c01269153?s=47 andre
October 21, 2014

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.

A33cfc536667317a0cc6751c01269153?s=128

andre

October 21, 2014
Tweet

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 ?