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.
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Mithril - 軽量・高速な
MVCフレームワーク
株式会社 DeNA Games Osaka
技術編成部 人西 聖樹
masaki.hitoni...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
自己紹介
 人西 聖樹(ひとにし まさき)
 Twitter: @sairoutine
 株式会社 DeNA Games Osaka
 Web...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
フロントエンド
JavaScript
フレームワーク
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Copyright © DeNA Co.,Ltd. All Rights Reserved.
ところで皆さんに質問
JavaScript フレームワーク、
どれ使ったことあります?
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Mithril とは
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Mithril
 フロントエンド MVCフレームワーク
 仮想DOM
 コンポーネントもサポート
 ファイルサイズが小さい(バージョン0.2....
Copyright © DeNA Co.,Ltd. All Rights Reserved.
界隈における
Mithril の位置づけ
Copyright © DeNA Co.,Ltd. All Rights Reserved.
今学びたいJSフレームワークは?
https://medium.com/@sachagreif/the-state-of-javascript-fro...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
もう一度使いたいJSフレームワークは?
https://medium.com/@sachagreif/the-state-of-javascript-...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
その他に言及されているJSフレームワーク
https://medium.com/@sachagreif/the-state-of-javascript...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
MVC
Copyright © DeNA Co.,Ltd. All Rights Reserved.
MVC
 Model(状態), View(表示), Controller
(Model と View を管理する)
 フレームワークとしてのサポー...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Model
 普通の JavaScript オブジェクト (Mithril フ
レームワークにロックインしてない)
 m.prop を使えば、ge...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
View
 仮想DOM(後述)を返すJavaScriptの関数
 Controller の保持する状態を参照できる
 再描画が走るたびに呼ばれる...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Controller
 インスタンスを作る JavaScript の関数
 各種クラスの初期化など
 Controller が Model (o...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
ViewModel
 アプリケーションの状態を扱う。
 永続化する状態は Model に、永続化しない
状態は ViewModel に直接持たせる...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Component
 JavaScript のオブジェクト。 controller プ
ロパティと、 view プロパティを持つ。
 SPAにおい...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
仮想DOM
Copyright © DeNA Co.,Ltd. All Rights Reserved.
HTML(実DOM)の変更はコストが高い
 ツリー構造のDOMデータを走査していく
 座標計算のやりなおし、CSSスタイルの再適
用 etc…
Copyright © DeNA Co.,Ltd. All Rights Reserved.
node.querySelector('.foo').innerHTML = ’aaa'
しかし、こうしたコードは最終的に
どういうHTMLが出力され...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
仮想DOMだと
<div class="modal-body">
<form>
<div class="form-group">
<label>イベン...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
差分検知の仕組み
 ソースコードにコメントがある
* diff algorithm can be summarized as this:
*
* 1...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
めっちゃ要約すると
1. 更新前の仮想DOMと更新後の仮想DOMを比
較する
2. 異なる場合は、異なる種類に応じて更新を
する
3. 再帰的に子要素...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
じゃあなんでこんな速いのか?
Copyright © DeNA Co.,Ltd. All Rights Reserved.
再描画が走るタイミング
 Mithril は再描画が走るタイミングを絞ることで、
圧倒的なパフォーマンスを発揮している。
 m.module() ...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
描画が走るタイミングの調整
 1フレーム単位で何回再描画が呼びだされても、1
度しか再描画しない
 Model が更新された際に view を再描...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
msx
Copyright © DeNA Co.,Ltd. All Rights Reserved.
msx
 React でいう jsx
 仮想DOMは JS のデータなので、フレーム
ワークに沿った書き方をしないといけない
 いわゆる普通のH...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
これが
var todos = ctrl.list.map(function(task, index) {
return <li className=...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
こうなる
var todos = ctrl.list.map(function(task, index) {
return {tag: "li", a...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
 jsx はキショイ(javascript の中に 生の HTMLが混
ざってくる) と言われがち
 個人的には、ejs や jade などのよう...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
バインディング
Copyright © DeNA Co.,Ltd. All Rights Reserved.
モデルからビューへのバインディング
 モデルの内容をビューに反映させる
 再描画によって差分を検出し、value の中身の部分
のみ更新される
...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
ビューからモデルへのバインディング
 ビューにてユーザーが入力した内容をモデルに反
映する
 m.withAttr を使う
 onchange ...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
http リクエスト
 m.request を使って行う。
 thennable (いわゆる Promise)
 リクエストが完了するまで、再描...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
Mithril を選択することが有用な場合
 サーバーサイドエンジニア
同じMVCなので学習しやすい
Mithril 自体が1000行程度なので
最...
Copyright © DeNA Co.,Ltd. All Rights Reserved.
公式サイト
http://mithril-ja.js.org/
Copyright © DeNA Co.,Ltd. All Rights Reserved.
日本語のオライリー本
Mithril――最速クライアントサイドMVC
Copyright © DeNA Co.,Ltd. All Rights Reserved.
ご清聴ありがとう
ございました!
Upcoming SlideShare
Loading in …5
×

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

[Grand Frontend Osaka2016] DAY2 Frontend Sessions
http://kfug.jp/gfo2016/

  • Be the first to comment

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

  1. 1. Copyright © DeNA Co.,Ltd. All Rights Reserved. Mithril - 軽量・高速な MVCフレームワーク 株式会社 DeNA Games Osaka 技術編成部 人西 聖樹 masaki.hitonishi@dena.com
  2. 2. Copyright © DeNA Co.,Ltd. All Rights Reserved. 自己紹介  人西 聖樹(ひとにし まさき)  Twitter: @sairoutine  株式会社 DeNA Games Osaka  Webアプリケーションエンジニア  趣味事では、WebGL と Electron を使ってPCゲー ムを作るチャレンジをしています。
  3. 3. Copyright © DeNA Co.,Ltd. All Rights Reserved. フロントエンド JavaScript フレームワーク
  4. 4. Copyright © DeNA Co.,Ltd. All Rights Reserved.
  5. 5. Copyright © DeNA Co.,Ltd. All Rights Reserved.
  6. 6. Copyright © DeNA Co.,Ltd. All Rights Reserved.
  7. 7. Copyright © DeNA Co.,Ltd. All Rights Reserved.
  8. 8. Copyright © DeNA Co.,Ltd. All Rights Reserved. ところで皆さんに質問 JavaScript フレームワーク、 どれ使ったことあります?
  9. 9. Copyright © DeNA Co.,Ltd. All Rights Reserved.
  10. 10. Copyright © DeNA Co.,Ltd. All Rights Reserved. Mithril とは
  11. 11. Copyright © DeNA Co.,Ltd. All Rights Reserved. Mithril  フロントエンド MVCフレームワーク  仮想DOM  コンポーネントもサポート  ファイルサイズが小さい(バージョン0.2.5 時点で、約 20 KB)  APIが少ない(約23個。よく使う API は4つくらい)  最小ながらも Mithril だけで SPA が作れる程度には揃ってる  速い
  12. 12. Copyright © DeNA Co.,Ltd. All Rights Reserved. 界隈における Mithril の位置づけ
  13. 13. Copyright © DeNA Co.,Ltd. All Rights Reserved. 今学びたいJSフレームワークは? https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510 より引用
  14. 14. Copyright © DeNA Co.,Ltd. All Rights Reserved. もう一度使いたいJSフレームワークは? https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510 より引用
  15. 15. Copyright © DeNA Co.,Ltd. All Rights Reserved. その他に言及されているJSフレームワーク https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510 より引用 Mithril
  16. 16. Copyright © DeNA Co.,Ltd. All Rights Reserved. MVC
  17. 17. Copyright © DeNA Co.,Ltd. All Rights Reserved. MVC  Model(状態), View(表示), Controller (Model と View を管理する)  フレームワークとしてのサポートはないが、 ViewModel を追加して、MVVM (+ Controller) の設計にするとよりよい設計に。
  18. 18. Copyright © DeNA Co.,Ltd. All Rights Reserved. Model  普通の JavaScript オブジェクト (Mithril フ レームワークにロックインしてない)  m.prop を使えば、getter-setter を生成で きる。  Web API から取得/へ保存するデータを主 に担当する
  19. 19. Copyright © DeNA Co.,Ltd. All Rights Reserved. View  仮想DOM(後述)を返すJavaScriptの関数  Controller の保持する状態を参照できる  再描画が走るたびに呼ばれるので、重い処理 は View で行わず Controller で行う。
  20. 20. Copyright © DeNA Co.,Ltd. All Rights Reserved. Controller  インスタンスを作る JavaScript の関数  各種クラスの初期化など  Controller が Model (or ViewModel)を持ち、 View は Controller を通して状態にアクセ スする感じになる
  21. 21. Copyright © DeNA Co.,Ltd. All Rights Reserved. ViewModel  アプリケーションの状態を扱う。  永続化する状態は Model に、永続化しない 状態は ViewModel に直接持たせるような設 計をよく見る。  ここをシングルトンにしておくと、SPAで ページ遷移しても前のページの状態を残して おいたりできる。
  22. 22. Copyright © DeNA Co.,Ltd. All Rights Reserved. Component  JavaScript のオブジェクト。 controller プ ロパティと、 view プロパティを持つ。  SPAにおいては 1ページ 1コンポーネント最 低必要。  コンポーネントの中で別のコンポーネントを 呼び出せる。  よって、 React のように再利用可能なコン ポーネントを作っておくと楽
  23. 23. Copyright © DeNA Co.,Ltd. All Rights Reserved. 仮想DOM
  24. 24. Copyright © DeNA Co.,Ltd. All Rights Reserved. HTML(実DOM)の変更はコストが高い  ツリー構造のDOMデータを走査していく  座標計算のやりなおし、CSSスタイルの再適 用 etc…
  25. 25. Copyright © DeNA Co.,Ltd. All Rights Reserved. node.querySelector('.foo').innerHTML = ’aaa' しかし、こうしたコードは最終的に どういうHTMLが出力されるのか 追いにくい。 仮想DOMの出番! 今までは jQuery などで差分を 追加/変更/削除するコードを書いて、 極力 DOM の変更を抑えてきた
  26. 26. Copyright © DeNA Co.,Ltd. All Rights Reserved. 仮想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のあるべき姿を書くだけで、 フレームワークが 状態の変更前と変更後を比較して 差分だけ書き換えてくれる。
  27. 27. Copyright © DeNA Co.,Ltd. All Rights Reserved. 差分検知の仕組み  ソースコードにコメントがある * 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
  28. 28. Copyright © DeNA Co.,Ltd. All Rights Reserved. めっちゃ要約すると 1. 更新前の仮想DOMと更新後の仮想DOMを比 較する 2. 異なる場合は、異なる種類に応じて更新を する 3. 再帰的に子要素を辿っていって、上記のア ルゴリズムを適用していく ↓ めっちゃシンプルなアルゴリズム!
  29. 29. Copyright © DeNA Co.,Ltd. All Rights Reserved. じゃあなんでこんな速いのか?
  30. 30. Copyright © DeNA Co.,Ltd. All Rights Reserved. 再描画が走るタイミング  Mithril は再描画が走るタイミングを絞ることで、 圧倒的なパフォーマンスを発揮している。  m.module() か m.route() を使って コントローラ が初期化されたタイミング  イベントハンドラ(onclick等)が発生したタイミン グ  m.request(後述する http リクエスト)が完了した タイミング  m.redraw() を呼んで、明示的に再描画を呼んだタ イミング
  31. 31. Copyright © DeNA Co.,Ltd. All Rights Reserved. 描画が走るタイミングの調整  1フレーム単位で何回再描画が呼びだされても、1 度しか再描画しない  Model が更新された際に view を再描画する仕組 みが Mithril にはない。  よって setInterval などで Model を更新しても、 view が更新されない罠にハマる。  m.redraw() を呼び出すと、次のフレーム更新タイ ミングで再描画する。  あるいは m.startComputation() と m.endComputation() で描画カウンタを増減させ ることで、再描画を行う。
  32. 32. Copyright © DeNA Co.,Ltd. All Rights Reserved. msx
  33. 33. Copyright © DeNA Co.,Ltd. All Rights Reserved. msx  React でいう jsx  仮想DOMは JS のデータなので、フレーム ワークに沿った書き方をしないといけない  いわゆる普通のHTMLで書いて、それを仮想 DOM の書き方に変換する
  34. 34. Copyright © DeNA Co.,Ltd. All Rights Reserved. これが 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> })
  35. 35. Copyright © DeNA Co.,Ltd. All Rights Reserved. こうなる 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"}} ]} })
  36. 36. Copyright © DeNA Co.,Ltd. All Rights Reserved.  jsx はキショイ(javascript の中に 生の HTMLが混 ざってくる) と言われがち  個人的には、ejs や jade などのような、新手のテ ンプレートエンジンだと思えばそこまで気になら ない。  フロントエンドエンジニアが Model と Controller を書いて、マークアップエンジニアが View を書 く、みたいな役割分担もしやすい。
  37. 37. Copyright © DeNA Co.,Ltd. All Rights Reserved. バインディング
  38. 38. Copyright © DeNA Co.,Ltd. All Rights Reserved. モデルからビューへのバインディング  モデルの内容をビューに反映させる  再描画によって差分を検出し、value の中身の部分 のみ更新される  先述のように、setInterval などで Model を更新 した場合、明示的に再描画を呼び出す必要がある。 m("input", {value: ctrl.model.description()})
  39. 39. Copyright © DeNA Co.,Ltd. All Rights Reserved. ビューからモデルへのバインディング  ビューにてユーザーが入力した内容をモデルに反 映する  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); })
  40. 40. Copyright © DeNA Co.,Ltd. All Rights Reserved. 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; }); }
  41. 41. Copyright © DeNA Co.,Ltd. All Rights Reserved. Mithril を選択することが有用な場合  サーバーサイドエンジニア 同じMVCなので学習しやすい Mithril 自体が1000行程度なので 最悪コードを読めばなんとかなる  最終的に捨てる選択肢を取る場合 あと2〜3年もすれば新しいメジャーな FWが登場する。 どうせ捨てるなら学習コストの低いものを
  42. 42. Copyright © DeNA Co.,Ltd. All Rights Reserved. 公式サイト http://mithril-ja.js.org/
  43. 43. Copyright © DeNA Co.,Ltd. All Rights Reserved. 日本語のオライリー本 Mithril――最速クライアントサイドMVC
  44. 44. Copyright © DeNA Co.,Ltd. All Rights Reserved. ご清聴ありがとう ございました!

×