Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
mercury/mithril.js
Yosuke Furukawa
PRO
April 24, 2015
Programming
14
9.3k
mercury/mithril.js
react meetup #1 資料
Yosuke Furukawa
PRO
April 24, 2015
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
yosuke_furukawa
PRO
13
3.6k
yosuke_furukawa
PRO
3
1.6k
yosuke_furukawa
PRO
69
21k
yosuke_furukawa
PRO
0
2.1k
yosuke_furukawa
PRO
0
75
yosuke_furukawa
PRO
0
32
yosuke_furukawa
PRO
0
2.1k
yosuke_furukawa
PRO
23
13k
yosuke_furukawa
PRO
2
320
Other Decks in Programming
See All in Programming
77web
4
1.4k
nauleyco
0
200
dictoss
0
160
shigeruoda
0
460
shin1x1
0
580
wasabeef
1
560
nbkouhou
0
760
asumikan
0
280
o0h
1
1.4k
xrdnk
0
130
line_developers_tw
0
350
komagata
1
1.8k
Featured
See All Featured
lara
16
2.6k
eileencodes
113
25k
orderedlist
PRO
329
35k
davidbonilla
69
3.5k
trishagee
20
2k
chriscoyier
499
130k
3n
163
22k
hannesfritz
27
930
searls
204
35k
chriscoyier
780
240k
bryan
30
3.3k
frogandcode
127
20k
Transcript
mercury / mithril.js @yosuke_furukawa
@yosuke_furukawa Node.jsϢʔβʔάϧʔϓද / DeNAॴଐ
ࠓͷςʔϚ
Performance
Introduction To React (@hokaccha) https://speakerdeck.com/hokaccha/introduction-to-react
Introduction To React (@hokaccha) https://speakerdeck.com/hokaccha/introduction-to-react 3FBDUࣗͦ Μͳʹ͘ͳ͍ #BDLCPOFͰ෦࠶ඳ ը͢Δํ͕͍
ຊͷͱ͜ΖͲ͏ͩΖ͏͔
lhorie TodoMVC Peformance http://lhorie.github.io/todomvc-perf-comparison/todomvc-benchmark/
lhorie TodoMVC Peformance http://lhorie.github.io/todomvc-perf-comparison/todomvc-benchmark/ ͔֬ʹͦ͜·Ͱ ͘ͳ͍
lhorie TodoMVC Peformance http://lhorie.github.io/todomvc-perf-comparison/todomvc-benchmark/ ͔֬ʹͦ͜·Ͱ ͘ͳ͍ .FSDVSZ .JUISJM
ReactΑΓߴͳ mercuryͱmithrilͲ͏͍͏ ߟ͑ํͰߴԽ͍ͯ͠Δͷ͔
ReactͷඳըΞϧΰϦζϜ
ReactͷඳըΞϧΰϦζϜ Before After ֤͝ͱʹ Node ͷมߋ͕ଘࡏ͢Δ͔֬ೝ͢Δ (Level By Level diff)
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
ReactͷඳըΞϧΰϦζϜ ঢ়ଶมߋ TFU4UBUF ͞ΕΔͱEJSUZqBH͕ ཱͪɺࢠϊʔυ͕࠶ඳըରʹͳΔ
ReactͷඳըΞϧΰϦζϜ /PEFʹରͯ͠ঢ়ଶมߋ TFU4UBUF ͞ΕΔͱEJSUZqBH͕ ཱͪɺࢠϊʔυશ͕ͯ࠶ඳըରʹ ͳΔ
ReactͷඳըΞϧΰϦζϜ ࢠϊʔυͷҰ෦࠶ඳըͤͨ͘͞ͳ ͍߹ TIPVME$PNQPOFOU6QEBUFΛ͑ ࠶ඳը͠ͳ͘ͳΔɻ
mithrilͷΞϓϩʔν
࠶ඳըͷܭࢉճΛݮΒ͢
var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();
}, 1000); }; mithrilͷΞϓϩʔν
var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();
}, 1000); }; mithrilͷΞϓϩʔν counter: 0
var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();
}, 1000); }; mithrilͷΞϓϩʔν counter: 1 TUBSU$PNQVUBUJPOͰ࠶ඳ ըΧϯλΛ܁Γ্͛
var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();
}, 1000); }; mithrilͷΞϓϩʔν counter: 0 FOE$PNQVUBUJPOͰ࠶ඳը ΧϯλΛԼ͛Δ
var doStuff = function() { m.startComputation(); setTimeout(function() { console.log("hello"); m.endComputation();
}, 1000); }; mithrilͷΞϓϩʔν counter: 0 ࠶ඳըΧϯλ͕ʹͳͬ ͨΒ࠶ඳըΛ࣮ߦ
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ͷΞϓϩʔν ඇಉظॲཧ͕ෳճ࣮ߦ͞Εͨ࣌Ͱ͋ͬͯɺ ࠶ඳըΛ࠷ޙ·ͰͨͤΔ͜ͱ͕Ͱ͖Δɻ
setInterval(function(){ m.redraw(true); counter++; }, 100); mithrilͷΞϓϩʔν ஞ࣍తʹ࠶ඳըΛ͍ͨ͠߹ redrawΛ໌ࣔత ʹݺͿ
ͪͳΈʹ mithrilͷৄࡉ @shibu_jp ͕ৄ͘͠ڭ͑ͯ͘Ε·ͨ͠ɻ
mercuryͷΞϓϩʔν
࠶ඳըճΛݮΒ͢ & vdom treeͷ୳ࡧൣғΛݮΒ͢
࠶ඳըճΛݮΒ͢ & vdom treeͷ୳ࡧൣғΛݮΒ͢ vdom-thunk
VDOM ͷ tree ͷ୳ࡧൣғΛݶ ఆ͢Δ QBSUJBMΛ࡞ͬͯͦ͜ҎԼΛݟΔɻ IFBEFSʹ͕ؔ͋ΔͳΒͦ͜ ҎԼ͔͠ݟͳ͍
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) { ... } શؔ͘ͷͳ͍ྖҬΛ୳ࡧ͢Δ͜ͱΛͳ͘͢ (ͳΜ͔ͪΐͬͱͬͨײ…)
ͭ·Γ
·ͱΊ • React͕ͬͯΔ͜ͱઃܭͱੑೳͷڞଘ • ͞ΒʹੑೳΛ্͛ΔࣄͰ͖Δɻ • ͨͩ͠ɺ1͍ͭϨΠϠʔͰͷॲཧ͕ٻΊΒΕΔɻ • ReactͰ͍ͱײ͡ΔΑ͏ͳϦονͳΣϒΞϓϦ έʔγϣϯΛ࡞Γ͍ͨͳΒmercury/mithrilΛࢼ͢ͷ
ྑ͍͔ɻ
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