Slide 1
Slide 1 text
RxJS
The Art of Abstraction
Slide 2
Slide 2 text
Jerry Hong
Tech Leader |
Website: blog.jerry-hong.com
Facebook: J.H.blog.tw
Branch8
2019 ModerWeb speaker
2018 FEDC organiser
2017 JSDC.tw speaker
2017 RxJS 30天鐵⼈人賽冠軍
2016 JSDC.tw speaker
Slide 3
Slide 3 text
What’s RxJS ?
Slide 4
Slide 4 text
Lodash for async
Slide 5
Slide 5 text
⼀一個透過 Observable
組合各種非同步⾏行行為的 Library
Slide 6
Slide 6 text
Why RxJS ?
Slide 7
Slide 7 text
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;
});
}
});
Slide 8
Slide 8 text
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;
});
}
});
無限滾動
Infinite scroll
Slide 9
Slide 9 text
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;
註冊滾動事件
Listen scroll event
Slide 10
Slide 10 text
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;
});
判斷滾動⾼高度
Determine scroll height
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
設定 Flag let isRequesting = false;
scrollView.addEventListener('scroll', event =
const DOM = event.target;
if(hasScrolled(DOM) > 0.9 && !isRequesting)
isRequesting = true;
fetch('url...')
.then(res => {
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
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;
});
}
});
無限滾動
Infinite scroll
Slide 17
Slide 17 text
What’s wrong ?
Slide 18
Slide 18 text
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;
});
}
});
兩兩個非同步⾏行行為
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
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;
});
}
});
Slide 21
Slide 21 text
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);
Slide 22
Slide 22 text
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);
我們⼀一定要寫
這麼醜的程式碼嗎？
Slide 23
Slide 23 text
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);
fromEvent(scrollView, 'scroll')
.pipe(
map(event "=> event.target),
map(hasScrolled),
filter(p "=> p > 0.9),
exhaustMap(() "=> ajax('url""...')),
take(3)
)
.subscribe(res "=> {
"// do something change view
})
VanillaJS RxJS
Slide 24
Slide 24 text
Observable 簡介
Observable 簡介
Slide 25
Slide 25 text
What is Observable ?
Slide 26
Slide 26 text
What is Observable ?
Collection over Time
Slide 27
Slide 27 text
Observable 就像是⼀一個序列列，
裡⾯面的元素會隨著時間推送
What is Observable ?
Slide 28
Slide 28 text
var mouseMove = fromEvent(DOM, 'mousemove');
observable 建立與訂閱
var subscription = mouseMove
.subscribe(x => console.log(x));
subscription.unsubscribe();
Slide 29
Slide 29 text
of(2, 3, 4);
from([2, 3, 4]);
ajax('url');
fromEvent(DOM, 'click');
interval(1000);
建立 observable
Slide 30
Slide 30 text
import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators';
var sub = from([1, 2, 3])
.pipe(
map(x "=> x + 1),
filter(x "=> x % 2 ""=== 0)
);
.subscribe({
next: x "=> console.log(x),
error: err "=> {},
complete: () "=> {},
});
Slide 31
Slide 31 text
observable
• Observable 的物件實例例
• 在未被訂閱之前，只是
個物件，不會有任何
Side Effect
• 可被訂閱(subscribe)
import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators
var sub = from([1, 2, 3])
.pipe(
map(x "=> x + 1),
filter(x "=> x % 2 ""=== 0)
);
.subscribe({
next: x "=> console.log(x),
error: err "=> {},
Slide 32
Slide 32 text
operator
• ⼀一個 function 傳入
observable 回傳
observable
• 可對元素作運算處理理
import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators
var sub = from([1, 2, 3])
.pipe(
map(x "=> x + 1),
filter(x "=> x % 2 ""=== 0)
);
.subscribe({
next: x "=> console.log(x),
error: err "=> {},
complete: () "=> {},
});
Slide 33
Slide 33 text
observer
• ⼀一個 object
• 具有 next, error,
complete
• ⽤用來來訂閱 observable
map(x "=> x + 1),
filter(x "=> x % 2 ""=== 0)
);
.subscribe({
next: x "=> console.log(x),
error: err "=> {},
complete: () "=> {},
});
Slide 34
Slide 34 text
subscription
• observable 訂閱後回傳
的物件
• 可拿來來退訂
(unsubscribe)
• 可以其他 subscription
合併
import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators
var sub = from([1, 2, 3])
.pipe(
map(x "=> x + 1),
filter(x "=> x % 2 ""=== 0)
);
.subscribe({
next: x "=> console.log(x),
error: err "=> {},
complete: () "=> {},
});
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Marble Diagram
--a--b--c--d--e|
Slide 37
Slide 37 text
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|)
Slide 38
Slide 38 text
of(1, 2, 3) (123|)
Slide 39
Slide 39 text
interval(10) -
-012
-01
-0
-0123
-01234
-01234..
Slide 40
Slide 40 text
fromEvent(DOM, 'click') ---e--ee-e--e-...
Slide 41
Slide 41 text
interval(10)
.pipe(
take(3),
map(x "=> x + 1),
filter(x "=> x % 2 ""=== 1)
)
-01234..
-012|
-1-(3|)
-01(2|)
-12(3|)
Slide 42
Slide 42 text
--0-1-2-3-4-5-6-7..
-------e-----------
--0-1-2|
interval(20)
.pipe(
takeUntil(
fromEvent(DOM, 'click')
)
)
Slide 43
Slide 43 text
fromEvent(DOM, 'click')
.pipe(
map(() "=> ajax('url""...'))
mergeAll()
)
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
---------r-r-
Slide 44
Slide 44 text
fromEvent(DOM, 'click')
.pipe(
mergeMap(() "=> ajax('url""...'))
)
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
---------r-r-
Slide 45
Slide 45 text
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
-----------r-
Slide 46
Slide 46 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 47
Slide 47 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 48
Slide 48 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 49
Slide 49 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 50
Slide 50 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 51
Slide 51 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 52
Slide 52 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 53
Slide 53 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 54
Slide 54 text
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 55
Slide 55 text
-----e-e----
-----o-o----
\ \
\ ----r|
--!
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 56
Slide 56 text
-----e-e----
-----o-o----
\ \
\ ----r|
--!
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 57
Slide 57 text
-----e-e----
-----o-o----
\ \
\ ----r|
--!
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 58
Slide 58 text
-----e-e----
-----o-o----
\ \
\ ----r|
--!
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 59
Slide 59 text
-----e-e----
-----o-o----
\ \
\ ----r|
--!
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 60
Slide 60 text
-----e-e----
-----o-o----
\ \
\ ----r|
--!
-----------r-
fromEvent(DOM, 'click')
.pipe(
switchMap(() "=> ajax('url""...'))
);
Slide 61
Slide 61 text
fromEvent(DOM, 'click')
.pipe(
exhaustMap(() "=> ajax('url""...'))
)
-----e-e----
-----o-o----
\ \
\ ----r|
----r|
---------r---
Slide 62
Slide 62 text
fromEvent(scrollView, 'scroll')
.pipe(
map(event "=> event.target),
map(hasScrolled),
filter(p "=> p > 0.9),
exhaustMap(() "=> ajax('url""...')),
take(3)
)
.subscribe(res "=> {
"// do something change view
})
Slide 63
Slide 63 text
Change Your Thoughts
Slide 64
Slide 64 text
Before You Learn RxJS
Slide 65
Slide 65 text
Make a HTTP request
Listen an event
Read a file
Promise
Callback
Stream
Slide 66
Slide 66 text
After You Learn RxJS
Slide 67
Slide 67 text
Make a HTTP request
Listen an events
Read a file
A set of values
A set of values
A set of values
Slide 68
Slide 68 text
A set of values
A set of values
A set of values
Observable
Make a HTTP request
Listen an events
Read a file
Slide 69
Slide 69 text
What’s matter?
Slide 70
Slide 70 text
物件拖拉 Drag&Drop
Drag Drop
Slide 71
Slide 71 text
mouseDown$
Slide 72
Slide 72 text
mouseDown$
mouseDown$.pipe(
switchMap(() "=> mouseMove$))
)
Slide 73
Slide 73 text
mouseDown$.pipe(
switchMap(() "=> mouseMove$))
)
Slide 74
Slide 74 text
mouseDown$.pipe(
switchMap(() "=>
mouseMove$.pipe(takeUntil(mouseUp$))
)
)
Slide 75
Slide 75 text
mouseDown$.pipe(
switchMap(() "=>
mouseMove$.pipe(takeUntil(mouseUp$))
)
)
.subscribe(value "=> {
"// do something
});
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
mouseClick$
Slide 78
Slide 78 text
mouseClick$.pipe(
switchMap(() "=> request$)
)
mouseClick$
Slide 79
Slide 79 text
mouseClick$.pipe(
switchMap(() "=> request$)
)
Slide 80
Slide 80 text
mouseClick$.pipe(
switchMap(() "=>
request$.pipe(takeUntil(cancel$))
)
)
Slide 81
Slide 81 text
mouseClick$.pipe(
switchMap(() "=>
request$.pipe(takeUntil(cancel$))
);
);
.subscribe((value) "=> {
"// do something
})
Slide 82
Slide 82 text
mouseClick$.pipe(
switchMap(() "=>
request$.pipe(takeUntil(cancel$))
);
);
.subscribe((value) "=> {
"// do something
})
Slide 83
Slide 83 text
mouseClick$.pipe(
switchMap(() "=>
request$.pipe(takeUntil(cancel$))
);
);
.subscribe((value) "=> {
"// do something
})
mouseDown$.pipe(
switchMap(() "=>
mouseMove$.pipe(takeUntil(mouseUp$))
)
)
.subscribe(value "=> {
"// do something
});
取消請求 Cancel Request 拖拉 D&D
Slide 84
Slide 84 text
Same Logic, Same Code
Slide 85
Slide 85 text
Everything is set of values
Slide 86
Slide 86 text
HTTP Server
Slide 87
Slide 87 text
Requests -> Responses
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
const helloEffect$: HttpEffect = req$ "=> req$.pipe(
mapTo({ body: 'Hello, world!' }),
);
Slide 90
Slide 90 text
const postUser$ = r.pipe(
r.matchPath('/user'),
r.matchType('POST'),
r.useEffect(req$ "=> req$.pipe(
map(req "=> req.body as User),
mergeMap(Dao.postUser),
map(response "=> ({ body: response }))
)));
Slide 91
Slide 91 text
User Actions
Slide 92
Slide 92 text
Action -> Side Effects
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
const pingEpic = action$ "=> action$.pipe(
filter(action "=> action.type ""=== 'PING'),
delay(1000), "// Asynchronously wait 1000ms then continue
mapTo({ type: 'PONG' })
);
Slide 95
Slide 95 text
const incrementIfOddEpic = (action$, state$) "=> action$.pipe(
ofType(INCREMENT_IF_ODD),
filter(() "=> state$.value.counter % 2 ""=== 1),
map(() "=> increment())
);
Slide 96
Slide 96 text
Rx is cross languages!
Slide 97
Slide 97 text
RxJava RxSwift
RxScala
RxClojure
RxGo
RxPy
Slide 98
Slide 98 text
Thanks
Slide 99
Slide 99 text
Any Questions?