Route 477

■ [javascript] JS MVCフレームワークについてちょっと調べた (2013夏)

JS MVC戦国時代ってそういえばどうなったんだろう、と思いつついくつかのライブラリを調べてみたところ、意外とそれぞれキャラが違うことが分かった。

Backbone.js 1.0.0

• いまのところ一番人気らしい
• 意外と小さい。ソースが1ファイルしかない。
• Model、Collection、Viewという、自作してもこういう感じになりそうだなぁという構成。(Router/HistoryはURLいじらないなら使う必要はないので、実質この3つだけ)
• 薄いフレームワークなので、他のライブラリと組み合わせるのは簡単そう。
• デメリット：以下のフレームワークが持っているdata bindingのような高度な機能はないので、相対的にコード量が増える。これは小さなアプリでもそこそこ行数を書かないといけないということでもあり(AngularやKnockoutは簡単な処理が少ない行数でできるのを売りにしている)、大きなアプリになったときに各クラスのテンプレ的なコードがかさむということでもある(のでBackboneにさらに被せる用のライブラリもあるらしい)。

Angular.js 1.0.7(安定版)

• Googleプロダクト。ドットインストールにレッスンがある。少し眺めると雰囲気が掴めるかも。
• 簡単な記法で多くのことを可能にするDSL、といった趣き。慣れると開発速度が速そう？
• リファレンスを見てもModelやViewみたいなクラスはないようで、全体の構造がちょっと良くわからず。
• テストを考慮して設計されているのがいい、という意見を何度か見かけた。

Knockout.js 2.2.1

• MVVMという、WPFやSilverlightで使われているパターンの実装らしい。C#方面にファンが多そう。
• data bindingに特化したフレームワークというかライブラリで、例えばサーバとの通信は$.ajaxでどうぞということになっている。
• 以下のように書くと、このspanのtextとmyItems().countが連動するようになり、配列myItemsに変更があると自動的にspanの中身が書き換わる。

<span data-bind="text: myItems().count"></span>

• two-way bindingなので、これとは逆にフォームに入力があったら配列の値が書き換わるみたいな関係も簡単に作れる*1
• 日本語リファレンス
• Knockout.jsの概要 // Speaker Deck

Ember.js 1.0.0-RC6

• Merb、Bundler (とTokaido?)のwycatsプロダクト、ということで期待してる。
• リッチ指向で、Backboneの強化版というか、BackboneがSinatraだとしたらEmberはRailsという感じ。
• サイズは多少大きめだが、その分data bindingやテンプレートエンジンのサポート(handlebars)など機能は十分な模様。
• 開発速度が速くて、使い方がよくわからんと言われたりもしていた。そろそろ1.0.0になりそうなので、そろそろ触りやすくなる頃？
• 久しぶりに見たらマスコットのぬいぐるみを売っててびっくりしたｗ
• Ember.js Advent Calendar 2012 - Qiita

Backboneの本

Backbone.jsは日本語の本が出たので、ついでに紹介しておきます。使い方自体はリファレンスを見ながらなんとかできるとしても、ベストプラクティスとかテストのやり方とかって「調べるのめんどいから詳しい人にいい方法を聞けたらなー」と思うので、こういう本が出たのは有難い。

Backbone.jsの概要から始まり、todoMVCのソース解説、RequireJS、テスト、タスク自動化、サンプルアプリ、リファレンスといろいろな要素が詰まっているので、自分に必要なところを選択して読むのが良さそう。

4899773501

この本はKindle版がある、のだけど、出版社の直販経由で紙の本を買うとPDFがもらえます。 PDFだけあればいいんだけどと思いましたが、そういう人は紙の本の方は会社に置くなり人にあげるなりして、口コミで宣伝してねということなのかな。

*1 Angular, Emberもtwo-wayらしい