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

User Timing API with React Redux

Kento TSUJI
October 15, 2018
190

User Timing API with React Redux

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

Kento TSUJI

October 15, 2018
Tweet

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