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

海外で注目されてるJS Framework “Mithril”の特徴

姜勝陽

・JSER 3年目の駆け出し。

・趣味SEO対策。Analyticsを眺めること。

・ハングルが下手な韓国人ですｗ

Shoyo kyo

@shoyo_kyo

本日のお話

Mithrilの特徴についてまきでザックリ語ります

1. Mithrilとは

VirtualDOM を採用したデータバインディング型 JavaScript Framework

2015/05/01 v0.2.0

軽量

v0.11.8

v0.13.2

v1.3.15

v2.0.7

v0.2.0

V3.3.0

v0.7.2 Ractive.js -> 162KB AngularJS -> 123KB React -> 119KB Vue.js -> 59KB knockout -> 55KB Mithril -> 19KB Riot -> 9KB

2. Mithrilの特徴①

3. Mithrilの特徴②

高速


https://github.com/pygy/todomvc-perf-comparison

念の為、下記のTODOテストも参考


todomvc-perfとは（ザックリ）

各フレームワークでTodoアプリを作り、各処理の実行速度の合計を計測

総合的な速度を計測するのに適している


・50アイテム追加

・全アイテムにチェックを入れる

・全アイテムを削除する

todomvc-perfとは（ザックリ）


バージョンやブラウザの問題はあるがパフォーマンスは速めの認識でOK

4. Mithrilの特徴③

学習コスト低め

・APIは15個と少なめ。主要APIは4つ。・サードパーティ製ライブラリが不要に思えるほど最低限、欲しい機能は揃ってる。・私はMithrilがキッカケでVirtualDomをはじめましたｗ


m.mount(root, module) ⇒ Mithrilで定義したアプリケーションを実行

m.prop() ⇒ getter/setter API

m(selector, obj, value) ⇒ VirtualDOMの生成に使用するAPI

m.withAttr(prop, callback) ⇒ “onclick”や“onchange”等のイベント発生時に実行する関数を定義する際に使用

4つの主要API


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で定義したアプリケーションを実行


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


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


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処理を定義


結構使いそうな

レンダリング通知系API


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のタイミングで再描画通知が送信される。


m.redraw

var myCtrl = function() { var that=this; this.text = m.prop("first"); setTimeout(function(){ that.text ( "setTimeout“); m.redraw(true); },2000); };

Viewの強制再描画を行う

強制的に再描画通知を送る場合使用。


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種類。引数省略で取得可能。

5. Mithrilの特徴④

サードパーティ製ライブラリも使える

・Domレンダリング後に処理の実行が可能・jQueryUIやflipsnapを実行する事も可能参考：http://stackoverflow.com/questions/27139920/how-does-mithril-and-jquery-interact-with-each-other

5. Mithrilの特徴④

Configに設定した関数はレンダリング後に実行されるので、jquery.ui.datepickerも利用可能。

6. Mithrilの特徴⑤

JSXならぬMSX コンパイラあり！

・gruntやgulpで使えるMSXコンパイラが用意されている。 https://github.com/insin/msx ・grunt-msxに関しては、旧バージョンのMSXの為注意。


JSX形式で記載後、MSXを使いコンパイルを行うと…


Mithrilの関数に変換してくれます。

end

7. Mithrilの特徴⑥

コンポーネント形式でも書けます

Reactの様にコンポーネント前提でAPIが用意されてるわけではありませんが、returnで描画するDomを返すことで対応可能です。 Mithril 0.2.0からコンポーネント使えるようになりました。


0.1.34は気合で作ってくれって内容でしたが…

m(“a”, {href: item.url}, item.title)


0.2.0からm.componentで指定可能。

8. Mithrilの特徴⑦

BROWSER

・IE8以下は非対応。 ⇒ es5-shim.min.jsやpolyfill.min.jsを読みこめば使える。 indexOf、map 、keysが内部的に使われている為。・pushstateを使う場合は注意。 ⇒ 一部AndroidデフォルトブラウザやIE9以下、OperaMiniで動かない為。

・軽量、高速・学習コスト低め・サードパーティ製ライブラリ利用可能・JSX風にも書ける・コンポーネント化可能・ブラウザ対応も基本問題なし

最後にまとめ

モバイル向けのSPAに最適

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

Technology