這幾年來 JavaScript 有越來越多的語法糖(syntax sugar)像是 async/await, generator 等等，但我們實際上在處理非同步行為時，仍然要透過各種不同的方式；這使我們必須學習越來越多的語法，但程式碼卻更加難以閱讀。本次演講將會說明 RxJS 如何使用相同的方式處理各種非同步行為，以及我們要如何運用 Functional Programming 的觀念把複雜的非同步行為封裝成簡單可讀的程式碼。

1. RxJS

2. What’s RxJS ?

3. Lodash for async

4. Observable
Library

5. Why we need RxJS ?

6. let isRequesting = false;
scrollView.addEventListener('scroll', event !=> {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
});

7. let isRequesting = false;
scrollView.addEventListener('scroll', event !=> {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
});

8. let isRequesting = false;
scrollView.addEventListener('scroll', event !
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting)
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;

9. let isRequesting = false;
scrollView.addEventListener('scroll', event !
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting)
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});

10. scrollView.addEventListener('scroll', event !
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting)
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
});
Request

11. Flag let isRequesting = false;
scrollView.addEventListener('scroll', event !
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting)
isRequesting = true;
fetch('url%%...')
.then(res !=> {

12. let isRequesting = false;
scrollView.addEventListener('scroll', event !
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting)
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
isRequesting false
Request

13. let isRequesting = false;
scrollView.addEventListener('scroll', event !
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting)
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
Request
isRequest true

14. const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting)
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
});
Response
isRequest false

15. let isRequesting = false;
scrollView.addEventListener('scroll', event !=> {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
});

16. What’s wrong ?

17. let isRequesting = false;
scrollView.addEventListener('scroll', event !=> {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
});

18. let isRequesting = false;
scrollView.addEventListener('scroll', event !=> {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
});
pattern

19. Flag
let isRequesting = false;
scrollView.addEventListener('scroll', event !=> {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
});
}
});

20. More Flags
let isRequesting = false;
let requestCount = 0;
const scrollHandler = function(event) {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
requestCount = requestCount + 1;
if (requestCount %%=== 3) {
scrollView.removeEventListener('scroll', scrollHandler)
}
})
}
}
scrollView.addEventListener('scroll', scrollHandler);

21. let isRequesting = false;
let requestCount = 0;
const scrollHandler = function(event) {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
requestCount = requestCount + 1;
if (requestCount %%=== 3) {
scrollView.removeEventListener('scroll', scrollHandler)
}
})
}
}
scrollView.addEventListener('scroll', scrollHandler);

22. let isRequesting = false;
let requestCount = 0;
const scrollHandler = function(event) {
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 #&& !isRequesting) {
isRequesting = true;
fetch('url%%...')
.then(res !=> {
#// do something change view
isRequesting = false;
requestCount = requestCount + 1;
if (requestCount %%=== 3) {
scrollView.removeEventListener('scroll', scrollHandler)
}
})
}
}
scrollView.addEventListener('scroll', scrollHandler);
Observable.fromEvent(scrollView, 'scroll')
.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9)
.exhaustMap(() !=> fetch('url%%...'))
.take(3)
.subscribe(res !=> {
#// do something change view
});
VanillaJS RxJS

23. Jerry Hong
Front-End Engineer |
Website: blog.jerry-hong.com
Facebook: J.H.MingChen

24. ObservableObservable

25. What is Observable ?

26. What is Observable ?
Collection+ Time

27. Observable
What is Observable ?

28. var mouseMove = Observable
.fromEvent(DOM, 'mousemove');
observable
var subscription = mouseMove
.subscribe(x !=> console.log(x));
subscription.unsubscribe();

29. Observable.of(2, 3, 4);
Observable.from([2, 3, 4]);
Observable.from(fetch('url'));
Observable.ajax('url');
Observable.fromEvent(DOM, 'click');
Observable.interval(1000);
observable

30. var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 %%=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

31. observable
• Observable
•
• (subscribe)
• operators
var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 %%=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

32. operator
• Observable
•
•
observable ( )
var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 %%=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

33. observer
• observable
• next
error complete
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 %%=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

34. subscription
• observable
•
(unsubscribe)
•
var sub = Observable
.from([1, 2, 3])
.map(x !=> x + 1)
.filter(x !=> x % 2 %%=== 0)
.subscribe({
next: x !=> console.log(x),
error: err !=> {},
complete: () !=> {},
});

