Mithril

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
meetup app tokyo@1
Web MVC+SPAフレームワーク
Mithril
2016/06/24
GDI 渋川よしき

お前だれよ？
 前職
⁃ 自動車会社の社内SE
 現職
⁃ 社内ゲームエンジン用のフレームワーク
(クライアント用もサーバ用も)作ったり、
開発支援ツール作ったりいわゆる社内SE
⁃ 最近はQt(C++)を毎日書いてます
渋川よしき
 プログラミング
 C++とかPythonとかGolangとかJavaScriptとか
 本
 つまみぐい勉強法、アート・オブ・コミュニティ(翻訳)、
Mobageを支える技術、オブジェクト指向JavaScript(翻訳)、
ポモドーロ・テクニック入門(翻訳)、etc

昨年出しました！
 JavaScriptの、最速クライアント用MVCフレームワークの本です！
⁃ 速いのが好きな人や、変化が多いブラウザ周辺技術に疲れた人に
オススメ
⁃ 古くなってません！
 電子書籍のみです
 表紙は黒ムツの仲間
⁃ 南オセアニアの深海魚
⁃ 最大75cm
⁃ 確認された最高齢は
100歳を超えるとか

かんたん/Easy/Simpleについて

 かんたん/Easy/Simpleといった言葉がよく使われる
 ソフトウェアのライブラリ・フレームワーク・言語は特定の問題の解決
をしやすくするために作られる
→対象を限定すればどのソフトウェアも「かんたん」で説明できる
→つまり何も説明していないのと同じ
 例えば
⁃ Qt/Xamarin
• 1度GUI作成を学べば、同じ知識で他のOSのアプリも「かんたんに」作れる
⁃ Angular
• 束縛が強いため、レールに乗って「かんたんに」MVCアプリが作れる
⁃ Electron
• ブラウザの知識があれば「かんたんに」デスクトップアプリが作れる
⁃ C++
• ゼロオーバーヘッドでC言語よりも遅くないコードが「かんたんに」作れる

 かんたん/Easy/Simpleといった言葉がよく使われる
 ソフトウェアのライブラリ・フレームワーク・言語は特定の問題の解決
をしやすくするために作られる
→対象を限定すればどのソフトウェアも「かんたん」で説明できる
→つまり何も説明していないのと同じ
 例えば
⁃ Qt/Xamarin
• 1度GUI作成を学べば、同じ知識で他のOSのアプリも「かんたんに」作れる
⁃ Angular
• 束縛が強いため、レールに乗って「かんたんに」MVCアプリが作れる
⁃ Electron
• ブラウザの知識があれば「かんたんに」デスクトップアプリが作れる
⁃ C++
• ゼロオーバーヘッドでC言語よりも遅くないコードが「かんたんに」作れる
かんたん/Easy/Simpleは今日のNGワード

Mithrilとは

Mithrilとは
 ドキュメントの日本語翻訳あります！
 http://mithril-ja.js.org

Mithrilの守備範囲
V-DOM
Router (SPA)
Component XHR
サーバへの通信コード含めて
Mithrilで完結
ビジュアル層は好きなCSS
フレームワーク等が利用可能
(ただしPolymerはChrome限定)
その他、既存のUIライブラリも
使える(jQuery UI系など)

Mithrilのコア
 機能が絞りこまれたアトミックなWebのMVC+SPAフレームワーク
⁃ 他のライブラリに依存せずにアプリが作れる
• サーバ通信、非同期処理(promise)、モデル作成、SPAサポート(ラウター)
仮想DOM、コンポーネント
⁃ gzipされた状態で7.8KBほどの大きさ
• リファレンスに乗っている関数は16個ほど
• そのうちよく使うのは半分ぐらい？
• 本を書き始めてから1年以上、バグ修正等で更新は頻繁にあるが、
ほとんどAPIに変更がない
 内部では仮想DOMという仕組みを使っていて比較的高速
⁃ 詳細は「最速MVCフレームワークMithril.jsの速度の秘密」(Qiita)
⁃ 速度チューニングも可能だが、そこまで頑張る必要性が低い

Mithrilアプリケーションの構造
実際に作ったアプリケーションを参考に紹介します。

 戦魂 –SENTAMA-
