RxJS in 5 Minutes

5 Minutes introduction in to RxJS @ Frontend Tech Meetup

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

Transcript

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

   View Slide

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

   View Slide

3. kuncevic.dev
   @kuncevic
   Angular Minsk (BY)
   Frontend Tech (AU)
   COMMUNITY
   Angular Workshop
   Angular Sydney (AU)
   TEACHING‍
   kuncevic.dev
   
   

   View Slide

4. kuncevic.dev
   @kuncevic CREATOR
   
   Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
   frontendwatch.com
   

   View Slide

5. kuncevic.dev
   What is RxJS ?
   

   View Slide

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

   View Slide

7. kuncevic.dev
   Think of RxJS as 'Lodash' for
   handling asynchronous events.
   

   View Slide

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

   View Slide

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

   View Slide

10. kuncevic.dev
    

    View Slide

11. kuncevic.dev
    Rx on different platforms
    

    View Slide

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
    

    View Slide

13. kuncevic.dev
    Frontend Frameworks
    

    View Slide

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
    

    View Slide

15. kuncevic.dev
    Observable Operators
    

    View Slide

16. kuncevic.dev
    Observable Operators
    250+
    

    View Slide

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
    

    View Slide

18. kuncevic.dev
    pipe function
    

    View Slide

19. kuncevic.dev
    Combine streams
    

    View Slide

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

    View Slide

21. kuncevic.dev
    Main Features
    ✅ Cancelable
    ✅ Predictable error handling
    ✅ Extensive list of operators
    ✅ Guaranteed teardown of resources
    ✅ Keeps you away from 'callback hell'
    

    View Slide

22. kuncevic.dev
    Who is using RxJS?
    ✅ Microsoft
    ✅ Google(YouTube)
    ✅ Sony (PlayStation)
    ✅ Netflix
    ✅ Canva
    ✅ Slack
    ✅ Your company?
    

    View Slide

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
    

    View Slide