海外で注目されてるJs framework “mithril”の特徴

Transcript

• 1. 海外で注目されてるJS Framework “Mithril”の特徴
• 2. 姜勝陽 ・JSER 3年目の駆け出し。 ・趣味SEO対策。Analyticsを眺めること。 ・ハングルが下手な韓国人ですｗ Shoyo kyo @shoyo_kyo
• 3. 本日のお話 Mithrilの 特徴について まきでザックリ 語ります
• 4. 1. Mithrilとは VirtualDOM を採用した データバインディング型 JavaScript Framework 2015/05/01 v0.2.0
• 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の特徴①
• 6. 3. Mithrilの特徴② 高速
• 7. 3. Mithrilの特徴② https://github.com/pygy/todomvc-perf-comparison 念の為、下記のTODOテストも参考
• 8. 3. Mithrilの特徴② todomvc-perfとは（ザックリ） 各フレームワークでTodoアプリを作り、 各処理の実行速度の合計を計測 総合的な速度を計測するのに適している
• 9. 3. Mithrilの特徴② ・50アイテム追加 ・全アイテムに チェックを入れる ・全アイテムを削 除する todomvc-perfとは（ザックリ）
• 10. 3. Mithrilの特徴② バージョンやブラウザの問題はあるが パフォーマンスは速めの認識でOK
• 11. 4. Mithrilの特徴③ 学習コスト低め ・APIは15個と少なめ。主要APIは4つ。 ・サードパーティ製ライブラリが不要に思えるほど 最低限、欲しい機能は揃ってる。 ・私はMithrilがキッカケでVirtualDomをはじめましたｗ
• 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処理を定義
• 17. 4. Mithrilの特徴③ 結構使いそうな レンダリング通知系 API
• 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種類。引数省略で取得可能。
• 21. 5. Mithrilの特徴④ サードパーティ製 ライブラリも使える ・Domレンダリング後に処理の実行が可能 ・jQueryUIやflipsnapを実行する事も可能 参考：http://stackoverflow.com/questions/27139920/how- does-mithril-and-jquery-interact-with-each-other
• 22. 5. Mithrilの特徴④ Configに設定した関数はレンダリング後に実行される ので、jquery.ui.datepickerも利用可能。
• 23. 6. Mithrilの特徴⑤ JSXならぬMSX コンパイラあり！ ・gruntやgulpで使えるMSXコンパイラが用意されている。 https://github.com/insin/msx ・grunt-msxに関しては、旧バージョンのMSXの為注意。
• 24. 6. Mithrilの特徴⑤ JSX形式で記載後、MSXを使いコンパイルを行うと…
• 25. 6. Mithrilの特徴⑤ Mithrilの関数に変換してくれます。 end
• 26. 7. Mithrilの特徴⑥ コンポーネント形式でも 書けます Reactの様にコンポーネント前提でAPIが用意されてるわけではあ りませんが、returnで描画するDomを返すことで対応可能です。 Mithril 0.2.0からコンポーネント使えるようになりました。
• 27. 7. Mithrilの特徴⑤ 0.1.34は気合で作ってくれって内容でしたが… m(“a”, {href: item.url}, item.title)
• 28. 7. Mithrilの特徴⑤ 0.2.0からm.componentで指定可能。
• 29. 8. Mithrilの特徴⑦ BROWSER ・IE8以下は非対応。 ⇒ es5-shim.min.jsやpolyfill.min.jsを読みこめば使える。 indexOf、map 、keysが内部的に使われている為。 ・pushstateを使う場合は注意。 ⇒ 一部AndroidデフォルトブラウザやIE9以下、OperaMiniで 動かない為。
• 30. ・軽量、高速 ・学習コスト低め ・サードパーティ製ライブラリ利用可能 ・JSX風にも書ける ・コンポーネント化可能 ・ブラウザ対応も基本問題なし 最後にまとめ モバイル向けのSPAに最適
• 31. END