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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

batman.js

Slide 23

Slide 23 text

batman.js Knockout.js

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ありがとうございました