36. Marble Diagram
--a--b--c--d--e|

37. Marble Diagram
- (10 frames)
n(0-9/a-z) (next)
| (complete)
# (error)
()
time
----0---1---2---3--
----0---1---2---3｜
----0---1---2---3--#
(123|)

38. Observable.of(1, 2, 3); (123|)

39. Observable.interval(10) --012-01-0-0123-01234-01234..

40. Observable
.fromEvent(DOM, 'click') ---e--ee-e--e-...

41. Observable.interval(10)
.take(3)
.map(x !=> x + 1)
.filter(x !=> x % 2 %%=== 1)
-01234..
-012|
-1-(3|)
-01(2|)
-12(3|)

42. Observable.interval(20) --0-1-2-3-4-5-6-7..
-------e-----------
--0-1-2|
.takeUntil(
Observable
.fromEvent(DOM, 'click')
);

43. Observable
.fromEvent(DOM, 'click')
.map(() !=>
ajax('url%%...'))
.mergeAll();
-----e-e----
-----o-o----
----r|
----r|
---------r-r-

44. Observable
.fromEvent(DOM, 'click')
.mergeMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|
---------r-r-

45. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|
-----------r-

46. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

47. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

48. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

49. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

50. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

51. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

52. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

53. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

54. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
----r|

55. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
--!

56. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
--!

57. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
--!

58. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
--!

59. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
--!

60. Observable
.fromEvent(DOM, 'click')
.switchMap(() !=>
ajax('url%%...'))
-----e-e----
-----o-o----
----r|
--!
-----------r-

61. Observable
.fromEvent(DOM, 'click')
.exhaustMap(() !=>
fetch('url%%...'))
-----e-e----
-----o-o----
----r|
----r|
---------r---

62. Observable.fromEvent(scrollView, 'scroll')
.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9)
.exhaustMap(() !=> fetch('url%%...'))
.take(3)
.subscribe(res !=> {
#// do something change view
});

63. Make Your Code Clean

64. Readable

65. Readable Composable

66. Readable TestableComposable

67. Readable

68. Observable.fromEvent(scrollView, 'scroll')
.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
Observable

69. const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
Assign

70. const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
Operator

71. const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
const scrollOverNinetyPercent = Obs !=>
Obs.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9);
scrollOverNinetyPercent(scroll$)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
Naming Function

72. const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
const scrollOverNinetyPercent = Obs !=>
Obs.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9);
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
let operator

73. const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
const scrollOverNinetyPercent = Obs !=>
Obs.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9);
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
let operator

74. const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scrollOverNinetyPercent
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
const scrollOverNinetyPercent = Obs !=>
Obs.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9);
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
let operator

75. import { scrollOverNinetyPercent } from '%%...';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});

76. import { scrollOverNinetyPercent } from '%%...';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(() !=> fetch('url%%...'))
.subscribe(res !=> {
#// do something change view
});
observable creator

77. import { scrollOverNinetyPercent } from '%%...';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
const getPostObservable = () !=> fetch('url%%...');
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(getPostObservable)
.subscribe(res !=> {
#// do something change view
});
import { scrollOverNinetyPercent } from '%%...';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
getPostObservable
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(getPostObservable)
.subscribe(res !=> {
#// do something change view
});

78. import { scrollOverNinetyPercent } from '%%...';
import { getPostObservable } from 'xxx';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(getPostObservable)
.subscribe(res !=> {
#// do something change view
});

79. const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(getPostObservable)
.subscribe(res !=> {
#// do something change view
});

80. Composable

81. const scrollOverNinetyPercent = Obs !=>
Obs.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > 0.9);

82. const scrollOver = criticalP !=> Obs !=>
Obs.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > criticalP);
Higher Order
Function
const scrollOver = Obs !=>
Obs.map(event !=> event.target)
.map(hasScrolled)
.filter(p !=> p > );

83. const scrollOver = criticalP !=>
pipe(
map(event !=> event.target),
map(hasScroll),
filter(p !=> p > criticalP)
);
lettable operator
import { map, filter } from 'rxjs/operators';

84. import { scrollOverNinetyPercent } from '%%...';
import { getPostObservable } from 'xxx';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.let(scrollOverNinetyPercent)
.exhaustMap(getPostObservable)
.subscribe(res !=> {
#// do something change view
});

85. import { scrollOver } from '%%...';
import { getPostObservable } from 'xxx';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.let(scrollOver(0.9))
.exhaustMap(getPostObservable)
.subscribe(res !=> {
#// do something change view
});

