You will learn RxJS in 2017
29 likes2,349 views
The document discusses RxJS, a library for reactive programming using Observables that provide an API for asynchronous programming with observable streams. It provides code examples of using RxJS to handle events, AJAX requests, and animations as Observables. It also compares RxJS to Promises and native JavaScript event handling, and lists several frameworks that use RxJS like Angular and Redux.
![[1, 2, 3].forEach(x => console.log(x));
1
2
3
ForEach](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-13-320.jpg)
![[1, 2, 3].map(x => x + 1);
[2, 3, 4]
Map](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-14-320.jpg)
![[1, 2, 3].filter(x => x % 2 === 1);
[1, 3]
Filter](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-15-320.jpg)
![[[1, 2], [2, 3], [5, 6]].concatAll();
[1, 2, 2, 3, 5, 6]
concatAll](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-16-320.jpg)
![var user = {
id: 888,
name: 'JerryHong',
courseLists: [{
name: 'My Courses',
courses: [
{ title: 'React ', rating: 5 },
{ title: ' ', rating: 4 }
]
}, {
name: 'New Release',
courses: [
{ title: 'Vue 2 ', rating: 5 },
{ title: 'RxJS ', rating: 5 }
]
}]
};
var user = {
id: 888,
name: 'JerryHong',
courseLists: [{
name: 'My Courses',
courses: [
{ title: 'React ', rating: 5 },
{ title: ' ', rating: 4 }
]
}, {
name: 'New Release',
courses: [
{ title: 'Vue 2 ', rating: 5 },
{ title: 'RxJS ', rating: 5 }
]
}]
};
var user = {
id: 888,
name: 'JerryHong',
courseLists: [{
name: 'My Courses',
courses: [
{ title: 'React ', rating: 5 },
{ title: ' ', rating: 4 }
]
}, {
name: 'New Release',
courses: [
{ title: 'Vue 2 ', rating: 5 },
{ title: 'RxJS ', rating: 5 }
]
}]
};](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-18-320.jpg)
![var user = {
id: 888,
name: 'JerryHong',
courseLists: [{
name: 'My Courses',
courses: [
{ title: 'React ', rating: 5 },
{ title: ' ', rating: 4 }
]
}, {
name: 'New Release',
courses: [
{ title: 'Vue 2 ', rating: 5 },
{ title: 'RxJS ', rating: 5 }
]
}]
};](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-19-320.jpg)
![...
[{x: 31, y: 23}, {x: 41, y: 23}, {x: 12, y: 45}]](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-22-320.jpg)
![var iterator = [1, 2, 3][Symbol.iterator]();
iterator.next();
{ value: 1, done: false }
iterator.next();
{ value: 2, done: false }
iterator.next();
{ value: 3, done: false }
iterator.next();
{ value: undefined, done: true }
Iterator](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-28-320.jpg)
![[[1, 2], [2, 3], [5, 6]].concatAll();
[1, 2, 2, 3, 5, 6]
concatAll](https://image.slidesharecdn.com/youwilllearnrxjsin2017-170124142702/85/You-will-learn-RxJS-in-2017-45-320.jpg)
You will learn RxJS in 2017
- 1. You Will Learn RxJS In 2017 Jerry Hong
- 2. RxJS
- 3. ...
- 4. • RxJS ? Lodash ? • RxJS ?
- 5. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } })
- 6. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } })
- 7. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) ...
- 8. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) Callback
- 9. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) Promise
- 10. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) Complex State
- 13. [1, 2, 3].forEach(x => console.log(x)); 1 2 3 ForEach
- 14. [1, 2, 3].map(x => x + 1); [2, 3, 4] Map
- 15. [1, 2, 3].filter(x => x % 2 === 1); [1, 3] Filter
- 16. [[1, 2], [2, 3], [5, 6]].concatAll(); [1, 2, 2, 3, 5, 6] concatAll
- 18. var user = { id: 888, name: 'JerryHong', courseLists: [{ name: 'My Courses', courses: [ { title: 'React ', rating: 5 }, { title: ' ', rating: 4 } ] }, { name: 'New Release', courses: [ { title: 'Vue 2 ', rating: 5 }, { title: 'RxJS ', rating: 5 } ] }] }; var user = { id: 888, name: 'JerryHong', courseLists: [{ name: 'My Courses', courses: [ { title: 'React ', rating: 5 }, { title: ' ', rating: 4 } ] }, { name: 'New Release', courses: [ { title: 'Vue 2 ', rating: 5 }, { title: 'RxJS ', rating: 5 } ] }] }; var user = { id: 888, name: 'JerryHong', courseLists: [{ name: 'My Courses', courses: [ { title: 'React ', rating: 5 }, { title: ' ', rating: 4 } ] }, { name: 'New Release', courses: [ { title: 'Vue 2 ', rating: 5 }, { title: 'RxJS ', rating: 5 } ] }] };
- 19. var user = { id: 888, name: 'JerryHong', courseLists: [{ name: 'My Courses', courses: [ { title: 'React ', rating: 5 }, { title: ' ', rating: 4 } ] }, { name: 'New Release', courses: [ { title: 'Vue 2 ', rating: 5 }, { title: 'RxJS ', rating: 5 } ] }] };
- 20. user.courseLists .map(courseList => courseList.courses .filter(course => course.rating === 5)) .concatAll() .forEach(course => console.log(course)) rating 5
- 21. elmt.mouseDowns .map(mouseEvent => document.mouseMoves .filter takeUntil(document.mouseUps)) .concatAll() .forEach(pos => image.position = pos);
- 22. ... [{x: 31, y: 23}, {x: 41, y: 23}, {x: 12, y: 45}]
- 23. {x: 31, y: 23}...{x: 41, y: 23}...{x: 12, y: 45}
- 24. (Collection)
- 28. var iterator = [1, 2, 3][Symbol.iterator](); iterator.next(); { value: 1, done: false } iterator.next(); { value: 2, done: false } iterator.next(); { value: 3, done: false } iterator.next(); { value: undefined, done: true } Iterator
- 29. iterator Map, Filter, ConcatAll
- 30. document.addEventListener( 'mousemove', function next(event){ console.log(event) }) { clientX: 55, clientY: 121 } { clientX: 12, clientY: 124 } { clientX: 23, clientY: 234 } { clientX: 234, clientY: 12 } { clientX: 123, clientY: 45 } { clientX: 56, clientY: 133 } Observer
- 32. document.addEventListener('click', (event) => { ... }) Push var x = iterator.next() Pull
- 33. Push API • DOM Events • Web sockets • Node Streams • XMLHttpRequest • setInterval • Service Workers
- 34. Observable
- 35. Observable
- 36. var mouseMove = Observable .fromEvent(elem, 'mousemove') Observable for Event
- 37. API • DOM Events • Web sockets • Node Streams • XMLHttpRequest • setInterval • Service Workers => Observable
- 38. var handler = (event) => console.log(event) // subscribe document.addEventListener('mousemove', handler) // unsubscribe document.removeEventListener('mousemove', handler)
- 39. // subscribe var subscription = mouseMove.subscribe(console.log) // unsubscribe subscription.unsubscribe() Observable
- 40. // subscribe mouseMove.subscribe( event => console.log(event), err => console.log('Error: ' + err), () => console.log('complete') ) // unsubscribe mouseMove.unsubscribe() Observable
- 43. '--1----2---3'.map(x => x + 1); 2 3 4 Map
- 44. '--1----2---3'.filter(x => x % 2 === 1); 1 3 Filter
- 45. [[1, 2], [2, 3], [5, 6]].concatAll(); [1, 2, 2, 3, 5, 6] concatAll
- 46. '--o-------o'.concatAll(); -1--2| -1-2-3| 1 2 1 2 3 concatAll '---1--2---1-2-3'
- 48. const dragDOM = document.getElementById('drag'); const mouseDown = Observable .fromEvent(dragDOM, 'mousedown'); const mouseUp = Observable .fromEvent(document, 'mouseup'); const mouseMove = Observable .fromEvent(document, 'mousemove');
- 49. mouseDown .map(event => mouseMove) mouseDown .map(event => mouseMove.takeUntil(mouseUp)) mouseDown .map(event => mouseMove mouseDown .map(event => mouseMove.takeUntil(mouseUp)) .concatAll() mouseDown .map(event => mouseMove.takeUntil(mouseUp)) .concatAll() .subscribe(event => { dragDOM.style.left = event.clientX + 'px'; dragDOM.style.top = event.clientY + 'px'; }) https://jsbin.com/sanefic/1/edit?js,output
- 50. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } })
- 51. var scroll = Observable.fromEvent(window, 'scroll'); scroll .filter(event => someOffsetBottom < 0) .map(event => fetch('url...')) .exhaust() .subscribe(res => { // do something change view })
- 52. RxJS • Promise
- 53. • DOM Event • AJAX • WebSocket • Server Sent Event • Animation • DOM Event (0 - N values) • AJAX (1 value) • WebSocket (0 - N values) • Server Sent Event (0 - N values) • Animation (0 - N values, )
- 54. Promise AJAX • DOM Event (0 - N values) • AJAX (1 value) • WebSocket (0 - N values) • Server Sent Event (0 - N values) • Animation (0 - N values, )
- 55. Observable • DOM Event (0 - N values) • AJAX (1 value) • WebSocket (0 - N values) • Server Sent Event (0 - N values) • Animation (0 - N values, )
- 56. RxJS • Promise • Observable ES7 • RxJS 5 • RxJS 5 Observable Spec Proposal • framework (library) RxJS • Angular 2 • Vue-rx • Redux-Observable
- 57. RxJS
- 58. RxJS • ( ) • ( ) • • •
- 59. RxJS • Hello World app • • ( )
- 60. • RxJS • 30 RxJS • Observable Spec Proposal • Learn RxJS