Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

15,294 views

Published on

mithrilの特徴についてざっくり。
Data Binding JS Night で発表した資料。
http://vuejs-meetup.connpass.com/event/14017/

Published in: Technology
  • Be the first to comment

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

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

×