クライアントサイドMVCについて喋った
月曜日のclient-side templating 勉強会 http://atnd.org/events/28189 で喋った内容をうろ覚えに書き出す。
クライアントMVCが求められるようになった背景
AJAXの流行
PushStateの流行の兆し
メディア系のゲームで使えるAPIの充実
今まではページ遷移の度にJSのオブジェクトを破棄していた。
=> シングルページでリッチなコンテンツが作れるようになり、JSのやることが増えた
PushStateとは
遷移なしにURLを書き換える技術。HTML5 History API。
Twitter, Github, Facebook
URLを書き換えるだけなのでコンテンツ(DOM)の操作はアプリ製作者に一任されている。
大規模なHTML書き換えに、クライアントサイドテンプレーティングが重要になってきた。
PushStateのライブラリ
defunkt/pjax
visionmedia/pages
sammy.js
Backbone.Router
自分で実装したことあるけど、ブラウザ互換の吸収が面倒すぎるのでライブラリを使ったほうがいい、という結論。
テンプレートエンジン
mustache
hogan.js
coffeekup (CoffeeScript使っているならば)
Nodeで実装されてるやつらはだいたいクライアントで使える
" The Node Toolbox - Category - Templating http://toolbox.no.de/categories/Templating
自分はcoffeekupが好き
現実的には
クライアントとサーバーで同じHTMLがレンダリングできる、多言語対応のmustache(+hogan.js)がよさそう。
自分がcoffeekupが好きなのは、HTMLを出力をする関数を持ったcoffee-scriptで、DSLをその場で定義できるから。学習コスト低いけど、なんでもできるので多人数の開発には向かなさそう。デフォルトエスケーピングオフだし・・・
クライアントサイドテンプレーティングの弱点
javascriptでレンダリングするので、SEO壊滅的。
GoogleBotに対してコンテンツを保証したければページロード時のみサーバーで同じページをレンダリングして返すようにする必要がある。(Twitter方式)
クライアントとサーバーで同じテンプレートを保つ必要があって冗長
(よって多言語に対応してるmustacheに個人的に期待している。TwitterのサーバーはScala)
MVCフレームワーク
Backbone.js
Knockout.js
Spine.js
Batman.js
... いろいろあるけど TodoMVC http://addyosmani.github.com/todomvc/ をみるのがいい
それぞれのフレームワークでひたすらTODOリストを実装していて、実装例がみえる
