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

https://www.youtube.com/watch?v=HCR7i5F5L8c

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


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

AngularJSのHype (盛り上がり感)があるようなので、GoogleのMisko HeveryとBrad GreenがGoogle I/O 2013でAngularJSの設計思想について語っているのを紹介します。



アプリ開発は、雛形構文(ボイラープレート)を利用しながらデータをブラウザとDBの間でやりとりさせるのが中心で、気づいてみると同じ雛形構文を書く作業をかなり繰り返している。コードを書いてる時間よりもコードを読んでいる方に時間がとられることも多い。この雛形構文を使った作業を極力減らして、アプリに付加価値をもたらすコーディング作業だけを抽出したいと思った。


コーディング作業が効率的になる構造が欲しかった。


フレームワークにテストを組み込むが、フレームワーク自身をきっちりテストできるだけのものに絞り込みたかった。つまり、フレームワークが開発者を自然にテストするべき道に誘導するかたちが欲しかった。


Google Feedbackのプロジェクトは、3人で6ヶ月携わり、17,000行のコードを書いたが進捗が悪かった。当時、余暇の時間でつくっていたAngularJSを使えば2週間で書き直せると提案し、実際は3週間1,500行で全てを書き直したことで認められた。


シングルページのアプリをつくるのは、基本的にはDOMを操ることだが、データはRAMを介してDBとやりとりすることになる。このDOMとRAMまわりでスムーズにやりとりするという課題に対するソリューションとしてAngularJSがあり、HTMLにAngularJS構文をエクステンションとして加えるだけで実現できる。


AngularJSのMVCは、UI/View (DOM) —- notify —-> Logic/Controller (JavaScriptクラス) —- Manage —-> Data/Model (JavaScriptオブジェクト/RAM) という、View駆動型の構造。テスト、リスキンに最適。


命令型のプログラミングでは、センタリングしたいとい指示をすれば、適切な位置が計算される。しかし、これによりどういう副作用がでたのかを後からコードを検証して調べるのは困難。一方、宣言型のプログラミングでは、アクションは各ブラウザに委譲される。AngularJSでは、命令型と宣言型を開発者が適宜使い分けられることを目指している。


アニメーションは複雑。モノは、ステージにあがってくる前にDOMに入らなくてはいけない。そして再生され、タイマーに従って終了していく。ここにはAngularJSの宣言型が活きる。例えば、スライドアニメーション。これはCSSで宣言できる。そしてそのコントロールはAngularJSのng-animate directiveがする。検索ボックスに入力単語をキー入力はじめると、該当するリスト項目以外は画面から瞬時に消えていき、入力した単語を削っていくと瞬時に画面にリスト項目が追加されていく。[デモを見ると分かりやすいです。]


AngularJSのエコシステムも広がっている、ツールとしては、ChromeデベロッパーツールのエクステンションであるBatarang、IDEのWebStormAngularJSプラグイン, 開発ツール群であるYEOMAN、最も簡単で早いテストができるKarma。UIコンポーネントとしては、AngularJSのTwitter Bootstrap的な位置づけのAngularUI、商用版のKendo UIWijmo。ライブラリとしては、SQL/non-SQLのDBを扱うためのBreeze、クラウドを利用しているのであればFirebaseのAngularJS版AngularFireをデータバインディングシステムに使えて、Salesforceがモバイル向けのAngularJS開発パッケージを提供している。


GoogleのサービスでAngularJSを使ってるのは、Google Feedback、DoubleClickのディスプレイ広告まわり、YoutubeでのPlaystation3ライブプレイ。



デモもあるので、是非Video(約40分)を見てみてください。



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


AngularJSのサンプルアプリ


AngularJSの始め方


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



#angularjs #アーキテクチャ

Back