1.
Functional Reactive
Angular 2
Tomasz Bąk
t.bak@selleo.com

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

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

4.
http://reactivex.io

5.
http://reactivex.io

6.
http://reactivex.io

7.
http://reactivex.io

8.
Async in web apps
● API requests (1 value)
● DOM events (0-N values)
● WebSockets (0-N values)

9.
Creating Observables
Observable.of(1)
Observable.range(1, 10)
Observable.fromEvent(button, 'click')
Observable.fromPromise(somePromise)
...

10.
Transforming - map
http://rxmarbles.com/#map

11.
Transforming - flatMapLatest
http://reactivex.io/documentation/operators/flatmap.html

12.
Filtering - filter
http://rxmarbles.com/#filter

13.
Filtering - distinctUntilChanged
http://rxmarbles.com/#distinctUntilChanged

14.
Combining - startWith
http://reactivex.io/documentation/operators/startwith.html

15.
Combining - combineLatest
http://reactivex.io/documentation/operators/combinelatest.html

16.
Subscribing to Observable streams
let range = Observable.range(1, 3);
range.subscribe(
(value) => { ... },
(error) => { … }, // optional
() => { … } // optional
)

17.
RxJS/master/examples/autocomplete/autocomplete.js

18.
RxJS/master/examples/autocomplete/autocomplete.js

19.
GitHub Search API client

20.
Params stream

21.
Results stream

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

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

24.
Getting started
https://egghead.io/series/introduction-to-reactive-programming
http://reactivex.io/intro.html
http://rxmarbles.com/