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
5. None

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