angular・backbone・knockoutの比較／印象まとめ

ヒハラ

11年前

最近のJavascriptのMV*系フレームワークのことについて、ゴリゴリ調べたことをざっとまとめてみました。それぞれのフレームワークにおける書き方などは解説していませんので、書き方などは他の記事を参考にしてください。

ちなみにそれぞれのフレームワークに対しての学習度合いは、

angularは複数のチュートリアル、リファレンスをやって簡単なアプリを作った
backboneはコード見て、はるか昔にちょっと触った
knockoutは公式チュートリアルやった

な感じです。

ざっと比較

2014/06/01時点

フレームワーク名（バージョン）	githubスター	サイズ（minify）
angular.js（1.2.16）	24493	107KB
backbone.js（1.1.2）	18143	20KB
knockout.js（3.1.0）	5028	46KB

angular.js

設計

MVW（Model・View・Whatever）

サンプルアプリ

AngularJS Example
http://jsfiddle.net/dakra/U3pVM/

特徴

Googleのひと開発
カスタムタグ・属性によるHTMLのテンプレート化
双方向バインディング
便利な独自機能
- Directive
- Filter
テストしやすい
- DIによるデータ受け渡し
- テストを考慮した機能（ngMock）
Angularをキチンと学ぶと、MV*系やパターンランゲージ、依存性注入などなどのプログラミングにおいての概念、設計についてキチンと理解できる気がする。
フルスタックでWEBアプリに必要とされる機構はだいたい用意されている印象
- さらに便利にプラスアルファしたい場合にコンポーネントを使うイメージ。
DIやDirectiveなどの強力な部品化機構のおかげで、部品の再利用がしやすい（jQueryのプラグインみたいな感じで導入出来る）
- カスタムディレクティブの開発などが最近活発なイメージ
- 優秀なコンポーネント多い（angular-ui、ng-animate）
最近勢いある（ユーザー数多い）

短所

容量が大きい
学習コスト高め
- 仕様が膨大
- 処理のイメージをするのが難しい
- 独自機能（独自用語）多い
- 独自機能の使い分けを覚えなきゃ、ベストに作れない
- ドキュメント必須の割にドキュメントのググラビリティが低い
ググらなければ分からないことが多いイメージ
- 検索数が多いのは人気度じゃなくて、複雑さに起因しているのではないか？
既存のライブラリやフレームワークなどとの連携が面倒
- DOMをゴリゴリ操作したいものは向いていないとのこと
- ディレクティブを書かないといけない場合が多い
セマンティックじゃなくなる（Googleが作ったのに）
- ng-*などの独自属性を使っている
- <hogehoge />などの独自要素作れる
ブラウザ互換は弱め（1.2系はIE8以上対応）
- 対応しているIE8でもJavaScriptが、かなり遅いせいでどうしてもモッサリしがち

採用

Google
ナイキ（http://www.nike.com/us/en_us/c/innovation/flyknit）
the Huffington Post
MSNBC

印象

良くも悪くもフルスタックなので足りない機能を他から持ってくる必要がない。
仕様が膨大で理解が難しそうな分、理解してしまえばそうそう破綻しなさそう。
マークアップやjQueryばっかりやってたせいか、DirectiveとFilterの理解は簡単に思えるが他の機構の理解が難しそう。
逆引きで実現したいことが探しにくい気がする
- たとえば「渡された変数に格納されているものが文字列か、オブジェクトで表示するタグを変える」をどう実現していいか分からない
- jQueryがjQuery言語と呼ばれるのと同じで、もはやangular言語じゃないか？

backbone.js

設計

MVC2（Model・Collection・View・Router・History）

サンプルアプリ

Backbone Stickit Example
http://jsfiddle.net/nareshbhatia/jjdm5/

特徴

underscore.jsに依存
「include jQuery, and json2.js for older Internet Explorer support」なので、古いIEにも対応してるっぽい
参考追記（IE7でも動作していると書いてある）：http://nanapi.co.jp/blog/2013/09/25/backbone-js/
サイズ小さい・シンプル
自由度高い
RESTfulなJSONインターフェースをModelが持っている
- RESTful + ActiveRecordパターンと相性が抜群
- Railsと相性がいいらしい
足りない機能はplugin or ライブラリを組み合わせる
- DOM周りはjQuery系
- テンプレートエンジンはHandlebarsなど
- Angularの特徴として語られがちなデータバインディングもstickit（NYT製：http://nytimes.github.io/backbone.stickit/ ）で出来る。
ほかの二つと比べてModelに関してキチンと設計を提供している（ModelとCollectionのふたつ）
歴史が他に比べて長い（資産が貯まっている）

短所

自由度が高いので見通しの悪いコードになりやすい
- Marionette.jsのライブラリを使うとキレイにたもつ仕組みを提供してくれる。
Viewとのバインディングがつらい印象
- stickitでのデータバインディングで解決できそう

採用

Twitter
Foursquare
LinkedIn Mobile
KhanAcademy(John Resigいる) https://www.khanacademy.org/

印象

ライブラリ自体は薄いが設計の背骨を用意するので、その設計に対する理解は必要。
構造化に関する解決手段が提供されていて（Backbone + Marionette）安心な印象。
古いスライドなどで指摘されている短所に関しては、backboneの歴史が長いせいか最近では解決方法が提示されている模様。
Backbone.jsにおけるスタンダードでベストな組み合わせは「Backbone + Marionette + stickit + Handlebars」ぽい。

knockout.js

設計

MVVM（Model・View・ViewModel）

サンプルアプリ

Knockoutjs.com – Simple list example
http://jsfiddle.net/rniemeyer/bxfXd/

特徴

Microsoft ASP.NET開発チームの人が開発
SilverLightに似てるらしい
依存するライブラリは無し
IE6以上対応（さすがMS）
双方向バインディング
シンプル
- 学習コスト低い
- 公式チュートリアル優秀 http://learn.knockoutjs.com/
- Observableとバインディングの２大機能がメイン
- RouterやHistory機能がない（必要ならsammy.jsやdirector.jsなどを使う）
- サーバー通信機能（Ajax）がない（jQueryなどを使う）
- 既存の環境に導入するのが容易
柔軟性高い
スピードを持って導入しやすい

短所

調べた限り、構造化に対するベストプラクティスが提供されていないので、コードが汚くなりやすい。
Angular.jsと比較すると、data-bindですべてのview側の処理を紐づけるので読みにくくなりそう
他に比べてユーザー数少ない

採用

Windows Azureポータル
アメーバピグ（スマホ版）

印象

自由度が高く学習コストが低いので導入に関する心理的コストが低い。
Angularは覚えることが多くて憂鬱になるが、Knockoutは今すぐ使いたい、使える！って気分になる。
SPAじゃなくても双方向バインディングだけを導入したい場合に使えそう。
構造化に関しては明確な解決手段を提供してくれていないので、大規模化はキツそう。

学習コスト比較

angular.jsは独自の概念、仕様が多く学習コストが高い。開発メンバーみんなで一丸となって取り組まないとキツい感じがする。
backbone.jsは組み合わせによって学習コストが変わってくる気がする。それでもAngularと比べると独自の概念は無いので、そこまで学習コストが高くなさそう。
knockout.jsは双方向バインディングを提供するのに注力している感じなので、学習コストは低い。