$30 off During Our Annual Pro Sale. View Details »

Reactive state of mind

Reactive state of mind

Miroslav Jonaš

February 08, 2018
Tweet

More Decks by Miroslav Jonaš

Other Decks in Programming

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