JavaScript
Backbone.js
AngularJS
knockoutjs

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

More than 3 years have passed since last update.

最近の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が、かなり遅いせいでどうしてもモッサリしがち




採用


印象


  • 良くも悪くもフルスタックなので足りない機能を他から持ってくる必要がない。

  • 仕様が膨大で理解が難しそうな分、理解してしまえばそうそう破綻しなさそう。

  • マークアップや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でのデータバインディングで解決できそう




採用


印象


  • ライブラリ自体は薄いが設計の背骨を用意するので、その設計に対する理解は必要。

  • 構造化に関する解決手段が提供されていて(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とバインディングの2大機能がメイン

    • 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は双方向バインディングを提供するのに注力している感じなので、学習コストは低い。


比較しての全体的な印象


  • サーバーサイドのフレームワークで言うとangular.jsはRails、knockout.jsはSinatra、backbone.jsはなんだろう。

  • angular.jsは学ぶのツラい、backbone.jsはMVCについての理解だけでいけそう、knockout.jsは今すぐにでも使えそう

  • コードをキレイにする仕組みを導入しようとすると、どうしても学習コストが膨らむ?


参考URL

KnockoutJSの長所/短所とAngularJSとの比較

http://qiita.com/nantekkotai/items/009e5bfb6e0e05df30f5

Angular js or_backbonejs

http://www.slideshare.net/OmasaYusaku/angular-js-orbackbonejs

Angular, Ember, Backbone:どのJavaScriptフレームワークを選ぶべきか?

http://readwrite.jp/archives/5008

BackboneとAngularを比較する

http://www.infoq.com/jp/articles/backbone-vs-angular

BackboneマンがAngular勉強会いってきたけどそんなに好きになれなかった話 #ng_jp

http://mizchi.hatenablog.com/entry/2013/12/04/124006

MVCフレームワークの選択基準と主要フレームワークの特徴

http://www.socialtoprunners.com/2012/10/02/%E9%96%8B%E5%82%AC%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88-%E7%AC%AC2%E5%9B%9E-js%E7%B3%BB%E5%8B%89%E5%BC%B7%E4%BC%9A/

AngularJSを導入した感想

http://washiiku.hatenablog.com/entry/2014/01/26/121042

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

http://route477.net/d/?date=20130626