2017 Front-End Taiwan Developer 小聚簡報

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