Tweet
Tweet

Slide 1

Slide 1 text

mercury / mithril.js @yosuke_furukawa

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࠓ೔ͷςʔϚ

Slide 4

Slide 4 text

Performance

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ReactͷඳըΞϧΰϦζϜ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

mithrilͷΞϓϩʔν

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

mercuryͷΞϓϩʔν

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

ͭ·Γ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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