RxJS - The 3 Main Questions

RxJS - The 3 main question speech was delivered in the 15th edition of the Algiers Tech Meetup.

Transcript

1. RxJS – The 3 Main questions Algiers Tech Meetup
2. He y ! Houssem Yahiaoui Telerik Developer Expert | Freelance JavaScript Developer /_hcodex /houssem-yahiaoui
3. Fun Fact !
4. History Lesson !
5. The What ?
6. RxJS is a library for composing asynchronous and event-based Programs by using observable sequences. It provides one core type, the Observable. “ - Reactivex Team
7. _.for(events) !
8. _.for(events) ! LoDash It’s more like a click you make This is an Exclamation Mark.
9. Define the “var”
10. Observable Observables are functions, that when invoked return 0 - ∞ values between now and end of time.
11. Creation Subscribing Executing Disposing Life Of Observable
12. // [*] Create an Observable from an Event ! var refreshButton = document.querySelector('.refresh'); var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click'); // [*] Create a normal Observable ! var observable = Rx.Observable.create(function subscribe(observer) { var id = setInterval(() => { observer.next('hi') }, 1000); }); // [*] Create a normal Observable From array of values! Rx.Observable.from([1,2,3]); JS Showing a How we can create Observables in different manners Different manner to different observables
13. Observers Observers are just objects with three callbacks, one for each type of notification that an Observable may deliver.
14. // [*] Create an Observer from an Event ! var observer = { next: x => console.log('Observer got a next value: ' + x), error: err => console.error('Observer got an error: ' + err), complete: () => console.log('Observer got a complete notification'), }; JS Showing a How we can create observers PS: You can pass them the callback without observers attachments .. JS
15. Subscription A Subscription essentially just has an unsubscribe() function to release resources or cancel Observable executions.
16. // [*] Create an Observer from an Event ! var observable = Rx.Observable.interval(1000); var subscription = observable.subscribe(x => console.log(x)); // Later: // This cancels the ongoing Observable execution which // was started by calling subscribe with an Observer. subscription.unsubscribe(); JS Showing a How we can work with subscription PS: You can pass compose and unsubscribe observables JS
17. Operators An Operator is a function which creates a new Observable based on the current Observable.
18. // [*] Create an Operator ! function multiplyByTen(input) { var output = Rx.Observable.create(function subscribe(observer) { input.subscribe({ next: (v) => observer.next(10 * v), error: (err) => observer.error(err), complete: () => observer.complete() }); }); return output; } var input = Rx.Observable.from([1, 2, 3, 4]); var output = multiplyByTen(input); output.subscribe(x => console.log(x)); JS Showing a How we can create Operators
19. The Why ?
20. Promises / Callback Hell !
21. The When ?
22. Go back the : Why ?
23. See ya ! Houssem Yahiaoui Telerik Developer Expert | Freelance JavaScript Developer /_hcodex /houssem-yahiaoui