A quick introduction to Reactive Programming which is programming with asynchronous data streams. With RxJS you are given an amazing toolbox of functions to combine, create and filter any of those streams.

1. Reactive Programming
with JavaScript

2. I am Duc Pham
You can reach me at pngduc@gmail.com
Hi!
2

3. Audiences
3

4. Outline
1. Introduction to Reactive Programming
2. Reactive Extensions and RxJS
3. Showcase
4. Discussions
4

5. Introduction to
Reactive Programming
5
1

6. Events
◉ DOM events, animations
◉ Asynchronous response events
◉ Time-related events
6

7. Problems
7
Upcoming events
- Incoming messages/calls
- Friends online/offline
- Friend is typing
- Search for friends
- Add reactions
- Typing/Sending messages
...

8. Old ways
8

9. Reactive Programming (with
streams)
9

10. Streams = Observables
10

11. “
Reactive programming is
programming with asynchronous
data streams
11

12. Reactive Extension
12
2
A library that brings Reactive Programming
to many languages

13. Transforming events in streams
Merging, mixing several streams
Dealing with time delaying events, creating interval
Reactive Extension Features
13

14. Observables
Operators
Reactive Extension - Models
14

15. Reactive Extension - Observables
15
// From primitive data type
Rx.Observable.just(12)
// From array
Rx.Observable.from([1, 2, 3, 4])
// From interval
Rx.Observable.interval(10)
// From promise
Rx.Observable.fromPromise(promise)
// From DOM events
Rx.Observable.fromEvent(
document.getElementById('keyword'),
'keyup'
)

16. Reactive Extension - Operators
16
◉ map
◉ filter
◉ zip
◉ flatMap/concatMap
◉ reduce/scan
◉ debounce
◉ combineWithLatest
◉ merge
….many more
https://rxmarbles.com

17. Showcase
17
3

18. Showcases
Instant Search - Codepen
19
const source = (term) => {
const endpoint =
`https://api.gh.com/s/repos?q=${term}`;
return Rx.Observable.create(function(observer) {
fetch(endpoint)
.then(res => res.json())
.then(j => {
observer.onNext(j.items);
observer.onCompleted();
})
.catch(observer.onError);
});
};
Rx.Observable.fromEvent(el, 'keyup')
.map(e => e.target.value)
.debounce(300)
.distinctUntilChanged()
.flatMapLatest(term => source(term))
.subscribe(function(data){
self.items = data;
self.update();
});

19. Functional
Less is more
Concurrency made easy
Advantages of applying RxJS
Better codebases
22

20. Memory consumption
Long learning time
Debugging
Overuse
Disadvantages of applying RxJS
23

21. 24
Who use ReactiveX?

22. Learning path
Official document
https://reactivex.io
Resources and code sample for common use-cases
https://learnrxjs.io
25

23. Any questions?
Thanks!
26