Composing Reactive Software

Transcript

1. carbonfive.com Composing Reactive Software Michael Avila • me@michaelavila.com
2. Agenda • Insufficient overview • Important, but poorly explained idea • Vague and unjustified conclusion • Questions
3. Agenda (revised) • Reactive Programming • Signal Graph • Conclusion • Questions
4. Reactive Programming
5. “... programming with asynchronous data streams ...”
6. interface Observable<T> { subscribe( onNext: (T) => void, onError: (Error) => void, onCompleted: () => void, ): Subscription; map( (T) => V): Observable<V>; flatMap((T) => Observable<V>): Observable<V>; scan( (V, T) => V, V): Observable<V>; filter( (T) => boolean): Observable<T>; withLatestFrom(Observable<V>, ...): Observable<[T, V, ...]>; combineLatest( Observable<V>, ...): Observable<[T, V, ...]>; … any many more! }
7. Operators buffer bufferCount bufferTime bufferToggle bufferWhen combineAll combineLatest concat concatAll concatMap concatMapTo count debounce debounceTime defaultIfEmpty delay delayWhen dematerialize distinctUntilChanged do every expand filter first groupBy ignoreElements last let map mapTo merge mergeMap partition pluck publish race repeat retry retryWhen sample scan share single skip skipUntil skipWhile startWith switchMap window windowCount windowTime windowToggle windowWhen withLatestFrom zip … and probably more
8. const email$ = Observable.fromEvent(...<input/>...); const password$ = Observable.fromEvent(...<input/>...); const login$ = Observable.fromEvent(...<button/>...); const activeUser = login$ .withLatestFrom(email$, password$) .flatMap(([_, email, password]) => { return Observable.ajax.post('/auth/', { email, password }) .map(({ response }) => response); }); activeUser.subscribe(...<div>...);
12. Signal Graph
29. Additional Notes ➔ Asynchronous ➔ Lazy* ➔ Composable
31. Good?
33. ¯\_(ツ)_/¯
34. Good! I think.
35. carbonfive.com Thanks!