Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Functional Reactive Angular 2

674 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Functional Reactive Angular 2

  1. 1. Functional Reactive Angular 2 Tomasz Bąk t.bak@selleo.com
  2. 2. About me ● front-end developer @ Selleo.com ● last 3 years mainly Ember.js and Angular.js
  3. 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. 4. http://reactivex.io
  5. 5. http://reactivex.io
  6. 6. http://reactivex.io
  7. 7. http://reactivex.io
  8. 8. Async in web apps ● API requests (1 value) ● DOM events (0-N values) ● WebSockets (0-N values)
  9. 9. Creating Observables Observable.of(1) Observable.range(1, 10) Observable.fromEvent(button, 'click') Observable.fromPromise(somePromise) ...
  10. 10. Transforming - map http://rxmarbles.com/#map
  11. 11. Transforming - flatMapLatest http://reactivex.io/documentation/operators/flatmap.html
  12. 12. Filtering - filter http://rxmarbles.com/#filter
  13. 13. Filtering - distinctUntilChanged http://rxmarbles.com/#distinctUntilChanged
  14. 14. Combining - startWith http://reactivex.io/documentation/operators/startwith.html
  15. 15. Combining - combineLatest http://reactivex.io/documentation/operators/combinelatest.html
  16. 16. Subscribing to Observable streams let range = Observable.range(1, 3); range.subscribe( (value) => { ... }, (error) => { … }, // optional () => { … } // optional )
  17. 17. RxJS/master/examples/autocomplete/autocomplete.js
  18. 18. RxJS/master/examples/autocomplete/autocomplete.js
  19. 19. GitHub Search API client
  20. 20. Params stream
  21. 21. Results stream
  22. 22. https://github.com/tb/angular2-reactive-examples
  23. 23. Conclusions ● Rx is lodash for events ● same abstraction for events and async operations ● requires different approach of thinking
  24. 24. Getting started https://egghead.io/series/introduction-to-reactive-programming http://reactivex.io/intro.html http://rxmarbles.com/

×