Angular、Backbone、CanJS、およびEmberの比較

（オリジナルの公開日-2013年4月12日）

JavaScript MVCフレームワークの選択は大変な作業です。 多くの要因を考慮する必要があり、選択肢の数は膨大になる可能性があります。 ToDoMVCプロジェクト（ロシア語）を見てください 。



Angular、Backbone、CanJS、Emberの4つのフレームワークを使用しました。 そこで、どちらを使用するかを決めるのに役立つ比較を行うことにしました。 選択する際に使用できるいくつかの要因を強調します。 各要因の評価は1〜5です（多くの方が良い）。 私は公平になろうとしましたが、もちろん、評価は個人的な経験に基づいています。

機能

アプリケーションの基盤を提供するフレームワークには本当に重要な機能があります。 ビューをリンクしますか？ 双方向バインディング？ フィルター？ 計算されたプロパティはありますか？ 汚れた属性？ フォームの検証？ （など）これは非常に長いリストになる場合があります。 以下は、MVC内で本当に重要な機能であると考えるものの比較です。

機能	角度	バックボーン	Canjs	エンバー
オブザーバブル	y	y	y	y
ルーティング	y	y	y	y
バインディングを表示	y	-	y	y
双方向バインディング （双方向バインディング）	y	-	-	y
ネストされたビュー（部分ビュー）	y	-	y	y
選択したウォッチリスト （フィルターされたリストビュー）	y	-	y	y

*） Observables ：変更が追跡されるオブジェクト。

*） ルーティング ：追跡対象オブジェクトが変更されると、URLアンカーが変更されます。

*） ビューバインディング ：監視対象のオブジェクトが変更されたときに、自動的にサイズ変更されたビューを使用します。

*） 双方向バインディング ：たとえば、入力フィールドに自動的に変化するビューが存在します。

*） 部分ビュー ：他のビューを含むビュー（テンプレートの視覚化）。

*） フィルタされたリストビュー ：いくつかの条件でビューを表示します。



したがって、関数の合計の実装の私の推定：

成績	角度	バックボーン	Canjs	エンバー
機能	5	2	4	5

Backboneはこれらの機能のほとんどを手動またはプラグインで実行できることに注意することが重要です。 しかし、利用可能な基本機能を考慮に入れました。

柔軟性

特殊な機能を作成する素晴らしいプラグインとライブラリが何百もあります。 原則として、標準セットのツールよりも優れています。 選択したMVCフレームワークと統合できることが重要です。



バックボーンは最も柔軟な構造であり、最小限の合意とフレームワークがあります。 Backboneを使用するときは、多くの決定を自分で行う必要があります。



CanJSは 、他のライブラリを最小限の労力で簡単に統合できるため、Backbone とほぼ同じ柔軟性を備えています。 必要に応じて、別のレンダリングエンジンを使用することもできます。 CanJSで問題なくリベットを使用しました。 ただし、通常のフレームワークツールを使用することをお勧めします。



EmberとAngularはまだ多少柔軟ですが、アクションの一部が気に入らない場合は、フレームワークに対処しなければならないことがあります。 それらを使用する場合に必要なものがあります。

成績	角度	バックボーン	Canjs	エンバー
柔軟性	3	5	4	3

ログインのしきい値とドキュメント

角度は、最初にすごい効果をすばやく作成します。 双方向同期などの複雑なことを簡単に実行できます。 しかし、基本を学習すると、学習のしきい値が高くなります。多くの機能を備えた複雑な構造が開きます。 特定の専門用語と少数の例のために、ドキュメントを読むことは困難です。



バックボーンの学習は非常に簡単です。 しかし、すぐにコードの構造を改善する方法が分からないことがわかります。 ベストプラクティスを理解するには、いくつかのチュートリアルを確認するか読む必要があります。 また、MarionetteやThoraxなどのライブラリアドオンを見つける必要があるかもしれません。 そのため、BackJSはCanJSよりも簡単に学習できるとは思いません。



