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

mercury/mithril.js

 mercury/mithril.js

react meetup #1 資料

Yosuke Furukawa

April 24, 2015
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

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

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

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

    }, 1000); }; mithrilͷΞϓϩʔν counter: 0 ࠶ඳըΧ΢ϯλ͕ʹͳͬ ͨΒ࠶ඳըΛ࣮ߦ
  4. 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ͷΞϓϩʔν ඇಉظॲཧ͕ෳ਺ճ࣮ߦ͞Εͨ࣌Ͱ͋ͬͯ΋ɺ ࠶ඳըΛ࠷ޙ·Ͱ଴ͨͤΔ͜ͱ͕Ͱ͖Δɻ
  5. 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) { ... } શؔ͘܎ͷͳ͍ྖҬΛ୳ࡧ͢Δ͜ͱΛͳ͘͢ (ͳΜ͔ͪΐͬͱ໭ͬͨײ…)