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 ⏰
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 ✅ WebSockets
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