BackboneとAngularの特徴を自分なりにまとめてみた



こんちは!basara669です。

世の中でこの内容は腐るほど出てると思うんですけど、自分自身でも触ってきた経験を書いておきたいってことで書いちゃいます!。
google先生に重複するコンテンツと思われないように実務で使った時の経験も入れて書いていこうと思います。

Backbone.js

メリット

  • フレームワークとしてミニマムなので、自分なりの実装ができる。(自由度が高い)
  • 自由にかけるので柔軟性も高い
  • ソースコードがそれほど多くないので読みやすい
  • 読みやすいので結果的には、内部がどんな仕組みかわかりやすい。
  • JSのMVCとしては、歴史の長い方なのでそれなりに解決方法が揃っているし、プラグインも揃っている。
  • 他のフレームワークとのバッティングが少ない(jqueryとか気にせず使える。)
  • 意外と作業分担しやすい(マークアップを行う人とjsを書く人など)
  • ダウントレンドだけれども、コミュニティはまだまだ活発
  • Backbone自体のの学習コストは低い
  • プロジェクトに組み込みやすい。

やはりBackboneのメリットは機能がシンプルなところだと思います。jQueryとかそのまま使えるので、jQuery依存のライブラリとか一緒に読み込んでも全く問題無く動作します。

導入もしやすいので、作業分担なども簡単にできます。

デメリット

  • 実は学習コストが高い
  • 自由度が高いので、開発者ごとに様々な書き方、設計ができてしまう。引き継ぎとかきっと大変…
    (Marionette.jsなどを入れることである程度書き方に統一感はもたせられる。)
  • viewとtemplateの結びつきがわかりづらい。(自分の書き方がイケてないだけかも…)
  • angularと比較すると、データバインディングは自分で記述をしなくてはいけない
  • controllerに規定が無いので、Modelに入ったりViewに入っちゃったりする。
  • ちょっとダウントレンド(まだまだ使われているサービスは多いけれども…)
  • Backbone+αになる

自由度の高いことのデメリットに近いことを書いています。かなり自由にかけちゃうので、ちゃんとここはViewしか書かないとか、決めておかないとグチャグチャになります。

Backbone.js自体は学習コストは低いのですが、設計なども考えると意外と極めるのは大変なのかなと思います。

機能を加えやすいのでほぼ必ずBackbone+αになり、その加えるフレームワークのアップデートなども気にしなくてはならないので、結構気にする点が多いです。

Angular.js

メリット

  • データバインディングとかをうまいことやってくれる
  • 機能がものすごい多い
  • angularしか使わなくて良い
  • テンプレートの外部化が明確。viewとcontrollerを完全分離出来る
  • 名前空間が汚されない
  • Backboneと違いコントローラーを明確化出来る。
  • 明確に出来るのでメンテンナンス箇所がわかりやすく、コードの品質を保ちやすい
  • フレームワークとしてしっかりしているので、書き方を統一出来る
  • カスタムディレクティブで、かなり柔軟なviewが作れる

angularに則ってコーディングをすれば、迷わず作成をすることができます。規定が多いからこそ、書き方が統一されて綺麗になるのはいいですね〜。

また、Backboneと違うangularだけでほとんど実装できるので、このプラグイン入れてみようかな〜とか悩むことが無いのも大きいメリットかなとか思います。

デメリット

  • 独自のものが多すぎて(ここまで書いていてもangular使ったこと無い人には聞き慣れない言葉が多い)学習コストが高い
  • カスタムディレクティブ作りでハマると壁にぶつかる。そして、この壁が高い
  • 他のフレームワークとバッティングしやすい(jQueryでDOM操作とか出来ない)
  • エラーメッセージが複雑。エラー箇所がわかりづらい
  • js書く人じゃなく、angularを書く人になってしまう
  • ある程度angularを使える人同士でないと共同作業しづらい
  • 同じ実装についてたくさんの方法がある(何の方法が適切でどれを選べばよいかわからない)
  • angularに無い実装方法を行うとメモリリークしたりする
  • HTMLが汚れる

やっぱりanuglarは難しいです!難しいというかangular的に書かないとエラーが出て、なんでこいつ動かないんだ!ってなります!
チャラリとDOM操作で実装とかなかなかしづらい感じです。

やはりある程度はangularを知らないとどうにもならないので、デザインがメインのコーダーさんと共同で作業する場合は、js側の人はある程度書き直すことも念頭に入れないといけないです。

あとがき

というわけで、フレームワークの評価の評価だけではなく、実務の上で気をつけるべきことを書いたつもりです!
どちらを使うべきか迷っている方の一助になればと!!

個人的には結構angularのほうがオススメかもw




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

Web Developer & Web Designer at Yahoo! Japan. Like HTML, css, JavaScript, Apple, ra-men, Angular, b-monster.