mercury/mithril.js

Transcript

1. mercury / mithril.js @yosuke_furukawa

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

3. ࠓ೔ͷςʔϚ

4. Performance

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

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

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

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

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

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

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

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

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

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

15. ReactͷඳըΞϧΰϦζϜ ঢ়ଶมߋ TFU4UBUF 
 ͞ΕΔͱEJSUZ
    qBH͕
    ཱͪɺࢠϊʔυ͕࠶ඳըର৅ʹͳΔ

16. ReactͷඳըΞϧΰϦζϜ /PEFʹରͯ͠ঢ়ଶมߋ TFU4UBUF 
 ͞ΕΔͱEJSUZ
    qBH͕
    ཱͪɺࢠϊʔυશ͕ͯ࠶ඳըର৅ʹ ͳΔ

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

18. mithrilͷΞϓϩʔν

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

20. var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();

    }, 1000); }; mithrilͷΞϓϩʔν

21. var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();

    }, 1000); }; mithrilͷΞϓϩʔν counter: 0

22. var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();

    }, 1000); }; mithrilͷΞϓϩʔν counter: 1 TUBSU$PNQVUBUJPOͰ࠶ඳ ըΧ΢ϯλΛ܁Γ্͛

23. var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();

    }, 1000); }; mithrilͷΞϓϩʔν counter: 0 FOE$PNQVUBUJPOͰ࠶ඳը Χ΢ϯλΛԼ͛Δ

24. var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();

    }, 1000); }; mithrilͷΞϓϩʔν counter: 0 ࠶ඳըΧ΢ϯλ͕ʹͳͬ ͨΒ࠶ඳըΛ࣮ߦ

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ͷΞϓϩʔν ඇಉظॲཧ͕ෳ਺ճ࣮ߦ͞Εͨ࣌Ͱ͋ͬͯ΋ɺ ࠶ඳըΛ࠷ޙ·Ͱ଴ͨͤΔ͜ͱ͕Ͱ͖Δɻ

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

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

28. mercuryͷΞϓϩʔν

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

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

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

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) { ... } શؔ͘܎ͷͳ͍ྖҬΛ୳ࡧ͢Δ͜ͱΛͳ͘͢ (ͳΜ͔ͪΐͬͱ໭ͬͨײ…)

33. ͭ·Γ

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

    ྑ͍͔΋ɻ

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