usotech

erratic magical world

Angular.js と Ember.js どっちが良いの?

Which one of angular.js and ember.js is the better choice?

最近 Web っ子の仲間入りをしたので RIA 関連を調べています。というわけで JS 門外漢ながら JavaScript MVC Framework を調べていたところ、こんな質問を Quora で発見。斜め読みしてみました。以下では Vote が多い Answer を 3 つピックアップして斜め読みしています。全体的に意訳ですが明らかな誤りなどあればご指摘下さい。

Patrick Aljord

  • angularjs_scaffold 作者。
  • 最初は Ember 使おうとしたけど API コロコロ変わるしドキュメント不足してたから Angular 使い始めた。
  • Ember は Web App 作ってる感じじゃない。iOS (Cocoa) にインスパイアされてる。
  • Angular は Web App って感じ。Angular は独自のオブジェクトとか JS のメソッドの上書きしない。ピュアだし将来の JS にそのままつながる。
  • Angular 使ってたら君は将来の JS を学べるけど、Ember 使ってたら Ember のコンセプトを学ぶことになる。
  • (高速だぜとか言ってるけど最近は Ember の方が速いという話もあるので置いておきます)
  • すげーテストされてるぜ。

Angular はこんな感じ。まさに Model Driven View って感じでクリーンでしょ?

<p>{{hello}}</p>
<ul>
    <li ng-repeat="element in array">element</li>
</ul>

Misko Hevery

  • Angular 使ってる, Ember は良く知らないからバイアスかかってるかも。
  • HTML にロジック書くのは間違ってる。Angular が HTML に書かせるのは Binding だけ。
  • でも Binding もまぁある種のロジック。じゃあそれをどこに書くか?
    • コード:駄目でしょ。めっちゃ難しくなる。
    • HTML:Angular はコレ。
    • メタデータファイル:これ使ってるのを見たことないけど、メタデータで View と Model に結び付けるのバカっぽい。
  • Angular は HTML/CSS を活かせるから良いよね。

Tom Dale

  • Ember.js の作者の一人
  • クライアントサイド Web App は新しいものじゃない。
    • 80 年代からコードはローカルで動いてたしネットワーク越しにデータをフェッチしてた。
    • 変わったのはひとつだけ。コードはブラウザのサンドボックスで動くようになったってこと。
  • じゃあ今までどうやってたか?
  • ネイティブな App に伍するには洗練されたツールと正しいコンセプトが必要。
    • Ember は Cocoa のような成功したフレームワークからコンセプトを借りてきて十分に議論してる。
    • でも Web には制限もある。そこで Ruby や Rails が Backbone からもアイディアを借りてきた。
    • そうやって Ember はモダンな Web App をつくれるパワフルなツールになった。
  • 僕の意見では Angular は Ember よりもっと「研究的」。
    • Angular は scopes や directives や transclusion を学ぶことを要求する。
  • Production で使うなら Ember オススメ。
    • ZenDesk は Ember で書き直された。
    • Square は綺麗でレスポンシブな UI をつくるために Ember 使ってる。
    • Groupon のモバイル Web App の多くは Ember 使ってる。
    • 他にも多くのスタートアップが使ってる。
  • もう 1 回言っておくけど Angular は研究用。でも僕等はリアルな世界でやってるんだぜ。
  • Ember は View に Handlebars 使ってる。
  • 一方 Angular は Annotated HTML。
    • 個人的には属性を使ってアノテートされた HTML はちょっとノイジーで読みづらい。
  • それに(Ember.js みたいな)string-based template には利点もある。
    • サーバー側でプリコンパイル出来る。
    • Angular は最初に DOM を全部トラバースして起動しないといけないし、大きなアプリになると遅そう。
    • Angular は(PhantomJS みたいな)完全なブラウザ環境が必要。でも Handlebars は 100% JS だから node.js や Rhino があれば良い。
    • string-base template は分割しやすい。
  • Ember は Handlerbars のプロパティにバインド出来るだけ。
  • Angular は任意の式を埋め込める(しかも live update)。
  • Ember 負けてる?
    • No
    • Ember は JS 側で computed properties 作れる。
    • Angular はイベントの度に式を再評価しないといけない。
  • Ember はプロパティのバインドを提供してるだけ。
  • 一方 Angular はカスタムパーサ作ってる。
    • 高速化大変。
  • Angular は Dirty checking に頼ってるけどそれって高価じゃね?
  • Angular は素晴らしいけどそれほど規模の大きくないアプリ向き。
  • Ember は少々やることが多くなるかもしれないすげーアプリを作りたいならオススメ。

雑感

長らく普通のリッチクライアントを作っていた身からすると直感的なのは Ember.js です。アノテートされた HTML というか宣言的な UI というのはどうにも好きになれません。理由は 2 つあって

  • View に Binding 情報や制御文が埋め込まれていることにより, View の再利用が難しい
  • 宣言的に記述出来ないコンポーネントが表れた場合の拡張性が不安

というところです。勿論ここに書かれている通り、比較的シンプルな UI(大抵のコンシューマ向け Web サービスなど)では Angular.js の方が直感的で開発コストも低いように思えます。一方、複雑なフォームが存在したり大量の画面を生成しないといけないようなアプリケーション(業務アプリケーションなど)では Ember.js の方が向いているのではないかと感じました。Ember.js は View を組み合わせてより大きな View を作ることが出来るので、個々に作った部品を再利用することが出来ます。それから長年複雑なリッチクライアントを作ってきた経験からすると、Ember.js の computed properties は非常に重要な機能で、「分かってる」感があって少し安心します。