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
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. kuncevic.dev
    @kuncevic CREATOR

    Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
    frontendwatch.com

    View full-size slide

  5. kuncevic.dev
    What is RxJS ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. kuncevic.dev

    View full-size slide

  11. kuncevic.dev
    Rx on different platforms

    View full-size 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 full-size slide

  13. kuncevic.dev
    Frontend Frameworks

    View full-size 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 full-size slide

  15. kuncevic.dev
    Observable Operators

    View full-size slide

  16. kuncevic.dev
    Observable Operators
    250+

    View full-size 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 full-size slide

  18. kuncevic.dev
    pipe function

    View full-size slide

  19. kuncevic.dev
    Combine streams

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide