Enterprise x AngularJS

13,992 views

Published on

Enterprise x HTML5 Web Application Conference 2014

Published in: Technology

Enterprise x AngularJS

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

×