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