Reactive state of mind

Transcript

1. REACTIVE STATE
 OF MIND Angular Vienna feb 2018 Miroslav Jonas @meeroslav
2. REACTIVEX WHAT IS
3. An API for asynchronous programming
 with observable streams. REACTIVE STATE OF MIND @meeroslav ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences. Reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.
4. REACTIVEX IS A COMBINATION OF THE BEST IDEAS FROM THE OBSERVER PATTERN, THE ITERATOR PATTERN, 
 AND FUNCTIONAL PROGRAMMING. REACTIVE STATE OF MIND @meeroslav
6. GANG OF FOUR
7. ITERATOR PATTERN Photo by 
 @igorovsyannykov
8. OBSERVER PATTERN
9. HOT & COLD OBSERVABLES
10. TL;DEMO
11. LETTABLE PIPEABLE OPERATORS Photo by @timmossholder
12. import * as Rx from "rxjs"; const name = Rx.Observable.ajax .getJSON<{ name: string }>("/api/employees/alice") .map(employee => employee.name) .catch(error => Rx.Observable.of(null)); How it used to be… With prototype patching… REACTIVE STATE OF MIND @meeroslav import { Observable } from "rxjs/Observable"; import "rxjs/add/observable/dom/ajax"; import "rxjs/add/operator/catch"; import "rxjs/add/operator/map"; const name = Observable.ajax .getJSON<{ name: string }>(“/api/employees/alice") .map(employee => employee.name) .catch(error => Observable.of(null));
13. import { ajax } from "rxjs/observable/dom/ajax"; import { of } from "rxjs/observable/of"; import { _catch } from "rxjs/operator/catch"; import { map } from "rxjs/operator/map"; const source = ajax.getJSON<{ name: string }>(“/api/employees/alice"); const mapped = map.call(source, employee => employee.name); const name = _catch.call(mapped, error => of(null)); Using call… With pipes REACTIVE STATE OF MIND @meeroslav import { ajax } from "rxjs/observable/dom/ajax"; import { of } from "rxjs/observable/of"; import { catchError, map } from "rxjs/operators"; const name = ajax .getJSON<{ name: string }>("/api/employees/alice") .pipe( map(employee => employee.name), catchError(error => of(null)) );
14. THANK YOU ▸ Tweet me: @meeroslav ▸ Source at: https://github.com/meeroslav/rx-tetris