Code

2013年12月11日水曜日

AngularJS コンセプトから

 最近 AngularJS Frameworkを勉強しながら、web app を作っています。jQuery や、backbone.js, ember.js, knockout.js などのライブラリと違うタイプで、使いこなすまで、ちょっと時間がかかるかもしれません。ember.js もそうですけど。。。
 ただ、ある程度慣れると、開発のスペードは結構あがりますので、損はないでしょう。

 コンセプトから:
 jQuery は 主に DOM を操作するためのライブラリで、AngularJS は MVVM の Framework です。ライブラリは Function を呼び出すことで、機能を実現しますが、 Framework だと、"Don't call me. I will call you." 式になります。つまり、自分は部品を提供して、Framework がそれを呼び出して、機能を実現します。
 AngularJS をがロードされるとき、まず ng-app という directive を探して、compile されます。されに、その下のすべての ng- から始まった core directive や、自分で登録した directive をスキャンされて、scope を作ります。その後、controller が初期化されて、このとき、controller にあった model, viewModel が初期化されて、link されます。すると、ウェブページが表示されるようになります。
 この過程はかなり複雑ですし、各 directive も違うし、操作 Queue の作りも簡単ではありません。こちらのコードは今まで読んだ JS code の中で神様の領域に入るような気がします。:)まぁ、結構かみコードは結構ありますけど。
 通常の DOM 操作より、AngularJS は two-way data binding で Developer を複雑、面倒なデータアップデート処理から解放して、機能やアーキテクチャーに集中させるようになります。
 
さらに、$injector で Dependency Injection を他の Framework から導入されます。そうすると、Unit test や automatic integration test も大変簡単になります。例えば、service に provider, factory を定義して、違うデータソースからデータを取得して、上の Controller がそれに何も知らなくても、ただ関数を呼ぶだけなので、レイアの Decoupling が実現されました。

あと、$filter や、directive も自分で定義できるし、ng-include で template のサポートもできます。handlebarsよりわかりやすいし、機能的にはかなり面倒な、簡単な部分をカバーしています。

まぁ、一般的な Web App だったら、 jQuery が十分だと思いますけど。例えば、ボタンで表示部分の変更、Drop down リストの変更などは AngularJS を使うより、jQuery のほうが速いし、簡単です。underscore.js などのライブラリと一緒に使うと、便利です。
もし、データ操作の多い、データによる画面更新の多い Web app だったら、Angular.js を使ったほうが遥かに開発効率があがります。特にbootstrap と一緒に使うとき。

 私は以前他の js library を使ったことも結構ありますが、 AngularJS は開発思想から違うので、Think in AngularJS が必要ですね。また後日で。

 それでは。

0 件のコメント:

コメントを投稿