Reactive Programming in Angular with RxJs

RxJs is Reactive Extensions For JavaScript. RxJS allows you to solve hard problems with less code, promotes maintainability, readability, flexibility. With RxJs, you can handle this in a declarative and flexible way alongside redux or you can replace Redux altogether.

Transcript

2. Hiren Dave Tech Author, Blogger and Speaker Co-Organizer, GDG Ahmedabad Blog : https://hirendave.tech Twitter : @hjdave
3. So what exactly is Reactive Programming?
4. In Simple Terms, • It deals with series of events • Automatically detect changes and propagate it • Receive incoming changes and take necessary action on it • While taking actions, don’t know about previous state or data
5. Reactive Programming Is Asynchronous Data Stream and Propagation of Change.
6. Asynchronous Data Stream, • It’s sequence of on-going events. • Anything can be in stream. For example, data collection, inputs, events etc. • It emits three possible things - Next Value - Error - Complete Signal
7. Introducing RxJs
8. What is RxJs, • Reactive Extensions for JavaScript • Most popular Library for reactive programming • Built on Observable pattern • Supports multiple libraries
9. What is Observable
10. Observable is function function myObservable(){ }
11. Call it with Observer function myObservable(observer){ }
12. Observer has certain handlers const observer = { next(value) { console.log(value) }, error(msg) { console.log(msg) }, complete() { console.log(“done”) } }
13. Take next action in Observable function myObservable(observer){ observer.next(“new value”); }
14. Return error in Observable function myObservable(observer){ observer.error(“something is wrong”); }
15. Complete in Observable function myObservable(observer){ observer.compelte(); }
16. Call Observable with Observer myObservable(observer);
17. Reactive Programming in Angular with RxJs
18. Four Main Components of RxJs For Angular
19. The Observable, • Push Vs. Pull • It’s Push system for JavaScript • It’s stream that we use to listen for changes • It produces multiple values.
20. The Observer, • It’s a consumer of values generated by Observable. • It’s set of Callbacks. • Allows you to define next value and action.
21. The Subject, • It’s a special type of Observable • Allows you to multicast value to various observers • Used to subscribe
22. The Operators, • Special functions • Allows you to manipulate data coming from subject • There are lots of inbuilt Rx operators
23. Hello World
24. Some common usage of RxJs in Angular
25. HTTP Request
26. Share Data Between Components
27. RxJs Operators
28. Creation Operators • ajax • of • fromEvent • interval • range • timer • generate
29. Transformation Operators • map • mergeMap • groupBy • pluck • scan • window • concatMap
30. Filtering Operators • take • takeLast • first • last • skip • skipLast • takeLast
31. Join Operators • combineAll • concatAll • mergeAll • startWith • exhaust
32. Thank You