Mithril - 軽量／高速なMVCフレームワーク

Copyright © DeNA Co.,Ltd. All Rights Reserved.
Mithril - 軽量・高速な
MVCフレームワーク
株式会社 DeNA Games Osaka
技術編成部人西聖樹
masaki.hitonishi@dena.com

自己紹介
 人西聖樹（ひとにしまさき）
 Twitter: @sairoutine
 株式会社 DeNA Games Osaka
 Webアプリケーションエンジニア
 趣味事では、WebGL と Electron を使ってPCゲー
ムを作るチャレンジをしています。

フロントエンド
JavaScript
フレームワーク

ところで皆さんに質問
JavaScript フレームワーク、
どれ使ったことあります？

Mithril とは

Mithril
 フロントエンド MVCフレームワーク
 仮想DOM
 コンポーネントもサポート
 ファイルサイズが小さい(バージョン0.2.5 時点で、約 20 KB)
 APIが少ない(約23個。よく使う API は4つくらい)
 最小ながらも Mithril だけで SPA が作れる程度には揃ってる
 速い

界隈における
Mithril の位置づけ

今学びたいJSフレームワークは？
https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510
より引用

もう一度使いたいJSフレームワークは？
より引用

その他に言及されているJSフレームワーク
より引用
Mithril

MVC

MVC
 Model(状態), View(表示), Controller
(Model と View を管理する)
 フレームワークとしてのサポートはないが、
ViewModel を追加して、MVVM (+
Controller) の設計にするとよりよい設計に。

Model
 普通の JavaScript オブジェクト (Mithril フ
レームワークにロックインしてない)
 m.prop を使えば、getter-setter を生成で
きる。
 Web API から取得／へ保存するデータを主
に担当する

View
 仮想DOM(後述)を返すJavaScriptの関数
 Controller の保持する状態を参照できる
 再描画が走るたびに呼ばれるので、重い処理
は View で行わず Controller で行う。

Controller
 インスタンスを作る JavaScript の関数
 各種クラスの初期化など
 Controller が Model (or ViewModel)を持ち、
View は Controller を通して状態にアクセ
スする感じになる

ViewModel
 アプリケーションの状態を扱う。
 永続化する状態は Model に、永続化しない
状態は ViewModel に直接持たせるような設
計をよく見る。
 ここをシングルトンにしておくと、SPAで
ページ遷移しても前のページの状態を残して
おいたりできる。

Component
 JavaScript のオブジェクト。 controller プ
ロパティと、 view プロパティを持つ。
 SPAにおいては 1ページ 1コンポーネント最
低必要。
 コンポーネントの中で別のコンポーネントを
呼び出せる。
 よって、 React のように再利用可能なコン
ポーネントを作っておくと楽

仮想DOM

HTML(実DOM)の変更はコストが高い
 ツリー構造のDOMデータを走査していく
 座標計算のやりなおし、CSSスタイルの再適
用 etc…

node.querySelector('.foo').innerHTML = ’aaa'
しかし、こうしたコードは最終的に
どういうHTMLが出力されるのか
追いにくい。
仮想DOMの出番！
今までは jQuery などで差分を
追加／変更／削除するコードを書いて、
極力 DOM の変更を抑えてきた

仮想DOMだと
<div class="modal-body">
<form>
<div class="form-group">
<label>イベント名</label>
<div class="form-control-static">{ model.name() }</div>
</div>
<div class="form-group">
<label>日時</label>
<div class="form-control-static">{ model.start_date() }</div>
</div>
</form>
</div>
DOMのあるべき姿を書くだけで、
フレームワークが
状態の変更前と変更後を比較して
差分だけ書き換えてくれる。

差分検知の仕組み
 ソースコードにコメントがある
* diff algorithm can be summarized as this:
*
* 1 - compare `data` and `cached`
* 2 - if they are different, copy `data` to `cached` and update the
M
* based on what the difference is
* 3 - recursively apply this algorithm for every array and for the
* children of every virtual element

めっちゃ要約すると
1. 更新前の仮想DOMと更新後の仮想DOMを比
較する
2. 異なる場合は、異なる種類に応じて更新を
する
3. 再帰的に子要素を辿っていって、上記のア
ルゴリズムを適用していく
↓
めっちゃシンプルなアルゴリズム！

じゃあなんでこんな速いのか？

