Reactive state of mind

Transcript

1. REACTIVE STATE

   OF MIND
   Angular Vienna
   feb 2018
   Miroslav Jonas
   @meeroslav
   

   View Slide

2. REACTIVEX
   WHAT IS
   

   View Slide

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.
   

   View Slide

4. REACTIVEX IS A COMBINATION OF THE
   BEST IDEAS FROM
   THE OBSERVER PATTERN,
   THE ITERATOR PATTERN, 

   AND FUNCTIONAL PROGRAMMING.
   REACTIVE STATE OF MIND
   @meeroslav
   

   View Slide

5. View Slide

6. GANG OF FOUR
   

   View Slide

7. ITERATOR PATTERN
   Photo by 

   @igorovsyannykov
   

   View Slide

8. OBSERVER
   PATTERN
   

   View Slide

9. HOT & COLD OBSERVABLES
   

   View Slide

10. TL;DEMO
    

    View Slide

11. LETTABLE
    PIPEABLE
    OPERATORS
    Photo by @timmossholder
    

    View Slide

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));
    

    View Slide

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))
    );
    

    View Slide

14. THANK YOU
    ▸ Tweet me: @meeroslav
    ▸ Source at: https://github.com/meeroslav/rx-tetris
    

    View Slide