Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular js開発事例

2,785 views

Published on

AngularJS開発を通して感じたこと

Published in: Technology
  • Be the first to comment

Angular js開発事例

  1. 1. AngularJS開発事例 ユース・情報システム開発 武山 俊
  2. 2. Agenda 私 •武山 俊とは 使ってみて •AngularJSを使ってみて まとめ •まとめと対策
  3. 3. 武山 俊 とは • ユース・情報システム開発 • 2011年入社 4年目 • システム開発部 • Java JavaScript Perl PHP • 人事教育部 • 内定者研修、社内勉強会etc… • 芝浦工業大学大学院 工学マネジメント研究科在籍
  4. 4. AngularJS開発事例
  5. 5. 事例概要 • 大学におけるアクティブラーニング支援システム • エンジニア2名 デザイナ1名 • 開発期間 • 2014/6 ~ 2014/10 ( 実働 2014/10 ~ 2014/12 )≒大炎上
  6. 6. 事例概要 • MEAN環境 • MongoDB + Express + AngularJS + Node.js • 12 Controllers • 8 Services • 6 Directives • CoffeeScriptで5klocくらい
  7. 7. AngularJSを選んだ理由 • 流行の技術だったから • レガシーな技術で作られたシステム=ダサイ • それを導入している大学=ダサイ • モジュラリティの高いシステムを組みたかった • リアルタイムにコミュニケーションできるシステ ムにしたかった
  8. 8. AngularJSを使い始めてー始め • jQueryのようにとりあえず使う!はできない • というか有難みをあんまり享受できない • あれもこれも覚えなきゃいけない • DOM操作しにくい • jqLiteはあるけど… • 日本語のドキュメントが少ない!
  9. 9. AngularJSを使い始めてー中盤1 • 双方向バインディング凄く便利! • AngularJSに委譲しているので、バインド対象を意識 しなくていい • サーバとクライアントを分離できる! • モックをユーザに早く確認してもらえる • 分業がはっきりできる • Directiveすごい便利! • デザイナの負担を軽減できる(後述)
  10. 10. AngularJSを使い始めてー中盤2 • 実用十分なライブラリー群
  11. 11. AngularJSを使い始めてー中盤3 • 実用十分とはいえ枯れたライブラリはない • AngularJS自体がまだ枯れてないので当たり前 • やっぱり学習コストは高い • 実装方針・イベント発火仕方など • HTML=プログラミング • デザイナの負担が大きい
  12. 12. AngularJSを使い始めてー中盤4 • Coffee ScriptやJadeが必須に感じる • とくにJade(テンプレートエンジン)は必須 • DirectiveがあるとはいえHTMLがかなり複雑になる
  13. 13. AngularJSを使い始めてー終盤 • Controllerの肥大化が酷い • Projectの反省点 • 基本はarticle、場合によってsectionごとにControllerにし ても良いのかもしれない • Serviceをもっと活用すべきだった • Controller分割の肝 • 重い • 調子に乗るとクライアントの負荷が高い • SEO対策どうしよう
  14. 14. AngularJS導入のメリット • 双方向バインドはやっぱり正義 • DOM操作をしなくていい • サーバとクライアントの分業が容易 • スプリントを回しやすい
  15. 15. AngularJS導入のデメリット • 学習コストが高い • 凝ったつくりにすると動作が重い • SEO対策が面倒くさい
  16. 16. 学習コストが高い • Service・Directiveが使えないと話にならない • DOM構造とオブジェクトが密に関連するので、 旧来のデザイナには辛い • UIデザインができないエンジニアにも同様に辛 い • これは頑張るしかない
  17. 17. 動作が重い • 双方向バインディングやDirectiveを使いすぎる と重い • One-time bindingを使う • 場合によってはDirectiveをあきらめる • ngCloakとUIデザインで体感速度を上げる
  18. 18. SEO対策が面倒くさい • GoogleのクローラはAngularJSを処理してくれ ない • その結果何もないページになってしまう • 静的なページをホストする • PhantomJS経由でホストする
  19. 19. ありがとうございました。

×