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

User Timing API with React Redux

Kento TSUJI
October 15, 2018
200

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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    > require(‘perf_hooks’).performance

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. ͜Μͳײ͡ͰݟΕΔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. maxmellon/redux-action-timing-middleware

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

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

    View full-size slide

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

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

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

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

    View full-size slide

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

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

    View full-size slide