Functional Reactive

Angular 2

Tomasz Bąk

t.bak@selleo.com

About me

● front-end developer @ Selleo.com● last 3 years mainly Ember.js and Angular.js

Functional Programming

● data is only loosely coupled to functions● central activity is writing new functions

Example:

let numbers = [1,2,3];let isEven = (n) => n % 2 == 0;let evenNumbers = numbers.filter(isEven);

http://reactivex.io

http://reactivex.io

http://reactivex.io

http://reactivex.io

Async in web apps

● API requests (1 value)● DOM events (0-N values)● WebSockets (0-N values)

Creating Observables

Observable.of(1)

Observable.range(1, 10)

Observable.fromEvent(button, 'click')

Observable.fromPromise(somePromise)

...

Transforming - map

http://rxmarbles.com/#map

Transforming - flatMapLatest

http://reactivex.io/documentation/operators/flatmap.html

Filtering - filter

http://rxmarbles.com/#filter

Filtering - distinctUntilChanged

http://rxmarbles.com/#distinctUntilChanged

Combining - startWith

http://reactivex.io/documentation/operators/startwith.html

Combining - combineLatest

http://reactivex.io/documentation/operators/combinelatest.html

Subscribing to Observable streams

let range = Observable.range(1, 3);

range.subscribe(

(value) => { ... },

(error) => { … }, // optional

() => { … } // optional

)

RxJS/master/examples/autocomplete/autocomplete.js

RxJS/master/examples/autocomplete/autocomplete.js

GitHub Search API client

Params stream

Results stream

https://github.com/tb/angular2-reactive-examples

Conclusions

● Rx is lodash for events● same abstraction for events and async operations● requires different approach of thinking

Getting started

https://egghead.io/series/introduction-to-reactive-programming

http://reactivex.io/intro.html

http://rxmarbles.com/