再描画が走るタイミング
 Mithril は再描画が走るタイミングを絞ることで、
圧倒的なパフォーマンスを発揮している。
 m.module() か m.route() を使ってコントローラ
が初期化されたタイミング
 イベントハンドラ(onclick等)が発生したタイミン
グ
 m.request(後述する http リクエスト)が完了した
タイミング
 m.redraw() を呼んで、明示的に再描画を呼んだタ
イミング

描画が走るタイミングの調整
 1フレーム単位で何回再描画が呼びだされても、1
度しか再描画しない
 Model が更新された際に view を再描画する仕組
みが Mithril にはない。
 よって setInterval などで Model を更新しても、
view が更新されない罠にハマる。
 m.redraw() を呼び出すと、次のフレーム更新タイ
ミングで再描画する。
 あるいは m.startComputation() と
m.endComputation() で描画カウンタを増減させ
ることで、再描画を行う。

msx

msx
 React でいう jsx
 仮想DOMは JS のデータなので、フレーム
ワークに沿った書き方をしないといけない
 いわゆる普通のHTMLで書いて、それを仮想
DOM の書き方に変換する

これが
var todos = ctrl.list.map(function(task, index) {
return <li className={task.completed() && 'completed'}>
<div className="view">
<input
className="toggle"
type="checkbox"
onclick={m.withAttr('checked', task.completed)}
checked={task.completed()}
/>
<label>{task.title()}</label>
<button className="destroy" onclick={ctrl.remove.bind(ctrl,
index)}/>
</div>
<input className="edit"/>
</li>
})

こうなる
var todos = ctrl.list.map(function(task, index) {
return {tag: "li", attrs: {className:task.completed() && 'completed'}, children: [
{tag: "div", attrs: {className:"view"}, children: [
{tag: "input", attrs: {
className:"toggle",
type:"checkbox",
onclick:m.withAttr('checked', task.completed),
checked:task.completed()}
},
{tag: "label", attrs: {}, children: [task.title()]},
{tag: "button", attrs: {className:"destroy", onclick:ctrl.remove.bind(ctrl,
index)}}
]},
{tag: "input", attrs: {className:"edit"}}
]}
})

 jsx はキショイ(javascript の中に生の HTMLが混
ざってくる) と言われがち
 個人的には、ejs や jade などのような、新手のテ
ンプレートエンジンだと思えばそこまで気になら
ない。
 フロントエンドエンジニアが Model と Controller
を書いて、マークアップエンジニアが View を書
く、みたいな役割分担もしやすい。

バインディング

モデルからビューへのバインディング
 モデルの内容をビューに反映させる
 再描画によって差分を検出し、value の中身の部分
のみ更新される
 先述のように、setInterval などで Model を更新
した場合、明示的に再描画を呼び出す必要がある。
m("input", {value: ctrl.model.description()})

ビューからモデルへのバインディング
 ビューにてユーザーが入力した内容をモデルに反
映する
 m.withAttr を使う
 onchange イベントによって
ctrl.model.description を更新してくれる
 やってることは下記と同じ
m("input", {onchange: m.withAttr("value", ctrl.model.description)})
m("input", {onchange: function (e) {
ctrl.model.description(e.currentTarget.value);
})

http リクエスト
 m.request を使って行う。
 thennable (いわゆる Promise)
 リクエストが完了するまで、再描画を待たせ
てくれる。
User.listEven = function() {
return m.request({method: "GET", url: "/user"}).then(function(list) {
return list.filter(function(user) {return user.id % 2 == 0});
})
.catch(function(e) { throw e; });
}

Mithril を選択することが有用な場合
 サーバーサイドエンジニア
同じMVCなので学習しやすい
Mithril 自体が1000行程度なので
最悪コードを読めばなんとかなる
 最終的に捨てる選択肢を取る場合
あと2〜3年もすれば新しいメジャーな
FWが登場する。
どうせ捨てるなら学習コストの低いものを

公式サイト
http://mithril-ja.js.org/

日本語のオライリー本
Mithril――最速クライアントサイドMVC

ご清聴ありがとう
ございました！

Mithril - 軽量／高速なMVCフレームワーク

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Mithril - 軽量／高速なMVCフレームワーク

Similaire à Mithril - 軽量／高速なMVCフレームワーク (20)

Plus de sairoutine

Plus de sairoutine (10)

Mithril - 軽量／高速なMVCフレームワーク