2012年7月12日木曜日

第31回 HTML5とか勉強会 JavaScript MVCフレームワーク まとめ


第31回 HTML5とか勉強会に参加してきました。
そこでメモっておいたことをまとめたので紹介します。

テーマ：JavaScript MVCフレームワーク

アジェンダ

  • MVCフレームワークの紹介
  • 全員参加の座談会：40分 モデレータ：新野淳一さん（publickey）
  • 質疑応答など10分

togetterのまとめ: http://togetter.com/li/336924

MVCフレームワークの紹介

Backbone.js

実績：LinkedIn、FourSquare
なんでもかんでもMVCが必要というわけではない（？）
underscore.jsに依存 → ユーティリティライブラリ、単体でも便利
Backbon.View, Model, CollectionはすべてBackbone.Eventsを継承
データの同期にRESTfulAlAPI
backbone.io：node.jsとsocket.ioでサーバサイドと連携。リアクティブプログラミング可能
Simpleなのでソースコードを読めばいろいろ解決することが多い

Spine.js

backbone.jsにインスパイアされて作成された。
「ステートフルJavaScript」の著者が作成。
現在のSpine.jsはCoffeeScriptでの開発が前提
CSSはStylus
■特徴
  • Simple: シンプルなMVCアーキテクチャ
  • Lightweight: 依存ライブラリなし。ただしjQueryかZepto.jsの使用を推奨
  • CoffeeScript: CoffeeScriptは簡潔でわかりやすい。(class型のオブジェクト指向なのでJava系の言語使ったことある人には○)
spine.appでプロジェクトのひな形を作成可能
hemでローカルサーバ構築、ホットデプロイで簡単にデバッグ可能
CoffeeScriptとStylusをビルドして、application.jsとapplication.cssを作成 → jsとcssが各一つなのでhtmlヘッダがすっきり
ModelはStorage機能を併せ持つ。簡単にlocalStorageとServerの切り替えが可能
Railsと相性がいい

Ember.js

SproutCoreがベース(AppleがMobileMeとかで利用してた)
Models: アプリケーションのデータ構造を表現。Model動詞の関連を含む
Views: handlebar.jsというテンプレートエンジンを利用。高速。イベントハンドリングとDOMのアップデート
Controllers: オブジェクトリスト(Modelオブジェクト)の管理
StateManager: 各MVCパーツのミディエータ。アプリの地図。ナビゲータ
■特徴
  • 同じようなコードを書かない
  • 標準的なアプリ構造を提供
    • 双方向のバインディング (Model <-> View)
    • 関数をプロパティのように扱う
    • 自動で更新するテンプレート

Angular.js

実績: doubleclickのどこかに使われている
初めての人にも手が出しやすい
双方向データバインディング(MDV: Model Driven View)
DOM構造と直感的に結びつくControllerの継承関係
JasmineやJsTestDriverでテストしやすい作り
i18nに対応
HTMLセントリックの開発(ライブコーディングしてたけど、JSはほとんど書かなかった)
Controllerの中に定義するプロパティはすべてModel
ng-hogeの「ng」はA"ng"ular

座談会

フレームワークを利用して、アプリケーションは遅くならないか？

backbone,js: 軽量なので感じない。EventをDelegateしないでDOMに直接アタッチしたりすると重くなるかも
Spine.js: 軽量なので感じない。通信は非同期で行われるので、ストレスはない
Ember.js: ライブラリ自体が重いので、ロードに時間がかかる。
               小さなサービスでは使わないほうがいいかも。ただ、生のJavaScriptよりは遥かに整理して書けるため、大規模アプリでは利点の方が大きい。
Angular.js: 自分のアプリをAngular.jsで書きなおしてみたが、ちょっと遅くなった気が…
Ember.jsやAngular.jsは生産性重視

UIバインディングの利点？

UIバインディング有(Angular.js / Ember.js): 理解しやすい。コード量が減る
UIバインディング無(Backbone.js / Spine.js): 自分でテンプレートエンジンを選んだり書いたりできるので、バインディングの仕組みが理解しやすいし、カスタマイズしやすい。

他のライブラリとの組み合わせは？

backbone.js: jQuery (あるいはZepto.js等jQuery互換のもの)推奨。テンプレートエンジンはなんでも
Spine.js: jQuery (あるいはZepto.js等jQuery互換のもの)推奨。テンプレートエンジンはなんでも
Ember.js: jQueryが利用されることが多い。しかしZepto.js等jQuery互換のものも使える。なくても大丈夫。
               jQueryは主にフレームワークに含まれていないAjax機能を利用。
Angualr.js: フレームワーク自体にjQ-liteというjQuery互換のライブラリが含まれている。
                ただ、外部からjQueryを読み込むとそちらでオーバーライドされる。

Modelとサーバの連携は？

Angular.js: サーバとは疎結合。httpサービス使って自分で
Ember.js: railsと相性いい
Spine.js: RESTfull
Backbone.js: backbone.syncを使ってRESTfullに。
railsと相性いい。backbone.ioを使ってnode.jsともいける。

質疑応答

チームで使う時の生産性とか学習曲線とか

backbone.js: MVCがわかってればおｋ
Spine.js: CoffeeScriptの知識が必要。シンプルなので、フレームワーク自体はわかりやすい
Ember.js: ルールがわかるまでちょっと時間かかるが、わかれば複数人でも生産性上がる
Angular.js: いろいろ簡単にできるが、複雑なことをやろうとすると難しいかも。
                分業はしやすいのではないか。(html作る人、コントローラ作る人、みないな？)

ドキュメントやコミュニティは？

Angular.js: ドキュメントは充実しているが、英語。
                サンプルはかなり充実している。
                 英語のコミュニティは活発。日本語のコミュニティも作られる、かも…？
Ember.js: コミュニティはGithubで活発。
               ドキュメントは少ない。ソースコード読め。
Spine.js: ドキュメントは充実しているが、英語。
Backbone.js: ドキュメントは英語。
                    コミュニティは英語のみだが活発。
                    小さいフレームワークだからソースコード読むのが一番

スマートフォン向けに使えるか？

Angular.js / Ember.js: ライブラリ自体が大きいため、読み込みに時間がかかってしまう。
                                スマートフォンはあまり考慮されていない
Spine.js: Spine mobileというスマートフォン向けライブラリがある
Backbone.js: 特に何も用意されていない。しかし、jQueryではなくZepto.jsを使えば、backbone.js自体も軽量なので良い感じなのでは？
------------------------------------------------------------------------
以上です。
最近はスマートフォン向けのサービスを作っているので、Backbone.jsやSpine.jsはいじってみようかなあ、などと思いつつ。
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)