Slide 1
Slide 1 text
User Timing API
with React Redux
@maxmellon / Kento TSUJI
Slide 2
Slide 2 text
ࣗݾհ
• Github: @maxmellon
• Twitter: @maxmellon_9039
• : ͏ͲΜ, Vim, pipeline-operator
Slide 3
Slide 3 text
User Timing API
ͬͯ·͔͢ʁ
Slide 4
Slide 4 text
User Timing API ͱ
• ύϑΥʔϚϯεΛܭଌ͢ΔͨΊͷ API
• ͋Δ͔Β͋Δ·Ͱͷॲཧ͕࣌ؒݟΕΔ
• Node ʹ͋Δ
> require(‘perf_hooks’).performance
Slide 5
Slide 5 text
How to use
Slide 6
Slide 6 text
performance.mark(‘A’)
doSomeThing()
performance.mark(‘B’)
preformance.measure(‘A-B’, ‘A’, ‘B’)
͍ํ
• doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠߹
• ܭଌ͍ͨ͠લޙͰ mark()
• measure(, , ) Ͱܭଌ
Slide 7
Slide 7 text
performance.mark(‘A’)
doSomeThing()
performance.mark(‘B’)
preformance.measure(‘A-B’, ‘A’, ‘B’)
͍ํ
• doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠߹
• ܭଌ͍ͨ͠લޙͰ mark()
• measure(, , ) Ͱܭଌ
Slide 8
Slide 8 text
performance.mark(‘A’)
doSomeThing()
performance.mark(‘B’)
preformance.measure(‘A-B’, ‘A’, ‘B’)
͍ํ
• doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠߹
• ܭଌ͍ͨ͠લޙͰ mark()
• measure(, , ) Ͱܭଌ
Slide 9
Slide 9 text
performance.mark(‘A’)
doSomeThing()
performance.mark(‘B’)
preformance.mesure(‘A-B’, ‘A’, ‘B’)
͍ํ
• doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠߹
• ܭଌ͍ͨ͠લޙͰ mark()
• measure(, , ) Ͱܭଌ
͜ͷίʔυΛهͯ͠
%FW5PPMTͰ
ύϑΥʔϚϯεΛܭଌ͢Δ
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
͜Μͳײ͡ͰݟΕΔ
Slide 12
Slide 12 text
React ʹ͓͚Δ User Timing
• React16 ͔Β react-addons-perf ͕͑ͳ͍
• ΘΓʹ User Timing API ͕ར༻͞Εͨ
• ։ൃڥͰ໌ࣔతʹ mark ͠ͳͯ͘ OK
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Redux Ͱ
͜ΕΛ͏·͍͍ͨ͘
Slide 15
Slide 15 text
maxmellon/redux-action-timing-middleware
Slide 16
Slide 16 text
͍ํͱͯγϯϓϧ
Slide 17
Slide 17 text
redux-action-timing-middleware
import { applyMiddleware, compose, createStore } from "redux";
import actionTiming from 'redux-action-timing-middleware'
export default (reducer, initialState) => {
const middlewares = [
// Please set first args, If you use only development
// Please put top in middleware list if marking middleware action
actionTiming(process.env.NODE_ENV === 'development'),
middlewareA,
middlewareB,
]
const store =
createStore(reducer,initialState,compose(applyMiddleware(...middlewares)))
}
Slide 18
Slide 18 text
redux-action-timing-middleware
import { applyMiddleware, compose, createStore } from "redux";
import actionTiming from 'redux-action-timing-middleware'
export default (reducer, initialState) => {
const middlewares = [
// Please set first args, If you use only development
// Please put top in middleware list if marking middleware action
actionTiming(process.env.NODE_ENV === 'development'),
middlewareA,
middlewareB,
]
const store =
createStore(reducer,initialState,compose(applyMiddleware(...middlewares)))
}
NJEEMFXBSF͚ͩ͢
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
"DUJPO͕%JTQBUDI͞Ε͔ͯΒ
SFOEFS͕ऴΘΔ·Ͱͷ
͕࣌ؒΘ͔Δ
Slide 22
Slide 22 text
خ͍͜͠ͱ
• ॏ͍ΞΫγϣϯɺ͍ܰΞΫγϣϯ͕ผՄೳ
ˠ ΑΓϘτϧωοΫͷେ͖͍Օॴ͔Βमਖ਼
• React Component ͕͍ͷ͔ɼ
reducer ͕͍ͷ͔ɼΓ͚Ͱ͖Δ
ˠ ΄ͱΜͲͷՄೳੑͰ Component ͕͍
Slide 23
Slide 23 text
·ͱΊ
• User Timing API ͘͢͝γϯϓϧ
• React16 ͔Β User Timing API ϕʔε
• Redux ͷ middleware Ͱ
Actionͷ࣌ؒΛݟΔ͜ͱͰͱͯศར