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

Transcript

1. 明日のための
   クライアントサイドMVC
   フロントエンド勉強会
   2012/04/17 @ama_ch
   

   View Slide

2. ✦ 最近はクライアントサイドでもMVCという言葉
   をよく聞くようになりました
   ✦ クライアントサイドMVCの概要と現状を紹介し
   ます
   

   View Slide

3. よくある書き方
   ✦ 「このボタンをクリックしたらサーバからデータ
   を取得して表示したい」
   ✦ jQueryでセレクタにイベントハンドラをセット
   ✦ イベントハンドラでAjaxリクエスト
   ✦ コールバックでレスポンスをDOMに挿入
   

   View Slide

4. 疑問
   ✦ 通信エラーが起きたら？
   ✦ 不正なデータが返ってきたきたら？
   ✦ 別のDOMで同じような処理がしたい時は？
   ✦ UIデザインを変更したい時は？
   ✦ ユニットテストがしたい時は？
   ✦ シングルページ化したい時は？
   ✦ オフラインでも動くように作るには？
   

   View Slide

5. ✦ jQueryは素晴らしいものです
   ✦ でも今時の複雑なWebアプリケーションを綺麗
   に作れるようにしてくれる訳じゃない
   ✦ 新しい方法が必要だよね
   ✦ そうだ、MVCだ！
   

   View Slide

6. Model
   View
   Controller
   参照
   間接的な参照
   サーバサイドMVC
   

   View Slide

7. Model
   View
   Controller
   ①リクエスト
   ②問い合わせ
   ③データ返却
   ④描画依頼
   ⑤HTML
   ⑥レスポンス
   

   View Slide

8. Model
   View
   Controller
   ①リクエスト
   ②問い合わせ
   ③データ返却
   ④描画依頼
   ⑤HTML
   ⑥レスポンス
   ✦ 1リクエストに1レスポンスを返す構造
   ✦ JavaScriptだとどうなる？
   

   View Slide

9. 目的
   ✦ アプリケーションの構造化
   ✦ モデルの独立
   ✦ DOMとロジックの分離
   ✦ ビューの抽象化
   

   View Slide

10. 注意点
    ✦ WebアプリケーションのフロントエンドはGUIア
    プリに近いです
    ✦ なので、サーバサイドMVCの構造をそのままjs
    に適用することはできません
    ✦ MVC自体の定義よりも、MVCをヒントにjsをど
    う構造化するかが大事です
    

    View Slide

11. JavaScriptでMVC
    ✦ サーバサイドMVCの概念をそのまま当てはめ
    てみる
    ✦ モデルは、サーバから取得したデータ
    ✦ ビューは、HTML
    ✦ コントローラは、ユーザの入力を受ける？受ける
    のはビュー(HTML）じゃ？
    ✦ ビューとコントローラの境界が曖昧
    

    View Slide

12. Model
    Controller
    View
    インタラクション
    操作
    監視
    呼び出し
    

    View Slide

13. Model
    Controller
    View
    インタラクション
    操作
    監視
    呼び出し
    ✦ ビューで受けたインタラクションをコントロー
    ラが処理する
    ✦ コントローラがモデルを操作する
    ✦ ビューがモデルを監視して表示を更新
    ✦ ビューとコントローラを分ける必要性が低い
    ✦ そもそもモデルの変更以外の方法でビュー
    が更新されない
    

    View Slide

14. MVP
    ✦ MVC派生パターンのひとつ
    ✦ コントローラの代わりにPresenter
    ✦ ビューはモデルを参照しない
    ✦ Presenterがモデルを監視して、ビューを更新
    する
    

    View Slide

15. Model
    Presenter
    View
    インタラクション
    監視
    操作
    更新
    呼び出し
    

    View Slide

16. MVVM
    ✦ MVC派生パターンのひとつ
    ✦ コントローラの代わりにViewModel
    ✦ ビューはViewModelに同期する
    ✦ ビューとViewModelの同期にはデータバイン
    ディングが使われる
    ✦ jsのデータバインディングは後述
    

    View Slide

17. Model
    ViewModel
    View
    インタラクション
    監視
    操作
    監視
    呼び出し
    

    View Slide

18. Model
    ViewModel
    View
    インタラクション
    監視
    操作
    監視
    呼び出し
    データバインディング
    

    View Slide

19. MV*フレームワーク
    ✦ 最近はjsのMV*フレームワークが多数存在
    ✦ Backbone.js, Knockout.js, Ember.js,
    Spine.js, Dojo, YUI, Closure, Extjs...
    ✦ TodoMVCで色々見られる
    ✦ http://addyosmani.github.com/
    todomvc/
    

    View Slide

20. フレームワークの現状
    ✦ コントローラを筆頭に、MVCの解釈はまちまち
    ✦ モデルはサーバサイドで扱うものとほぼ同じ
    ✦ ビューはコントローラ的なクラスだったり、出力
    されたHTMLだけを指す場合もある
    

    View Slide

21. MVVMフレームワーク
    ✦ data-* 属性を使ってHTML（テンプレート）に
    情報を埋め込む
    ✦ jsで解析してHTMLを構築したり、任意のメ
    ソッドを実行させることで、データバインディン
    グ機能を提供する
    ✦ こういう機能を提供するライブラリは、MVVMと
    言われている
    

    View Slide

22. batman.js
    

    View Slide

23. batman.js
    Knockout.js
    

    View Slide

24. 現状のまとめ
    ✦ クライアントサイドに「MVC」という素晴らしいラ
    イブラリがある訳ではない
    ✦ 既存の MVC/MVP/MVVM などを参考に、簡
    単に開発する仕組みが模索されている
    ✦ MVCフレームワークの決定版はまだない
    

    View Slide

25. クライアントサイドMVC
    を実現する基本戦略
    

    View Slide

26. 1. モデルを定義する
    • サーバから取得したデータを保持する
    • バリデーションする
    ✦ 異常な入出力を検出できる
    ✦ APIの代わりにlocalStorageなどを使うこと
    で、オフライン対応も現実的になる
    

    View Slide

27. 2.コンポーネントを作る
    • UIコンポーネントごとにビューのインスタンスを作る
    • 一覧とその中のアイテムなど
    • 外部の変数など環境に依存しないように作る
    ✦ 再利用しやすい
    ✦ シングルページ化しやすい
    ✦ UIが変更しやすい
    ✦ ユニットテストしやすい
    

    View Slide

28. 3.ビューをモデルに同期
    • ビューはモデルのデータを表示する
    • モデルを監視して、ビューを同期させる
    ✦ モデルだけ気にすれば良いのでシンプル
    ✦ 応答性の高いUIが作れる
    

    View Slide

29. まとめ
    • クライアントサイドMVCとは、Webアプリを構造
    化する設計と、それを実現するフレームワークで
    す
    • クライアントサイドMVCの目的は、アプリの構造
    化とビューの抽象化です
    • フレームワークはまだ発展途上ですが、基本的
    な概念と戦略は役に立ちます
    

    View Slide

30. ありがとうございました
    

    View Slide