Upgrade to Pro — share decks privately, control downloads, hide ads and more …

User Timing API with React Redux

User Timing API with React Redux

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

Eea9a05e6e222a3d50c73f54a49fadf4?s=128

Recruit Technologies

October 12, 2018
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

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>) Ͱܭଌ ͜ͷίʔυΛ௥هͯ͠ %FW5PPMTͰ ύϑΥʔϚϯεΛܭଌ͢Δ
  10. None
  11. ͜Μͳײ͡ͰݟΕΔ

  12. React ʹ͓͚Δ User Timing • React16 ͔Β react-addons-perf ͕࢖͑ͳ͍ •

    ୅ΘΓʹ User Timing API ͕ར༻͞Εͨ • ։ൃ؀ڥͰ͸໌ࣔతʹ mark ͠ͳͯ͘΋ OK
  13. None
  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଍͚ͩ͢
  19. None
  20. None
  21. "DUJPO͕%JTQBUDI͞Ε͔ͯΒ SFOEFS͕ऴΘΔ·Ͱͷ ͕࣌ؒΘ͔Δ

  22. خ͍͜͠ͱ • ॏ͍ΞΫγϣϯɺ͍ܰΞΫγϣϯ͕෼ผՄೳ
 ˠ ΑΓϘτϧωοΫͷେ͖͍Օॴ͔Βमਖ਼ • React Component ͕஗͍ͷ͔ɼ
 reducer

    ͕஗͍ͷ͔ɼ੾Γ෼͚Ͱ͖Δ
 ˠ ΄ͱΜͲͷՄೳੑͰ Component ͕஗͍
  23. ·ͱΊ • User Timing API ͸͘͢͝γϯϓϧ • React16 ͔Β User

    Timing API ϕʔε • Redux ͷ middleware Ͱ 
 Actionͷ࣌ؒΛݟΔ͜ͱͰͱͯ΋ศར