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