CanJSは、このグループの中で最も軽量です。 canjs.usから、生産性に必要なほぼすべてを知ることができます。 もちろん、他のトレーニング方法もありますが、私はまれに助けを求める必要がありました。



Emberには、Angularと同様に高い学習しきい値もあります。 学習は簡単ですが、基本的なことを行う方法を学ぶには、最初は多くの入力が必要です。 エンバーには初期のすごい効果がありません。

成績	角度	バックボーン	Canjs	エンバー
ログインのしきい値とドキュメント	2	4	5	3

開発の生産性

フレームワークを十分に研究した後、フレームワークを使用することの生産性は、内部合意、魔法、手頃な価格のアクションスピードなど、重大な意味を持ち始めています。



角度 -もしあなたが彼をよく知っていれば、間違いなく、あなたは彼と非常に生産的であることができます。 しかし、エンバーはこの要因でさらに進んだと思います。



バックボーンでは、非常に大量の定型コードを記述する必要があります。 これは完全に不要なようで、労働生産性への直接的な脅威です。



CanJS-輝きも失望もしません。 ただし、エントリのしきい値が小さいため、非常に早く結果を得ることができます。



エンバーは 、確かに、この点で素晴​​らしいです。 それは、自動的に多くのことを行う契約のリストだからです。 契約を勉強して適用するだけで、Emberは正しく機能します。

成績	角度	バックボーン	Canjs	エンバー
開発の生産性	4	2	4	5

コミュニティ

ヘルプ、ドキュメント、および専門家を見つけるのは簡単ですか？



バックボーン コミュニティは巨大です。 StackOverflowおよびIRCで非常にアクティブです。 多数の教科書とマニュアル。



角度 、 エンバー 。 StackOverflowとIRCでもアクティブですが、ボリュームが小さいかなり大きなコミュニティです。



CanJS コミュニティは他のコミュニティに比べて小さいですが、幸いなことに、非常に活発で便利です。 小規模なCanJSコミュニティをマイナスと考える理由はありませんでした。

成績	角度	バックボーン	Canjs	エンバー
コミュニティ	4	5	3	4

インフラストラクチャ（エコシステム）

プラグインまたはライブラリのインフラストラクチャ（またはエコシステム）とは何ですか？

ここでも、Backboneは誰もが有利なスタートを切ることができます。そのためのプラグインがたくさんあります。 Angularエコシステムは、Angular UIのようなもので興味深いものになり始めています。 Emberのエコシステムは、人気が高いために改善されたはずですが、あまり発展していないと思います。 CanJSのインフラストラクチャはあまり開発されていません。

成績	角度	バックボーン	Canjs	エンバー
インフラ	4	5	2	4

大きさ

モバイル開発の重要な要素になる可能性があります。

	角度	バックボーン	Canjs	エンバー
大きさ	80K	18K	33K	141K

バックボーンは最も小さく、よく言及されています。 しかし、それだけではありません。

	角度	バックボーン	Canjs	エンバー
依存関係	依存関係を必要としない唯一のライブラリ	少なくともアンダースコアとZeptoが必要です。 Underscoreには小さなテンプレートエンジンがありますが、Mustacheなどの優れたテンプレートエンジンが必要になります。 一緒に-61K	少なくともZeptoが必要-57K	jQueryとHandlebarsが必要です。 269K

成績	角度	バックボーン	Canjs	エンバー
大きさ	4	5	5	2

性能

フレームワークを選択するとき、パフォーマンスが決定的な要因になるとは思いません。ほとんどのアプリケーションでは、それらはすべて非常に生産的だからです。 しかし、これはもちろん、フレームワークで何をするかに依存します。 パフォーマンスゲームでは、より多くの注意が払われます。



これらのライブラリを使用して、多くのパフォーマンステストを自分で見てきました（ 1つの例 ）。 しかし、これらのテストの妥当性についてはよくわかりません。 テストが正しい方向に正しいものをチェックすることを確認することは非常に困難です。



テストで読んで読んだことから、CanJSには、特にViewをデータにバインドする際に利点があるようです。 一方、Angularはオブジェクトの「ダーティチェック」を行うという理由で生産性が低いと思います。 他の人ほど速くなることはできません。 テストを見てください 。

