User Timing API with React Redux

- What is User Timing
- User Timing in React
- User Timing in Redux

Transcript

1. User Timing API
   with React Redux
   @maxmellon / Kento TSUJI
   

   View Slide

2. ࣗݾ঺հ
   • Github: @maxmellon
   • Twitter: @maxmellon_9039
   • ޷෺: ͏ͲΜ, Vim, pipeline-operator
   

   View Slide

3. User Timing API
   ࢖ͬͯ·͔͢ʁ
   

   View Slide

4. User Timing API ͱ͸
   • ύϑΥʔϚϯεΛܭଌ͢ΔͨΊͷ API
   • ͋Δ఺͔Β͋Δ఺·Ͱͷॲཧ͕࣌ؒݟΕΔ
   • Node ʹ΋͋Δ

   > require(‘perf_hooks’).performance
   

   View Slide

5. How to use
   

   View Slide

6. performance.mark(‘A’)
   doSomeThing()
   performance.mark(‘B’)
   preformance.measure(‘A-B’, ‘A’, ‘B’)
   ࢖͍ํ
   • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
   • ܭଌ͍ͨ͠લޙͰ mark()
   • measure(, , ) Ͱܭଌ
   

   View Slide

7. performance.mark(‘A’)
   doSomeThing()
   performance.mark(‘B’)
   preformance.measure(‘A-B’, ‘A’, ‘B’)
   ࢖͍ํ
   • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
   • ܭଌ͍ͨ͠લޙͰ mark()
   • measure(, , ) Ͱܭଌ
   

   View Slide

8. performance.mark(‘A’)
   doSomeThing()
   performance.mark(‘B’)
   preformance.measure(‘A-B’, ‘A’, ‘B’)
   ࢖͍ํ
   • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
   • ܭଌ͍ͨ͠લޙͰ mark()
   • measure(, , ) Ͱܭଌ
   

   View Slide

9. performance.mark(‘A’)
   doSomeThing()
   performance.mark(‘B’)
   preformance.mesure(‘A-B’, ‘A’, ‘B’)
   ࢖͍ํ
   • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
   • ܭଌ͍ͨ͠લޙͰ mark()
   • measure(, , ) Ͱܭଌ
   ͜ͷίʔυΛ௥هͯ͠
   %FW5PPMTͰ
   ύϑΥʔϚϯεΛܭଌ͢Δ
   

   View Slide

10. View Slide

11. ͜Μͳײ͡ͰݟΕΔ
    

    View Slide

12. React ʹ͓͚Δ User Timing
    • React16 ͔Β react-addons-perf ͕࢖͑ͳ͍
    • ୅ΘΓʹ User Timing API ͕ར༻͞Εͨ
    • ։ൃ؀ڥͰ͸໌ࣔతʹ mark ͠ͳͯ͘΋ OK
    

    View Slide

13. View Slide

14. Redux Ͱ΋
    ͜ΕΛ͏·͘࢖͍͍ͨ
    

    View Slide

15. maxmellon/redux-action-timing-middleware
    

    View Slide

16. ࢖͍ํ͸ͱͯ΋γϯϓϧ
    

    View Slide

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)))
    }
    

    View Slide

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଍͚ͩ͢
    

    View Slide

19. View Slide

20. View Slide

21. "DUJPO͕%JTQBUDI͞Ε͔ͯΒ
    SFOEFS͕ऴΘΔ·Ͱͷ
    ͕࣌ؒΘ͔Δ
    

    View Slide

22. خ͍͜͠ͱ
    • ॏ͍ΞΫγϣϯɺ͍ܰΞΫγϣϯ͕෼ผՄೳ

    ˠ ΑΓϘτϧωοΫͷେ͖͍Օॴ͔Βमਖ਼
    • React Component ͕஗͍ͷ͔ɼ

    reducer ͕஗͍ͷ͔ɼ੾Γ෼͚Ͱ͖Δ

    ˠ ΄ͱΜͲͷՄೳੑͰ Component ͕஗͍
    

    View Slide

23. ·ͱΊ
    • User Timing API ͸͘͢͝γϯϓϧ
    • React16 ͔Β User Timing API ϕʔε
    • Redux ͷ middleware Ͱ 

    Actionͷ࣌ؒΛݟΔ͜ͱͰͱͯ΋ศར
    

    View Slide