明日のためのクライアントサイドMVC

Transcript

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