明日のためのクライアントサイドMVCフロントエンド勉強会2012/04/17 @ama_ch
View Slide
✦ 最近はクライアントサイドでもMVCという言葉をよく聞くようになりました✦ クライアントサイドMVCの概要と現状を紹介します
よくある書き方✦ 「このボタンをクリックしたらサーバからデータを取得して表示したい」✦ jQueryでセレクタにイベントハンドラをセット✦ イベントハンドラでAjaxリクエスト✦ コールバックでレスポンスをDOMに挿入
疑問✦ 通信エラーが起きたら?✦ 不正なデータが返ってきたきたら?✦ 別のDOMで同じような処理がしたい時は?✦ UIデザインを変更したい時は?✦ ユニットテストがしたい時は?✦ シングルページ化したい時は?✦ オフラインでも動くように作るには?
✦ jQueryは素晴らしいものです✦ でも今時の複雑なWebアプリケーションを綺麗に作れるようにしてくれる訳じゃない✦ 新しい方法が必要だよね✦ そうだ、MVCだ!
ModelViewController参照間接的な参照サーバサイドMVC
ModelViewController①リクエスト②問い合わせ③データ返却④描画依頼⑤HTML⑥レスポンス
ModelViewController①リクエスト②問い合わせ③データ返却④描画依頼⑤HTML⑥レスポンス✦ 1リクエストに1レスポンスを返す構造✦ JavaScriptだとどうなる?
目的✦ アプリケーションの構造化✦ モデルの独立✦ DOMとロジックの分離✦ ビューの抽象化
注意点✦ WebアプリケーションのフロントエンドはGUIアプリに近いです✦ なので、サーバサイドMVCの構造をそのままjsに適用することはできません✦ MVC自体の定義よりも、MVCをヒントにjsをどう構造化するかが大事です
JavaScriptでMVC✦ サーバサイドMVCの概念をそのまま当てはめてみる✦ モデルは、サーバから取得したデータ✦ ビューは、HTML✦ コントローラは、ユーザの入力を受ける?受けるのはビュー(HTML)じゃ?✦ ビューとコントローラの境界が曖昧
ModelControllerViewインタラクション操作監視呼び出し
ModelControllerViewインタラクション操作監視呼び出し✦ ビューで受けたインタラクションをコントローラが処理する✦ コントローラがモデルを操作する✦ ビューがモデルを監視して表示を更新✦ ビューとコントローラを分ける必要性が低い✦ そもそもモデルの変更以外の方法でビューが更新されない
MVP✦ MVC派生パターンのひとつ✦ コントローラの代わりにPresenter✦ ビューはモデルを参照しない✦ Presenterがモデルを監視して、ビューを更新する
ModelPresenterViewインタラクション監視操作更新呼び出し
MVVM✦ MVC派生パターンのひとつ✦ コントローラの代わりにViewModel✦ ビューはViewModelに同期する✦ ビューとViewModelの同期にはデータバインディングが使われる✦ jsのデータバインディングは後述
ModelViewModelViewインタラクション監視操作監視呼び出し
ModelViewModelViewインタラクション監視操作監視呼び出しデータバインディング
MV*フレームワーク✦ 最近はjsのMV*フレームワークが多数存在✦ Backbone.js, Knockout.js, Ember.js,Spine.js, Dojo, YUI, Closure, Extjs...✦ TodoMVCで色々見られる✦ http://addyosmani.github.com/todomvc/
フレームワークの現状✦ コントローラを筆頭に、MVCの解釈はまちまち✦ モデルはサーバサイドで扱うものとほぼ同じ✦ ビューはコントローラ的なクラスだったり、出力されたHTMLだけを指す場合もある
MVVMフレームワーク✦ data-* 属性を使ってHTML(テンプレート)に情報を埋め込む✦ jsで解析してHTMLを構築したり、任意のメソッドを実行させることで、データバインディング機能を提供する✦ こういう機能を提供するライブラリは、MVVMと言われている
batman.js
batman.jsKnockout.js
現状のまとめ✦ クライアントサイドに「MVC」という素晴らしいライブラリがある訳ではない✦ 既存の MVC/MVP/MVVM などを参考に、簡単に開発する仕組みが模索されている✦ MVCフレームワークの決定版はまだない
クライアントサイドMVCを実現する基本戦略
1. モデルを定義する• サーバから取得したデータを保持する• バリデーションする✦ 異常な入出力を検出できる✦ APIの代わりにlocalStorageなどを使うことで、オフライン対応も現実的になる
2.コンポーネントを作る• UIコンポーネントごとにビューのインスタンスを作る• 一覧とその中のアイテムなど• 外部の変数など環境に依存しないように作る✦ 再利用しやすい✦ シングルページ化しやすい✦ UIが変更しやすい✦ ユニットテストしやすい
3.ビューをモデルに同期• ビューはモデルのデータを表示する• モデルを監視して、ビューを同期させる✦ モデルだけ気にすれば良いのでシンプル✦ 応答性の高いUIが作れる
まとめ• クライアントサイドMVCとは、Webアプリを構造化する設計と、それを実現するフレームワークです• クライアントサイドMVCの目的は、アプリの構造化とビューの抽象化です• フレームワークはまだ発展途上ですが、基本的な概念と戦略は役に立ちます
ありがとうございました