mercury/mithril.js

react meetup #1 資料

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