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

RxJS in 5 Minutes

RxJS in 5 Minutes


Aliaksei Kuncevič

June 11, 2020


  1. kuncevic.dev 5 minutes introduction in to RxJS ⏰

  2. kuncevic.dev ALIAKSEI KUNCEVIČ Independent Consultant https://twitter.com/kuncevic https://github.com/kuncevic https://linkedin.com/in/kuncevic

  3. kuncevic.dev @kuncevic Angular Minsk (BY) Frontend Tech (AU) COMMUNITY Angular

    Workshop Angular Sydney (AU) TEACHING‍ kuncevic.dev
  4. kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte

    vs Ember vs Elm vs Angular frontendwatch.com
  5. kuncevic.dev What is RxJS ?

  6. kuncevic.dev Reactive programming (paradigm) Rx Extensions (library, e.g RxJX) Observer

    pattern (object)
  7. kuncevic.dev Think of RxJS as 'Lodash' for handling asynchronous events.

  8. kuncevic.dev When do we use Reactive Programming?

  9. kuncevic.dev Use Cases ✅ DOM events ✅ HTTP calls ✅

  10. kuncevic.dev

  11. kuncevic.dev Rx on different platforms

  12. kuncevic.dev Rx extensions for Languages ✅ Java: RxJava ✅ JavaScript:

    RxJS ✅ C#: Rx.NET ✅ C#(Unity): UniRx ✅ Scala: RxScala ✅ Clojure: RxClojure ✅ C++: RxCpp ✅ Lua: RxLua ✅ Ruby: Rx.rb ✅ Rust: rxRust ✅ Python: RxPY ✅ Go: RxGo ✅ Groovy: RxGroovy ✅ JRuby: RxJRuby ✅ Kotlin: RxKotlin ✅ Swift: RxSwift ✅ PHP: RxPHP ✅ Elixir: reaxive ✅ Dart: RxDart
  13. kuncevic.dev Frontend Frameworks

  14. kuncevic.dev Observable vs Promise Emits multiple values over period of

    time Emits only single value at a time Lazy (Cold). Observable is not called until we subscribe for it. Not Lazy (Hot).It is executed without calling then or catch Can be canceled by calling unsubscribe Not cancellable Supports operators like map, forEach, reduce, retry, retryWhen Operators are not available We can chain observables to handle complex logic on the streams We can use only then clause Predictable error handling Pushes errors down the chain
  15. kuncevic.dev Observable Operators

  16. kuncevic.dev Observable Operators 250+

  17. kuncevic.dev Common RxJS operators Area Operators Creation from,fromEvent, of Combination

    combineLatest, concat, merge, zip, startWith , withLatestFrom Filtering debounceTime, distinctUntilChanged, filter, take, takeUntil Transformation bufferTime, concatMap, map, mergeMap, scan, switchMap Utility tap Multicasting share
  18. kuncevic.dev pipe function

  19. kuncevic.dev Combine streams

  20. kuncevic.dev .subscribe() Observables are Lazy

  21. kuncevic.dev Main Features ✅ Cancelable ✅ Predictable error handling ✅

    Extensive list of operators ✅ Guaranteed teardown of resources ✅ Keeps you away from 'callback hell'
  22. kuncevic.dev Who is using RxJS? ✅ Microsoft ✅ Google(YouTube) ✅

    Sony (PlayStation) ✅ Netflix ✅ Canva ✅ Slack ✅ Your company?
  23. kuncevic.dev Links https://github.com/ReactiveX/RxJS https://rxjs.dev https://rxjs.xyz https://rxviz.com https://github.com/vuejs/vue-rx https://github.com/ReactiveX/rxjs/issues/4740 https://github.com/reactjs/rfcs/pull/147 https://stackblitz.com/edit/typescript-djhuxu