RxJS Observables & Angular2 HTTP

Transcript

1. RXJS OBSERVABLES AND ANGULAR2 HTTP SUDIPTA SEN SOFTWARE ENGINEER Red Hat Bangalore, R & D
2. function isUserTooYoung(id, callback) { openDatabase(function(db) { getCollection(db, 'users', function(col) { find(col, {'id': id},function(result) { result.filter(function(user) { callback(user.age < cutoffAge) }) }) }) }) } A Promise from ES6: function isUserTooYoung(id) { return openDatabase(db) .then(getCollection) .then(find.bind(null, {'id': id})) .then(function(user) { return user.age < cutoffAge; }); } Callback hell Promise
3. How do we wrap a socket stream in a promise? How do we cancel a promise? How do we retry to get the data from a promise?
4. WHAT IS REACTIVE PROGRAMMING? Programming paradigm that works with asynchronous data streams Data streams can be created from many things UI events HTTP requests File system Array-like object Memory / Cache
5. REACTIVE EXTENSIONS A library for programming asynchronous programs by using observable sequence. Provides a long list of operators which allow us to map, filter, select, transform, combine and compose observables.
6. CHOOSE YOUR PLATFORM Languages Java: JavaScript: C#: C#(Unity): Scala: Clojure: C++: Groovy: RxJava RxJS Rx.NET UniRx RxScala RxClojure RxCpp RxGroovy JRuby: Kotlin: Swift: PHP: Elixir: Lua: Ruby: Python: RxJRuby RxKotlin RxSwift RxPHP reaxive RxLua Rx.rb RxPY ReactiveX for platforms and frameworks RxNetty RxAndroid RxCocoa
7. WHAT IS A STREAM? A sequence of ongoing events ordered in time Emits data, error and signal (e.g. complete)
8. OBSERVABLE Watch the streams for value, error or complete signals and emits function. Observables can be watched by Observers. Observables can continuously watch a stream. We can interact with data stream as regular array or object. Observers can unsubscribe the observables to stop listening to the observables.
9. CREATING AN OBSERVABLE Rx.Observable.create((observer) => { observer.next('Hello'); observer.next('World'); });
10. let ob1 = Rx.Observable.create((observer) => { observer.next('Hello'); observer.next('World'); }); ob1.subscribe((val) => { console.log(val); }); // "Hello" // "World" HOW TO SUBSCRIBE TO AN OBSERVABLE
11. let ob1 = Rx.Observable.create((observer) => { observer.next('Hello'); observer.error('Oops!'); observer.complete(); }); ob1.subscribe( val => console.log('Success: ' + val), err => console.log('Error: ' + err), () => console.log('Completed') ); // "Success: Hello" // "Error: Oops!" MORE ON SUBSCRIBE
12. let ob1 = Rx.Observable.create((observer) => { observer.next(1); observer.next(2); observer.error('No more numbers found'); }); let ob2 = ob1.catch(err => Rx.Observable.throw('Error1: ' + err)); ob2.subscribe( val => console.log('Success: ' + val), err => console.log('Error2: ' + err) ); // "Success: 1" // "Success: 2" // "Error2: Error1: No more numbers found" ERROR HANDLING
13. let ob1 = Rx.Observable.create((observer) => { observer.next(1); observer.next(2); observer.error('No more numbers found'); }); let ob2 = ob1.retry(1); ob2.subscribe( val => console.log('Success: ' + val), err => console.log('Error2: ' + err) ); // "Success: 1" // "Success: 2" // "Success: 1" // "Success: 2" // "Error2: No more numbers found" RETRY MECHANISM
14. let ob1 = Rx.Observable.create((observer) => { observer.next({status: 200, message: 'All good'}); observer.next({status: 503, message: 'Service not available'}); // observer.next({status: 404, message: 'Not found!'}); }).map((item) => { if (item.status === 503) throw item; if (item.status === 404) throw item; return item; }); let ob2 = ob1.retryWhen((errors) => { return errors.flatMap((err) => { // Retry when the status is 503 if (err.status === 503) { console.log(`Status ${err.status} is retriable!`); return Rx.Observable.timer(2000); } // Else pass on the error console.log(`Status ${err.status} is not retriable!`); return Rx.Observable.throw(err); }).take(1) }); ob2.subscribe( val => console.log('Success: ' + JSON.stringify(val)), err => console.log('Error2: ' + JSON.stringify(err)) ); CONDITIONAL RETRY retryWhen
15. let ob1 = Rx.Observable.create((observer) => { observer.next(1); observer.next(2); }); let ob2 = ob1.map((item) => item + 1); ob2.subscribe((val) => { console.log(val); }); // 2 // 3 HOW TO DEAL WITH MAP
16. const source = Rx.Observable.from([1,2,3,4,5]); const example = source.filter(num => num % 2 === 0); const subscribe = example.subscribe( val => console.log(`Even number: ${val}`) ); // "Even number: 2" // "Even number: 4" filter
17. SOME MORE OPERATORS let ob1 = Rx.Observable.create((observer) => { setTimeout(() => observer.next(2), 1000); setTimeout(() => observer.next(4), 3000); }); let ob2 = Rx.Observable.create((observer) => { setTimeout(() => observer.next(1), 500); setTimeout(() => observer.next(4), 2000); }); const ob3 = Rx.Observable.combineLatest( ob1, ob2 ).subscribe((val) => console.log(val)); // [2, 1] // [2, 4] // [4, 4] combineLates
18. SOME MORE OPERATORS let ob1 = Rx.Observable.create((observer) => { observer.next(1); observer.next(2); observer.complete(); }); let ob2 = Rx.Observable.create((observer) => { observer.next(3); observer.next(4); observer.complete(); }); const ob3 = Rx.Observable.forkJoin( ob1, ob2 ).subscribe((val) => console.log(val)); // [2, 4] forkJoin
19. //emit 'Hello' const source = Rx.Observable.of('Hello'); //map to inner observable and flatten const example = source.switchMap( val => Rx.Observable.of(`${val} World!`) ); //output: 'Hello World!' const subscribe = example.subscribe( val => console.log(val) ); SOME MORE OPERATORS switchMap
20. SOME MORE OPERATORS const source = Rx.Observable.interval(1000).take(10); const example = source .do((val) => console.log(`Before publishing: ${val}`)) .publish(); example.subscribe(val => console.log(`Subscriber One: ${val}`)); example.subscribe(val => console.log(`Subscriber Two: ${val}`)); example.connect(); publish | connectable observable | hot observable
21. OBSERVABLE VS PROMISE Both Promises and Observables provide us with abstractions that help us deal with the asynchronous nature of our applications. However, there are important differences between the two: Observables can define both the setup and teardown aspects of asynchronous behavior. Observables are cancellable. Moreover, Observables can be retried using one of the retry operators provided by the API, such as retry and retryWhen. On the other hand, Promises require the caller to have access to the original function that returned the promise in order to have a retry capability.
22. twitter.com/RedHatNews youtube.com/redhat facebook.com/redhatinc THANK YOU! plus.google.com/+RedHat linkedin.com/company/red-hat