AngularJSで苦労したポイントの事例

http://lhorie.blogspot.ca/2013/09/things-that-suck-in-angularjs.html

1 comment | 0 points | by Jshiike 約4年前


Jshiike 約4年前 | ▲upvoteする | link

AngularJSの盛り上がりは何回か取り上げてきた(このポストの最後にリンクあります。)ので、今日は、改善すべき点を指摘しているブログとその議論を紹介します。



(New frameworks) are great at getting you to about 80% of what you need REALLY fast. The next 10% takes some investigation but its doable. But that last 10%,……You’re working for the framework rather than it working for you.



というコメントがあるように、まだ苦労するところはあるようです。ちなmに、このブログの筆者はAngularJSでの開発を続けており、他のフレームワークを勧めるという意図ではないと強調してますので、それを前提に内容確認ください。


ところで、Go言語やMongoDBと違って、皆、冷静にpros/consを議論できているのは何故なんだろう?



1) Documentation


テストガイドは完成していない。


APIドキュメントにサンプルコードないものが多い。


ngSelectedはbooleanでなくてstring、.bootstrap ( )の2番目のパラメータはstringでなくてarrayなど、はまりそうなところの説明がいまいち。


重要なdirectivesの説明が不親切。


2) DOM integration & directives


repeaterの中の特定のエレメントにフォーカスする設定とか、別のエレメントのサイズ/位置にあわせてサイズ/位置を決める設定など、一般的なDOMの機能のサポートがない場合が多い。


スコープパラメタを加えると、ngModelController.$renderは壊れ、transclusionはスコープ継承のふるまいを変える。


二つ以上のdirectiveは、同じng-modelバインディングだと無限ループに陥る。(かつイベントハンドラーの変更??)


ngRepeatやunstable-onlyのngIfなどコンパイルされたdirective(再初期化された子directive)だと、何も変更してないのに、イベントハンドラーが起きる。


ngRepeatにネストしたdirectiveだと、そのライフサイクルをコントロールできない。AJAXコールでリストが変更されると、repeaterの再描画パフォーマンスが極度に落ちる。


非同期性はngIncludeで抽象化されていて、directiveのtemplateUrl (参照ビデオ)引数でバグ修正が面倒になる。


ページで色んなことが平行しておきる中$apply cycleに起因してもろもろ起きるのでコードにコメントを残す必要がでてくる。


3) Business Logic


jQueryの$.whenにあたるものがないので、複数のリクエストの依存関係の管理が難しい。(データを一つのレコードにまとめる複数のバックエンドコールをするには、$q.allがあるのでは?


ネストしたcontrollerがある大規模アプリは要注意。いつinstanceが生成され、どのデータがいつ使えて、どの変数がプロミスをもっていていつ解決されるか、何がどこで使えるか、など全てがスコープ継承のメカニズムと結びついていて、グローバルステートを思わせ混乱する(?)。


双方向のバインディングはトリッキー。あるdirectiveは変数のタイプを強制し、意味不明にstringでなくbooleanを使わせたりする。


4) Filter Caching


リピーターのフィルターは素直にはキャッシュできない。フィルターリストの長さを表示したいとき、フィルタリストを再計算するか、HTMLビューにアサイメントのロジックをもってくるか、データの初期化の過程でフィルターをcontrollerにリファクタリングするか、いずれも望ましくない選択肢になる。


5) 3rd Party integration


Angularの外からservice/filter/controllerをコールするのは、まわりくどいし、直感的でないので、レガシーコードのあるプロジェクトでは使いづらい。


6) Internal Complexity


内部の挙動がわかりづらい。例えば、HTTPリクエストを取り消すような簡単なリクエストも、全てのレベルの抽象化を考慮して検討しなくてはいけない。抽象化レイヤの構造についての理解がしっかりないとバグが直しづらいところが、jQueryよりつらい。


7) Testability


ビルトインされたテストメカニズムがない。


angular-mockngApp directiveと互換性がないので、jasmine ConsoleReporterを使ったページ内テストができない。


結合テストはngAppのみでできるので、レガシーコードを抱えた複数のアプリのページはテストできない。(一般的にDOMのインタラクションのテストはどのライブラリでも大変なので、directiveを極力使わない方が良いという意見もあり。



GoogleのMisko Hevlyが先週のHTML5 Devconfでプレゼンした”What is in store for the future of ANgularJS” はこちら


Things that suck in AngularJS
https://news.ycombinator.com/item?id=6630156



AngularJSのサンプルアプリ


AngularJSの始め方


AngularJSの設計思想 [Google I/O 2013]


Ruby on RailsとAngularJSとNode.jsを比較してみた



#angularjs

Back