成績	角度	バックボーン	Canjs	エンバー
性能	3	4	5	4

満期

これは成熟したフレームワークですか、実稼働環境で示されていますか、それを使用する多くのWebサイトがありますか？



Backboneには、使用できるサイトがたくさんあります。 そのコードベースはすでに大きな変更なしで2年ですが、これは成熟度の面で素晴らしいことです。



Emberはそれほど新しいものではありませんが、改善の過程で大幅に変更されており、最後の安定性は数か月で測定されています。 今回は、フレームワークが成熟しているとは考えません。



AngularはEmberよりも安定しており、テスト済みです。 しかし、バックボーンほどではありません。



CanJS-多くのサイトがないため、ソリューションはテストされていないように見える場合があります。 しかし、それはずっと長く存在します。 これはJavaScriptMVCライブラリからの抜粋です。JavaScriptMVCライブラリは2008年から存在しており、組み込みの使用に関する広範な経験があります。

成績	角度	バックボーン	Canjs	エンバー
満期	4	5	4	3

メモリリーク保護

これは、長時間開いている単一ページのアプリケーションにとって重要な要素です。 これが問題になることは望ましくありません。 残念ながら、特にDOMイベントハンドラを自分で作成する場合、これは簡単に起こります。



Angular 、CanJS、およびEmberは、ベストプラクティスのみを使用しているかのように問題を効率的に回避します。 Backboneでは、ハンドラーを適切に削除するこのジョブを実行する必要があります。

成績	角度	バックボーン	Canjs	エンバー
メモリリーク保護	5	3	5	5

個人的な好み

これはおそらく、フレームワークを選択する上で最も重要な要素です。

あなたが好きなら...	宣言型HTML	テンプレートエンジン	従来のSmallTalk MVCパターンに厳密に従う	堅いフレームワーク
次に選択してください...	角度	バックボーン	Canjs	エンバー

さらに、現時点では人気があります-Ember、Angular。

味を評価する方法はありません。

最終カウント

ここで、これらすべてを集計用のファイナルテーブルにまとめます。 これは単なる私の意見です。 重量表を誤って組み立てたと思われる場合はお知らせください。 この激しい競争で各要素の重みを同じにすると、フレームワークはほとんど勝てません。

翻訳者から：作成者はテキストに直接組み込まれた計算表（Excel / Calcなど）を持ち、読者は1クリックで各行の太さをオフにしたり変更したりできます。 私たちと一緒に-私たちはここで等しい要因を持つテーブルを見て、それを変更することができます-JsFiddleページで参照してください 。

成績	角度	バックボーン	Canjs	エンバー
機能	5	2	4	5
柔軟性	3	5	4	3
ログインのしきい値とドキュメント	2	4	5	3
開発の生産性	4	2	4	5
コミュニティ	4	5	3	4
生態系	4	5	2	4
大きさ	4	5	5	2
性能	3	4	5	4
満期	4	5	4	3
メモリリーク保護	5	3	5	5
金額	38	40	41	38

独自の評価と好みに応じて重みを選択する場合は、作成者が計算したJsFiddleのテーブルjsfiddle.net/sporto/5JVxh/lightにアクセスしてください 。 そこで、各行の重要度、および各要因に対する著者の評価を変更することができます。

したがって、それはすべて個人の好みやあなたにとっての各要素の重要性に依存すると思います。

バックボーンに関する注意

私はそのようなコメントなしで投稿を終えることができません。 ベーコンは2年前は素晴らしい図書館でしたが、 今ではもっと良いものがあります。 多くの人が人気だけでBekbonを選んでいると思いますが、これは悪循環です。



新しいプロジェクトでBackboneを使用する前に、よく考えることを強くお勧めします。 これは主に、少数の（基本的な）機能と開発者の利便性の低さによるものです。 コミュニティとインフラストラクチャのために非常に魅力的ですが、他のフレームワークが普及するにつれてこの利点はなくなります。 次に進む時間です。



投稿者：Sebastian Porto、 github.com / sporto