AngularJS #TechLunch

AngularJS
2012/08/01 (水) @ Livesense TechLunch
発表者：塩足 拓也

Transcript

1. Takuya Shiotari
2. JavaScriptMVCフレームワーク Framework UI Bindings Composed Views Web Presentation Layer Plays Nicely With Others Backbone.js ✗ ✗ ✓ ✓ SproutCore 1.x ✓ ✓ ✗ ✗ Sammy.js ✗ ✗ ✓ ✓ Spine.js ✗ ✗ ✓ ✓ Cappuccino ✓ ✓ ✗ ✗ Knockout.js ✓ ✗ ✓ ✓ Javascript MVC ✗ ✓ ✓ ✓ Google Web Toolkit ✗ ✓ ✗ ✗ Google Closure ✗ ✓ ✓ ✗ Ember.js ✓ ✓ ✓ ✓ Angular.js ✓ ✗ ✓ ✓ Batman.js ✓ ✗ ✓ ✓
3. AngularJSとは • Googleとコミュニティによって開発されている • オープンソースのJavaScriptMVCフレームワー ク • 最新バージョンは1.0.2
4. 特徴 • HTMLのシンタックスを拡張し、HTML自体をテ ンプレート言語として使うことができる • 双方向データバインディングでUI(View)からの データとJavaScriptオブジェクト(Model)を自動 的に同期する • 直感的なコントローラ
5. テンプレートとしてのHTML HTML仕様と互換性をもつアプリ固有の要素、属 性、クラスタイプなどで既存のHTMLを拡張
6. 双方向データバインディング UIでの変更をモデルに、モデルでの変更をUIに自 動的に反映する
7. コントローラ DOM構造と一致した変数スコープ
8. HTMLで再利用できるコンポー ネント カスタム要素や属性によって、動作を追加したり DOM を変更するなど、HTML のシンタックスを拡 張する手段を提供
9. フィルタリング |演算子でパイプラインのようにフィルタを追加でき る
10. 考察 • フレームワーク独自の定型的なコードがほとんど無 いので、やりたいことに注力できる • HTMLがそのままテンプレートになっているので、 JavaScriptを読み込めない環境(robotとか)には不 向き • 属性部分にコードを埋めることが出来るのは良い がやり過ぎは禁物 • minifyで77KBはでかい • 使い道がまだよくわからない