Embed Size (px)
DESCRIPTION
AngularJS と Ameba コミュニティサービス フロントエンド開発の相性の良さについて
Citation preview
Angularで
Amebaコミュニティサービス開発
アメーバ事業本部
フロントエンドディベロッパー 五藤 佑典
Amebaコミュニティサービス 開発の特徴
フロントは比較的少人数（２、3人）で開発フロント専任じゃない人も開発
SP版とPC版を平行運用・開発している
サービス横断で似たUIを実装することが多い
AngularとAmebaコミュニティサービスは 相性が良いんです
AngularとAmebaコミュニティサービスの 相性の良さ
フロントエンドの複数人開発に効く
SP版とPC版の平行運用・開発に効く
横軸展開に効く
フロントエンドの複数人開発に効きます
フロントエンド４人体制
マークアップ得意
マークアップ得意
サーバサイド得意self
小さなコンポーネントを たくさん作ってモジュール量産
infinite scroll
lazyload
google analytics
button- follow
modal
<si-button-follow></si-button-follow>
<img si-lazyload=“tn.img” />
<ul ng-repeat=“item in list” si-infinite-scroll=“addItem()”> <li>{{item.name}}</li> </ul>
<a href=“photo.img” si-modal> <img lazyload=“photo.img” /> </a>
マークアップの感覚で がしがし実装
１ストーリーに対して分業しやすい
テンプレート作成
共通コンポーネント作成
コントローラーで繋げる平行開発しやすい
フロントの開発手順を共有しやすい
1. ここは Controller で～～作る
2. この処理は Service で～～作る
3. この処理は Filter を作る
4. ここの処理は～～という Directive と組み合わせる
Angular特有の概念も多いが、それゆえに共通言語が増え、 実装手順の示し方が明確になる。
SP版とPC版の 平行運用・開発に効きます
PC版開発からジョイン
Angular導入
PC版リリース後はSP版と平行運用
PC版に入ってるあのモジュールを
SP版に入れましょう！
すぐリリースしましょう！
Producer
SP版とPC版で同じモジュールを実装
UIデザインが違うだけでロジックはほぼ同じ
photo by Melissa Ann Barrett
JS
DOMを直接いじらない利点を活かしてJSは１ソース
PC tmpl SP tmpl
（テンプレートだけ別々）
Browserifyで必要なモジュールだけ各々require
SPとPCでコントローラー部分に多少の差異が出ることがあるが、基礎コントローラーを作って各々angular.extend()してやるとコードの差異は最小限
横軸展開に効きます
Angularと横軸展開AnuglarJS人気なおかげでAngularを使う新規サービスが増えてきた
Amebaサービス横断で同じようなUIを実装をすることも多い
今まで同様の実装を各々のサービスで実装してきた
AngularJS Working Group 活動中
• Ameba でよくあるパターンの共有モジュール化
• 勉強会したり、欲しい機能を列挙して、開発中
• 誰かが実装した機能をモジュールとして共有しやすい場に
余談
途中から導入しても怖くない
ラッキーだった点SP版はほぼjQueryだけで開発していたので、とてもピュア
マルチページアプリケーション
サーバサイドのAPIの設計がイケてた
とはいえ、既存のサービスにAngular入れるのはそこそこ大変。。
jQueryとは併用する
jQueryに慣れた開発者はjqLiteだけだとじわりと辛い
jqLiteではなくjQueryを使う
jQueryとは併用する
既存のコードをできる限り再利用
ディレクティブでラップしておいてあげれば綺麗にAngularに組み込める
jQueryで書かれた既存処理をディレクティブでラップする
jQueryとは併用する
カスタムディレクティブなどを組み込むときにコンパイルされないので
jQueryでDOMを生成している箇所を$compileする処理に置き換える
既存処理とAngularの連携
新規モジュール用のスコープを直接取る
ルートスコープを取得してブロードキャストする
ng-appを設定する要素を無闇に変えない
既存処理との連携も少なくない
