kuncevic.dev 5 minutes introduction in to RxJS ⏰

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

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

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

kuncevic.dev What is RxJS ?

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

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

kuncevic.dev When do we use Reactive Programming?

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

kuncevic.dev

kuncevic.dev Rx on different platforms

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

kuncevic.dev Frontend Frameworks

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

kuncevic.dev Observable Operators

kuncevic.dev Observable Operators 250+

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

kuncevic.dev pipe function

kuncevic.dev Combine streams

kuncevic.dev .subscribe() Observables are Lazy

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

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

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