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. 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

12. Functional Programming

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)

27. Iterator
Observer

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

31. Iterator 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

41. -------1---2----3----|
Marble Diagram
time
-------1---2----3----

42. '--1----2---3'.forEach(x => console.log(x));
1
2
3
ForEach

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'

47. '--1---2----3'.takeUntil(
'--------e');
1
2
'complete'
takeUntil
'--1---2-|'

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

61. •
•
• AutoComplete
•
•