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

mercury/mithril.js

 mercury/mithril.js

react meetup #1 資料

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

April 24, 2015
Tweet

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 
 ͞ΕΔͱEJSUZqBH͕ ཱͪɺࢠϊʔυ͕࠶ඳըର৅ʹͳΔ

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

  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