Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactive state of mind

Reactive state of mind

B5a5aa65ece7b78c2b73afca48c48885?s=128

Miroslav Jonaš

February 08, 2018
Tweet

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