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

mercury/mithril.js

 mercury/mithril.js

react meetup #1 資料

Yosuke Furukawa
PRO

April 24, 2015
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. mercury / mithril.js
    @yosuke_furukawa

    View Slide

  2. @yosuke_furukawa
    Node.jsϢʔβʔάϧʔϓ୅ද / DeNAॴଐ

    View Slide

  3. ࠓ೔ͷςʔϚ

    View Slide

  4. Performance

    View Slide

  5. Introduction To React (@hokaccha)
    https://speakerdeck.com/hokaccha/introduction-to-react

    View Slide

  6. Introduction To React (@hokaccha)
    https://speakerdeck.com/hokaccha/introduction-to-react
    3FBDUࣗ਎͸ͦ
    Μͳʹ଎͘ͳ͍
    #BDLCPOFͰ෦෼࠶ඳ
    ը͢Δํ͕଎͍

    View Slide

  7. ຊ౰ͷͱ͜ΖͲ͏ͩΖ͏͔

    View Slide

  8. lhorie TodoMVC Peformance
    http://lhorie.github.io/todomvc-perf-comparison/todomvc-benchmark/

    View Slide

  9. lhorie TodoMVC Peformance
    http://lhorie.github.io/todomvc-perf-comparison/todomvc-benchmark/
    ͔֬ʹͦ͜·Ͱ
    ଎͘ͳ͍

    View Slide

  10. lhorie TodoMVC Peformance
    http://lhorie.github.io/todomvc-perf-comparison/todomvc-benchmark/
    ͔֬ʹͦ͜·Ͱ
    ଎͘ͳ͍
    .FSDVSZ
    .JUISJM

    View Slide

  11. ReactΑΓ΋ߴ଎ͳ
    mercuryͱmithril͸Ͳ͏͍͏
    ߟ͑ํͰߴ଎Խ͍ͯ͠Δͷ͔

    View Slide

  12. ReactͷඳըΞϧΰϦζϜ

    View Slide

  13. ReactͷඳըΞϧΰϦζϜ
    Before After
    ֤૚͝ͱʹ Node ͷมߋ͕ଘࡏ͢Δ͔֬ೝ͢Δ
    (Level By Level diff)

    View Slide

  14. ReactͷඳըΞϧΰϦζϜ
    Before After
    ҰͭҰͭͷNodeʹ͸ID͕ৼΒΕ͓ͯΓɺͦͷIDΛݩ
    ʹॱংͷಉҰੑɺ಺༰ͷࠩ෼ΛݟͯdiffΛ஌Δ
    ID
    ID ID ID
    ID ID ID ID ID
    ID ID ID ID ID ID ID ID ID ID
    ID ID ID ID
    ID ID ID
    ID

    View Slide

  15. ReactͷඳըΞϧΰϦζϜ
    ঢ়ଶมߋ TFU4UBUF

    ͞ΕΔͱEJSUZqBH͕
    ཱͪɺࢠϊʔυ͕࠶ඳըର৅ʹͳΔ

    View Slide

  16. ReactͷඳըΞϧΰϦζϜ
    /PEFʹରͯ͠ঢ়ଶมߋ TFU4UBUF

    ͞ΕΔͱEJSUZqBH͕
    ཱͪɺࢠϊʔυશ͕ͯ࠶ඳըର৅ʹ
    ͳΔ

    View Slide

  17. ReactͷඳըΞϧΰϦζϜ
    ࢠϊʔυͷҰ෦͸࠶ඳըͤͨ͘͞ͳ
    ͍৔߹͸
    TIPVME$PNQPOFOU6QEBUFΛ࢖͑
    ͹࠶ඳը͠ͳ͘ͳΔɻ

    View Slide

  18. mithrilͷΞϓϩʔν

    View Slide

  19. ࠶ඳըͷܭࢉճ਺ΛݮΒ͢

    View Slide

  20. var doStuff = function() {
    m.startComputation();
    setTimeout(function() {
    console.log("hello");
    m.endComputation();
    }, 1000);
    };
    mithrilͷΞϓϩʔν

    View Slide

  21. var doStuff = function() {
    m.startComputation();
    setTimeout(function() {
    console.log("hello");
    m.endComputation();
    }, 1000);
    };
    mithrilͷΞϓϩʔν
    counter: 0

    View Slide

  22. var doStuff = function() {
    m.startComputation();
    setTimeout(function() {
    console.log("hello");
    m.endComputation();
    }, 1000);
    };
    mithrilͷΞϓϩʔν
    counter: 1
    TUBSU$PNQVUBUJPOͰ࠶ඳ
    ըΧ΢ϯλΛ܁Γ্͛

    View Slide

  23. var doStuff = function() {
    m.startComputation();
    setTimeout(function() {
    console.log("hello");
    m.endComputation();
    }, 1000);
    };
    mithrilͷΞϓϩʔν
    counter: 0
    FOE$PNQVUBUJPOͰ࠶ඳը
    Χ΢ϯλΛԼ͛Δ

    View Slide

  24. var doStuff = function() {
    m.startComputation();
    setTimeout(function() {
    console.log("hello");
    m.endComputation();
    }, 1000);
    };
    mithrilͷΞϓϩʔν
    counter: 0
    ࠶ඳըΧ΢ϯλ͕ʹͳͬ
    ͨΒ࠶ඳըΛ࣮ߦ

    View Slide

  25. var doStuff = function() {
    m.startComputation();
    jQuery.ajax("/something").done(function() {
    doStuff();
    jQuery.ajax("/another").done(function() {
    doMoreStuff();
    jQuery.ajax("/more").done(function() {
    if (callback) callback();
    m.endComputation();
    });
    });
    });
    };
    mithrilͷΞϓϩʔν
    ඇಉظॲཧ͕ෳ਺ճ࣮ߦ͞Εͨ࣌Ͱ͋ͬͯ΋ɺ
    ࠶ඳըΛ࠷ޙ·Ͱ଴ͨͤΔ͜ͱ͕Ͱ͖Δɻ

    View Slide

  26. setInterval(function(){
    m.redraw(true);
    counter++;
    }, 100);
    mithrilͷΞϓϩʔν
    ஞ࣍తʹ࠶ඳըΛ͍ͨ͠৔߹͸ redrawΛ໌ࣔత
    ʹݺͿ

    View Slide

  27. ͪͳΈʹ mithrilͷৄࡉ͸
    @shibu_jp
    ͕ৄ͘͠ڭ͑ͯ͘Ε·ͨ͠ɻ

    View Slide

  28. mercuryͷΞϓϩʔν

    View Slide

  29. ࠶ඳըճ਺ΛݮΒ͢
    &
    vdom treeͷ୳ࡧൣғΛݮΒ͢

    View Slide

  30. ࠶ඳըճ਺ΛݮΒ͢
    &
    vdom treeͷ୳ࡧൣғΛݮΒ͢
    vdom-thunk

    View Slide

  31. VDOM ͷ tree ͷ୳ࡧൣғΛݶ
    ఆ͢Δ
    QBSUJBMΛ࡞ͬͯͦ͜ҎԼΛݟΔɻ
    IFBEFSʹؔ܎͕͋ΔͳΒͦ͜
    ҎԼ͔͠ݟͳ͍

    View Slide

  32. VDOM ͷ tree ͷ୳ࡧൣғΛݶ
    ఆ͢Δ
    var Thunk = require("vdom-thunk")
    function render(state) {
    return h('div', [
    Thunk(header, state.head), // headͷঢ়ଶ͕มΘͬͨΒheader͚ͩݟΔ
    main(),
    Thunk(footer, state.foot) // footͷঢ়ଶ͕มΘͬͨΒfooter͚ͩݟΔ
    ])
    }
    function header(head) { ... }
    function main() { ... }
    function footer(foot) { ... }
    શؔ͘܎ͷͳ͍ྖҬΛ୳ࡧ͢Δ͜ͱΛͳ͘͢
    (ͳΜ͔ͪΐͬͱ໭ͬͨײ…)

    View Slide

  33. ͭ·Γ

    View Slide

  34. ·ͱΊ
    • React͕΍ͬͯΔ͜ͱ͸ઃܭͱੑೳͷڞଘ
    • ͞ΒʹੑೳΛ্͛Δࣄ΋Ͱ͖Δɻ
    • ͨͩ͠ɺ1ͭ௿͍ϨΠϠʔͰͷॲཧ͕ٻΊΒΕΔɻ
    • ReactͰ஗͍ͱײ͡ΔΑ͏ͳϦονͳ΢ΣϒΞϓϦ
    έʔγϣϯΛ࡞Γ͍ͨͳΒmercury/mithrilΛࢼ͢ͷ΋
    ྑ͍͔΋ɻ

    View Slide

  35. see also
    • http://calendar.perfplanet.com/2013/diff/
    • https://github.com/Raynos/mercury
    • http://lhorie.github.io/todomvc-perf-
    comparison/todomvc-benchmark/
    • http://lhorie.github.io/mithril/
    • @shibu_jp

    View Slide