Enterprise x HTML5 Web Application Conference 2014

1. Enterprise x AngularJS
Enterprise x HTML5 Web Application
Conference 2014

2. {{ about me }}
金井 健一
フリーランス
フロントエンド方面のお仕事
can_i_do_web
facebook/can.i.do.web
AngularJS Japan User Group 管理人
html5j Web先端技術味見部 部長

3. {{ agenda }}
• 開発環境
• demo
• エンタープライズと AngularJS
• まとめ（参考サイトの紹介）

4. {{ note }}
今回の内容は、あくまでも AngularJS を
エンタープライズな業務で使うために、のお話です。

5. {{ environment }}
詳しくはWEBで

6. {{ environment }}
try

7. {{ environment }}
無理をしてまで使わない！

8. {{ environment | test }}
Karma
http://karma-runner.github.io/0.8/index.html

9. {{ environment | test }}
テストの自動化には GRUNT が便利！

10. {{ environment | test }}
テストは目視でチェックだろjk！な
プロジェクトには不要です
Karma
http://karma-runner.github.io/0.8/index.html

11. {{ environment | test }}
テストコードの品質はどう担保するの？
→エンプラ案件だと検討事項かも
Karma
http://karma-runner.github.io/0.8/index.html

12. {{ environment }}
以上が巷で噂されている
開発効率アップツール達のご紹介でした。

13. {{ environment }}
環境構築での最小構成
AngularJS 関連ファイルのみ！
必要に応じてツールを追加していくのもアリです。

14. {{ demo }}

15. {{ demo | keyword }}
• ng-view
• ng-repeat
• form バリデーション
• factory
• filter
• カスタムタグ

16. {{ Enterprise x AngularJS }}

17. {{ Enterprise x AngularJS }}
追記：このデータ間違えてるかもしれません…

18. {{ Enterprise x AngularJS }}
BACKBONE
AngularJS
Knockout
Sencha
設計思想
シンプル
フルスタック
シンプル
フルスタック
学習コスト
低い
高い※
低い
高い
自由度
高い
低い
高い
低い
• シンプルなフレームワーク
• サードパーティ製のプラグインでの拡張がほぼ必須
• フルスタックなフレームワーク
• 基本的に用意された機能でまかなえる
• サードパーティ製のプラグインでの拡張も可能

19. {{ Enterprise x AngularJS }}
BACKBONE
AngularJS
Knockout
Sencha
設計思想
シンプル
フルスタック
シンプル
フルスタック
学習コスト
低い
高い※
低い
高い
自由度
高い
低い
高い
低い
• もちろん、学習コストは低いに越したことはない
• コードの品質管理のため、自由度が低い方が好ましい

20. {{ Enterprise x AngularJS }}
• コードの品質管理のため、自由度が低い方が好ましい
• 自由度が高いとコードがカオスになる
• メンテナンスが大変
• デスマモード突入
• お家に帰りたい
• 「 … 」

21. {{ Enterprise x AngularJS }}
学習コスト：高い※ の理由
• （体感的にですが） ある一定までは誰でも簡単に覚えられる
• Controller の定義・処理の書き方
• ng-xxx の使い方（built-in directive）
• そこからは急に難しくなります
• custom directive
• service

22. {{ Enterprise x AngularJS }}
学習コスト：高い※ の理由
• （体感的にですが） ある一定までは誰でも簡単に覚えられる
• Controller の定義・処理の書き方
• ng-xxx の使い方（built-in directive）
役割分担
• そこからは急に難しくなります
• custom directive
• service

23. {{ Enterprise x AngularJS }}
AngularJS で機能を「使う人」
AngularJS で機能を「作る人」

24. {{ Enterprise x AngularJS }}
jQuery から AngularJS
• AngularJS + オプショナルな JS ファイルの導入で開発可能
• 自由度は低いため、コードの品質は保ちやすい
• 学習コストは高いが、段階的である
• 一定段階までは学習コストが低いため、機能を使う側の人への負担が
少ない（jQuery や BACKBONE を覚えるより簡単かも。）

25. {{ Enterprise x AngularJS }}
jQuery から BACKBONE.JS / Knockout
• サードパーティ製のライブラリの導入がほぼ必須
• （社内的な手続きやライブラリの検討・検証が面倒？）
• 学習コストは低いが、自由度が高い
• jQuery 利用時に抱えていた問題は解決できないのでは？
• ライブラリを導入していく度に縛りをきつくなり、学習コストが増す

26. {{ Enterprise x AngularJS }}
jQuery から Sencha
• Sencha Ext.js 単体のみで開発可能
• 自由度が低いため、コードの品質が保ちやすい
• VBのようなドラッグ＆ドロップでUIを構築していくツールもある
• メンテナンスが大変なコードが、自動生成される可能性あり
• 学習コストは高く、開発者全員の高い Sencha スキルが必須
• ただし、有償サポートをうけることも可能

27. {{ Enterprise x AngularJS }}
AngularJS はかなりエンプラ向き！

28. {{ conclusion }}
AngularJS Batarang
Chrome ウェブストア からダウンロード

29. {{ conclusion }}
AngularJS Ninja
http://angularjsninja.com/

30. {{ conclusion }}
js STUDIO
http://js.studio-kingdom.com/angularjs

31. {{ conclusion }}
Qiita
http://qiita.com/tags/angularjs

32. {{ conclusion }}
Onsen UI
http://onsenui.io/

33. {{ conclusion }}
AngularJS Japan User Group
https://groups.google.com/forum/#!forum/angularjs-jp

34. AngularJS に乗り換えよう

35. ご清聴ありがとうございました。