I will explain basics of Functional Reactive Programming with RxJS using short samples and a GitHub search in Angular 2 app example.

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

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

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

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

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

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

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

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

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

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

19. RxJS/master/examples/autocomplete/autocomplete.js

20. RxJS/master/examples/autocomplete/autocomplete.js

21. GitHub Search API client

22. Params stream

23. Results stream

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

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

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