Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ama-ch
June 05, 2012

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

ama-ch

June 05, 2012
Tweet

More Decks by ama-ch

Other Decks in Programming

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