User Timing API with React Redux

2018/10/12 フューチャーアーキテクトとのLTバトルでの、辻（@maxmellon）の講演資料になります

Transcript

1. User Timing API with React Redux @maxmellon / Kento TSUJI
2. ࣗݾ঺հ • Github: @maxmellon • Twitter: @maxmellon_9039 • ޷෺: ͏ͲΜ, Vim, pipeline-operator
3. User Timing API ࢖ͬͯ·͔͢ʁ
4. User Timing API ͱ͸ • ύϑΥʔϚϯεΛܭଌ͢ΔͨΊͷ API • ͋Δ఺͔Β͋Δ఺·Ͱͷॲཧ͕࣌ؒݟΕΔ • Node ʹ΋͋Δ
 > require(‘perf_hooks’).performance
5. How to use
6. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹ • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
7. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹ • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
8. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.measure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹ • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ
9. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.mesure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹ • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ ͜ͷίʔυΛ௥هͯ͠
   %FW
   5PPMT
   Ͱ
   ύϑΥʔϚϯεΛܭଌ͢Δ
11. ͜Μͳײ͡ͰݟΕΔ
12. React ʹ͓͚Δ User Timing • React16 ͔Β react-addons-perf ͕࢖͑ͳ͍ • ୅ΘΓʹ User Timing API ͕ར༻͞Εͨ • ։ൃ؀ڥͰ͸໌ࣔతʹ mark ͠ͳͯ͘΋ OK
14. Redux Ͱ΋ ͜ΕΛ͏·͘࢖͍͍ͨ
15. maxmellon/redux-action-timing-middleware
16. ࢖͍ํ͸ͱͯ΋γϯϓϧ
17. 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))) }
18. 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
    ଍͚ͩ͢
21. "DUJPO
    ͕
    %JTQBUDI͞Ε͔ͯΒ
    
    SFOEFS͕ऴΘΔ·Ͱͷ
    ͕࣌ؒΘ͔Δ
22. خ͍͜͠ͱ • ॏ͍ΞΫγϣϯɺ͍ܰΞΫγϣϯ͕෼ผՄೳ
 ˠ ΑΓϘτϧωοΫͷେ͖͍Օॴ͔Βमਖ਼ • React Component ͕஗͍ͷ͔ɼ
 reducer ͕஗͍ͷ͔ɼ੾Γ෼͚Ͱ͖Δ
 ˠ ΄ͱΜͲͷՄೳੑͰ Component ͕஗͍
23. ·ͱΊ • User Timing API ͸͘͢͝γϯϓϧ • React16 ͔Β User Timing API ϕʔε • Redux ͷ middleware Ͱ 
 Actionͷ࣌ؒΛݟΔ͜ͱͰͱͯ΋ศར