戦国時代がモチーフの戦略シミュレーションRPG
開発の目線での紹介はこちら
(http://www.slideshare.net/dena_study/unityrpg)にまとまって
います

戦魂チーム向けの運用改善
 マスターデータ運用は、昨年のFINAL FANTASY Record Keeperのマ
スターデータ運用改善で発表したのと同じ仕組みは導入済みだった
 スプレッドシートでは表現が難しく入力⇔確認に手間がかかるデータが
2つほどあったのでElectronを使って入力補助ツールを作成した
⁃ 戦場マップ
⁃ 列伝(キャンペーンモード)のオープニングシーケンス
 これらを題材に、Mithrilアプリケーションの構造を紹介します

できあがったもの
 今までのワークフローに手を入れることはなく入力高速化にフォーカス
⁃ Mithril同様、アトミックな部分に割りきって、費用対効果最大化
⁃ コピペ・ツールチェーン(後工程のスプレッドシートにコピペで
データを移せるように、整形した表を表示)
⁃ 試行錯誤の時間が増えて、よりユーザに楽しんでもらえる演出、
マップづくりに時間が使えるようになった

Mithrilアプリケーションの基本設計 (1)
 HTMLの一部をMithrilの仮想DOM管理下にする
⁃ m.mount(): １つのコンポーネントに描画を任せる
⁃ m.route(): 現在のURLに応じてコンポーネントを切り替える
 全部を仮想DOMにまかせてしまうのも可だが、ヘッダー、フッターな
ど変化しない部分は静的HTMLのままの方が楽
 複数パートに分割適用もできる(した)
m.route()
m.mount()
m.mount()

できあがった構造
main.js
application
context.js
script/index.j
s
script/
xxx page.js
script/
xxx page.js
script/
xxx page.js
script/viewm
odel.js
script/model
.jswindow
open
undo/redo
script/
canvasmap.js

Mithrilアプリケーションの基本設計(2)
 コンポーネント、ビューモデル、モデルでアプリを組み立てる
⁃ コンポーネントはコントローラとビューで構成
• どちらも状態は持たない
• コンポーネントは入れ子にできる
⁃ ビューモデルは編集中のデータなど永続化しないデータ持つ
⁃ モデルは永続化するべき大事なデータを持つ
• VMとMの機能分けは規約でそうなっているだけでAPI上は1つにまとめるこ
とも不可能ではない
• それどころか、コントローラ==モデルにすることもAPI上は不可能ではな
いが、上記の規約に従う方がよい
• クラス継承等でコード的にルール強制されるわけではないので、自分で
Mithril Wayに従ってコードを整理しなければいけない点は要注意

戦場マップエディタのコンポーネント・ビュー(1)
 各ページのトップはコンポーネント
 よく使うマップ部分もコンポーネント化した
⁃ <canvas>タグをm()で作り、ビューのconfigから、
requestAnimationFrame()の再帰的呼び出しでcanvas更新
⁃ 引数でモード切り替え
• モードによって要素のフィルタリング・サイズ変更など

戦場マップエディタのコンポーネント・ビュー(2)
 ビューの一部に、仮想DOM以外のライブラリを併用することが可能
⁃ 既存のUI部品資産があれば、それを利用できる
 表はMITライセンス版のhandsontableを使用
⁃ ビューのconfigの機能を使って適用
⁃ 行・列のどちらの方向もExcelっぽく選択でき、コピペでExcelにそ
のまま貼れる

シングルページアプリケーションのサポート
 画面の完全リロードやリセットが起きなくなり、レスポンスがよくなる
 Mithrilの場合は、フルリロードの従来型ウェブアプリケーションも、
SPAにする場合も、コードは特に変わらないので対応しない理由はない
 URLのスタイルがいくつか選べる
 今回はデフォルトのまま利用
スタイル例デメリット
“search” (デフォルト) http://server/?/path/to/page history.pushStateがないIE8ではリフレッシュ
してしまう
“hash” http://server/#/path/to/page どのブラウザでもOKだが、名前付きアン
カーが使えなくなる
“pathname” http://server/path/to/page URLは一番きれいだが、サーバ側の設定が必
要
history.pushStateがないIE8ではリフレッシュ
してしまう

おまけ: Electron側の描画側ではない方のプロセス
 ブラウザ/レンダラプロセス間のインタラクションを疎にしつつ、普通
のデスクトップアプリの使い勝手を再現した
⁃ Electronのブラウザプロセス側のコードはモデルの履歴管理と、
ファイル入出力に特化する。
⁃ ブラウザがXHRでサーバ通信する代わりに、編集(モデル変更)時に
レンダラープロセスがJSONをブラウザプロセスに送る
⁃ ファイル読み込み、アンドゥ・リドゥ実行時にブラウザプロセスか
ら、今表示すべきモデルを
レンダラープロセスに送り、
Mithrilのモデルをリセット
⁃ 詳しくはQiitaの「Electron+
Mithrilで、ふつうのデスク
トップアプリを作る」参照

ちなみに
 餃子声優橘田いずみさん(@izugyoza)の餃子本

Mithrilのアプリの構造と完全に一致

橘田いずみさんの餃子のコア
 アトミックな餃子フレームワーク
⁃ 限界まで絞りこまれたシンプルな材料
• 豚肉・青ネギ・生姜のみ
• ニンニクもニラも使わず、豚肉を混ぜるときは箸で行う
⁃ 夕食以外も安心して食べられる
⁃ 爪の手入れをしている女性にも優しそう
⁃ これに、各種野菜などをアドオンして餡を仕上げる
• 単に混ぜるだけなので、肉餡をたくさん作ってから小分けにして、一度に
数種類の餃子を仕上げることも可能
 高いポータビリティ
⁃ 肉餡の状態の状態でも保存ができるし、餃子にしても保存が可能

まとめ
 MithrilはアトミックなMVC+SPAフレームワーク
⁃ 関数の数が少なく、余計な機能がないため、APIの変更もほぼない
⁃ デスクトップGUI開発者も勉強になりますよ！
 CSSフレームワークは自由に切り替えられる
⁃ 僕のお気に入りはMaterial Design Lite (mithril-mdl)
⁃ ShadowDOMが来たらPolymerが・・・
 コンポーネントの分割、ビューモデル、モデルの責務分割が勝利の鍵
⁃ データの流れを整流
 既存のUIライブラリと一緒に使ったり、canvas
を組み込んだりもできます
 Electronと一緒に使うのも簡単
⁃ 社内ツールを作ってみた
 餃子と同じぐらいMithrilもいいよ

Mithril

Mithril

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to Mithril

Similar to Mithril(20)

More from Yoshiki Shibukawa

More from Yoshiki Shibukawa(20)

Recently uploaded

Recently uploaded(8)

Mithril