海外で注目されてるJs framework “mithril”の特徴
•
38 gefällt mir•16,606 views
mithrilの特徴についてざっくり。 Data Binding JS Night で発表した資料。 http://vuejs-meetup.connpass.com/event/14017/
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie 海外で注目されてるJs framework “mithril”の特徴
Ähnlich wie 海外で注目されてるJs framework “mithril”の特徴 (20)
海外で注目されてるJs framework “mithril”の特徴
- 5. 軽量 v0.11.8 v0.13.2 v1.3.15 v2.0.7 v0.2.0 V3.3.0 v0.7.2Ractive.js -> 162KB AngularJS -> 123KB React -> 119KB Vue.js -> 59KB knockout -> 55KB Mithril -> 19KB Riot -> 9KB 2. Mithrilの特徴①
- 12. 4. Mithrilの特徴③ m.mount(root, module) ⇒ Mithrilで定義したアプリケーションを実行 m.prop() ⇒ getter/setter API m(selector, obj, value) ⇒ VirtualDOMの生成に使用するAPI m.withAttr(prop, callback) ⇒ “onclick”や“onchange”等のイベント発生時に実行する関数を定義す る際に使用 4つの主要API
- 13. 4. Mithrilの特徴③ m.mount var myCtrl = function(){ ~controller処理~ }; var myView = function(ctrl){ return [ m(“div”, “test”), m(“p”, ctrl.description() ) ]; }; m.mount( document.getElementById("root"), { controller: myCtrl, view : myView }); Mithrilで定義したアプリケーションを実行
- 14. 4. Mithrilの特徴③ m.prop var myCtrl = function() { this.name = m.prop("hoge"); console.log( this.name ); // -> function(){...} console.log( this.name() ); // -> "hoge" //change value this.name("fuga"); console.log( this.name() ); // -> "fuga" }; getter/setter API
- 15. 4. Mithrilの特徴③ m m(“br”) => <br> m(“div”, “Hello”) => <div>Hello</div> m("div", {class: "container"}, "Hello"); => <div class="container">Hello</div> m("div.container", "Hello"); => <div class="container">Hello</div> m("div[href='hoge.html']", "Hello"); => <div href="hoge.html">Hello</div> VirtualDOMの生成に使用するAPI
- 16. 4. Mithrilの特徴③ m.withAttr var myCtrl = function() { this.alert = function(value){ alert(value); //click }; } var myView = function(ctrl) { return [ (“button", {onclick: m.withAttr("value", ctrl.alert), value: ”click” } ) ]; } イベントのCallback処理を定義
- 18. 4. Mithrilの特徴③ m.startComputation var myCtrl = function() { var that=this; this.text = m.prop("first"); setTimeout(function(){ m.startComputation(); that.text ( "setTimeout“); m.endComputation(); },2000); }; Viewの描画を行う m.mount、m.route、m.request、event実行処理の内部でも使用されている。 endComputationのタイミングで再描画通知が送信される。
- 19. 4. Mithrilの特徴③ m.redraw var myCtrl = function() { var that=this; this.text = m.prop("first"); setTimeout(function(){ that.text ( "setTimeout“); m.redraw(true); },2000); }; Viewの強制再描画を行う 強制的に再描画通知を送る場合使用。
- 20. 4. Mithrilの特徴③ m.redraw.strategy var myCtrl = function() { var that=this; this.text = m.prop("first"); console.log(m.redraw.strategy()); //-> all m.redraw.strategy("none"); console.log(m.redraw.strategy()); //-> none setTimeout(function(){ that.text ( "setTimeout“); console.log(m.redraw.strategy()); //-> diff m.redraw(true); },2000); }; 描画方法を設定可能 all、diff、noneの3種類。引数省略で取得可能。
- 27. 7. Mithrilの特徴⑤ 0.1.34は気合で作ってくれって内容でしたが… m(“a”, {href: item.url}, item.title)
- 29. 8. Mithrilの特徴⑦ BROWSER ・IE8以下は非対応。 ⇒ es5-shim.min.jsやpolyfill.min.jsを読みこめば使える。 indexOf、map 、keysが内部的に使われている為。 ・pushstateを使う場合は注意。 ⇒ 一部AndroidデフォルトブラウザやIE9以下、OperaMiniで 動かない為。
- 31. END