86. pipe
operator
import { scrollOver } from '%%...';
import { getPostObservable } from 'xxx';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.pipe(
scrollOver(0.9),
exhaustMap(getPostObservable)
)
.subscribe(res !=> {
#// do something change view
});
import { scrollOver } from '%%...';
import { getPostObservable } from 'xxx';
import { exhaustMap } from 'rxjs/operators';
const scroll$ = Observable
.fromEvent(scrollView, 'scroll');
scroll$
.pipe(
scrollOver(0.9),
exhaustMap(getPostObservable)
)
.subscribe(res !=> {
#// do something change view
});

87. const getPostObservable = () !=>
Observable.ajax('url%%...');

88. retry 3
const getPostObservable = () !=>
Observable.ajax('url%%...')
.retry(3);

89. const defaultData = { success: false, data: [] };
const getPostObservable = () !=>
Observable.ajax('url%%...')
.retry(3)
.catch(() !=> Observable.of(defaultData));

90. Array
const defaultData = { success: false, data: [] };
const getPostObservable = () !=>
Observable.ajax('url%%...')
.retry(3)
.catch(() !=> [defaultData]);

91. lettable operator
import { retry, catchError } from 'rxjs/operators';
const defaultData = { success: false, data: [] };
const getPostObservable = () !=>
Observable.ajax('url%%...')
.pipe(
retry(3),
catchError(() !=> [defaultData])
);

92. lettable operator
import { retry, catchError } from 'rxjs/operators';
const defaultData = { success: false, data: [] };
const onErrorReturn = defaultData !=>
catchError(() !=> [defaultData]);
const getPostObservable = () !=>
Observable.ajax('url%%...')
.pipe(
retry(3),
onErrorReturn(defaultData)
);

93. import { retry, catchError } from 'rxjs/operators';
onErrorReturn
const defaultData = { success: false, data: [] };
const getPostObservable = () !=>
Observable.ajax('url%%...')
.pipe(
retry(3),
onErrorReturn(defaultData)
);
import { onErrorReturn } from '%%...';

94. Observable

95. Observable is composable

96. (Drag&Drop)
https://dribbble.com/shots/1074817-Drag-Drop-List-GIF

97. mouseDown$

98. mouseDown$
.switchMap(() !=> mouseMove$)
mouseDown$

99. mouseDown$
.switchMap(() !=> mouseMove$)

100. mouseDown$
.switchMap(() !=>
mouseMove$.takeUntil(mouseUp$))

101. mouseDown$
.switchMap(() !=>
mouseMove$.takeUntil(mouseUp$))
.subscribe(value !=> {
#// do something
});

103. mouseClick$

104. mouseClick$
.switchMap(() !=> request$)
mouseClick$

105. mouseClick$
.switchMap(() !=> request$)

106. mouseClick$
.switchMap(() !=>
request$.takeUntil(cancel$))

107. mouseClick$
.switchMap(() !=>
request$.takeUntil(cancel$))
.subscribe(value !=> {
#// do something
});

108. mouseClick$
.switchMap(() !=>
request$.takeUntil(cancel$))
.subscribe(value !=> {
#// do something
});

109. mouseClick$
.switchMap(() !=>
request$.takeUntil(cancel$))
.subscribe(value !=> {
#// do something
});
mouseDown$
.switchMap(() !=>
mouseMove$.takeUntil(mouseUp$))
.subscribe(value !=> {
#// do something
});

110. Testable

111. Testing Asynchronous Code is
Hard

112. Testing Asynchronous Code is Hard
•
•
•
•

116. Testing Asynchronous Code is Hard
•
•
•
•
•

117. Marble Testing

118. Marble Testing
• Marble Diagram
•
• 100%
• RxJS
•

119. Observable.interval(10)
.take(3)
.map(x !=> x + 1)
.filter(x !=> x % 2 %%=== 1)
-01234..
-012|
-1-(3|)
-01(2|)
-12(3|)

120. it('interval', () !=> {
const actual = Observable.interval(10, testScheduler)
.take(3)
.map(x !=> x + 1)
.filter(x !=> x % 2 %%=== 1);
testScheduler.expectObservable(actual)
.toBe('-a-(b|)', { a: 1, b: 3 });
});

121. https://youtu.be/i2A1S9o7ZFQ

122. Programming is thinking, not typing
– Cassey Pottan

123. Be a Programmer, not just a Coder