enterprise x angularjs
DESCRIPTION
Enterprise x HTML5 Web Application Conference 2014TRANSCRIPT
![Page 1: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/1.jpg)
Enterprise x AngularJS
Enterprise x HTML5 Web Application Conference 2014
![Page 2: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/2.jpg)
{{ about me }}
AngularJS Japan User Group 管理人 html5j Web先端技術味見部 部長
金井 健一
フリーランス フロントエンド方面のお仕事
can_i_do_web
facebook/can.i.do.web
![Page 3: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/3.jpg)
{{ agenda }}
• 開発環境
• demo
• エンタープライズと AngularJS
• まとめ(参考サイトの紹介)
![Page 4: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/4.jpg)
{{ note }}
今回の内容は、あくまでも AngularJS を エンタープライズな業務で使うために、のお話です。
![Page 5: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/5.jpg)
{{ environment }}
詳しくはWEBで
![Page 6: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/6.jpg)
{{ environment }}
try
![Page 7: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/7.jpg)
{{ environment }}
無理をしてまで使わない!
![Page 8: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/8.jpg)
{{ environment | test }}
Karma http://karma-runner.github.io/0.8/index.html
![Page 9: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/9.jpg)
{{ environment | test }}
テストの自動化には GRUNT が便利!
![Page 10: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/10.jpg)
{{ environment | test }}
Karma http://karma-runner.github.io/0.8/index.html
テストは目視でチェックだろjk!な
プロジェクトには不要です
![Page 11: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/11.jpg)
{{ environment | test }}
Karma http://karma-runner.github.io/0.8/index.html
テストコードの品質はどう担保するの?
→エンプラ案件だと検討事項かも
![Page 12: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/12.jpg)
{{ environment }}
以上が巷で噂されている
開発効率アップツール達のご紹介でした。
![Page 13: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/13.jpg)
{{ environment }} 環境構築での最小構成 AngularJS 関連ファイルのみ! 必要に応じてツールを追加していくのもアリです。
![Page 14: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/14.jpg)
{{ demo }}
![Page 15: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/15.jpg)
{{ demo | keyword }}
• ng-view
• ng-repeat
• form バリデーション
• factory
• filter
• カスタムタグ
![Page 16: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/16.jpg)
{{ Enterprise x AngularJS }}
![Page 17: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/17.jpg)
{{ Enterprise x AngularJS }}
追記:このデータ間違えてるかもしれません…
![Page 18: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/18.jpg)
{{ Enterprise x AngularJS }} BACKBONE AngularJS Knockout Sencha
設計思想 シンプル フルスタック シンプル フルスタック
学習コスト 低い 高い※ 低い 高い
自由度 高い 低い 高い 低い
• シンプルなフレームワーク • サードパーティ製のプラグインでの拡張がほぼ必須
• フルスタックなフレームワーク • 基本的に用意された機能でまかなえる
• サードパーティ製のプラグインでの拡張も可能
![Page 19: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/19.jpg)
{{ Enterprise x AngularJS }} BACKBONE AngularJS Knockout Sencha
設計思想 シンプル フルスタック シンプル フルスタック
学習コスト 低い 高い※ 低い 高い
自由度 高い 低い 高い 低い
• もちろん、学習コストは低いに越したことはない
• コードの品質管理のため、自由度が低い方が好ましい
![Page 20: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/20.jpg)
{{ Enterprise x AngularJS }} • コードの品質管理のため、自由度が低い方が好ましい
• 自由度が高いとコードがカオスになる
• メンテナンスが大変
• デスマモード突入
• お家に帰りたい
• 「 … 」
![Page 21: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/21.jpg)
{{ Enterprise x AngularJS }}
学習コスト:高い※ の理由
• (体感的にですが) ある一定までは誰でも簡単に覚えられる
• Controller の定義・処理の書き方
• ng-xxx の使い方(built-in directive)
• そこからは急に難しくなります
• custom directive
• service
![Page 22: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/22.jpg)
{{ Enterprise x AngularJS }}
学習コスト:高い※ の理由
• (体感的にですが) ある一定までは誰でも簡単に覚えられる
• Controller の定義・処理の書き方
• ng-xxx の使い方(built-in directive)
• そこからは急に難しくなります
• custom directive
• service
役割分担
![Page 23: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/23.jpg)
{{ Enterprise x AngularJS }}
AngularJS で機能を「使う人」
AngularJS で機能を「作る人」
![Page 24: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/24.jpg)
{{ Enterprise x AngularJS }} jQuery から AngularJS
• AngularJS + オプショナルな JS ファイルの導入で開発可能
• 自由度は低いため、コードの品質は保ちやすい
• 学習コストは高いが、段階的である
• 一定段階までは学習コストが低いため、機能を使う側の人への負担が
少ない(jQuery や BACKBONE を覚えるより簡単かも。)
![Page 25: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/25.jpg)
{{ Enterprise x AngularJS }} jQuery から BACKBONE.JS / Knockout
• サードパーティ製のライブラリの導入がほぼ必須
• (社内的な手続きやライブラリの検討・検証が面倒?)
• 学習コストは低いが、自由度が高い
• jQuery 利用時に抱えていた問題は解決できないのでは?
• ライブラリを導入していく度に縛りをきつくなり、学習コストが増す
![Page 26: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/26.jpg)
{{ Enterprise x AngularJS }} jQuery から Sencha
• Sencha Ext.js 単体のみで開発可能
• 自由度が低いため、コードの品質が保ちやすい
• VBのようなドラッグ&ドロップでUIを構築していくツールもある
• メンテナンスが大変なコードが、自動生成される可能性あり
• 学習コストは高く、開発者全員の高い Sencha スキルが必須
• ただし、有償サポートをうけることも可能
![Page 27: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/27.jpg)
{{ Enterprise x AngularJS }}
AngularJS はかなりエンプラ向き!
![Page 28: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/28.jpg)
{{ conclusion }}
AngularJS Batarang Chrome ウェブストア からダウンロード
![Page 29: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/29.jpg)
{{ conclusion }}
AngularJS Ninja http://angularjsninja.com/
![Page 30: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/30.jpg)
{{ conclusion }}
js STUDIO http://js.studio-kingdom.com/angularjs
![Page 31: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/31.jpg)
{{ conclusion }}
Qiita http://qiita.com/tags/angularjs
![Page 32: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/32.jpg)
{{ conclusion }}
Onsen UI http://onsenui.io/
![Page 33: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/33.jpg)
{{ conclusion }}
AngularJS Japan User Group https://groups.google.com/forum/#!forum/angularjs-jp
![Page 34: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/34.jpg)
AngularJS に乗り換えよう
![Page 35: Enterprise x AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042714/55660473d8b42aa6628b4b7d/html5/thumbnails/35.jpg)
ご清聴ありがとうございました。