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でAmebaコミュニティサービス開発

641 views

Published on

AngularJS と Ameba コミュニティサービス フロントエンド開発の相性の良さについて

Published in: Technology
  • Be the first to comment

AngularでAmebaコミュニティサービス開発

  1. 1. Angularで Amebaコミュニティサービス開発 アメーバ事業本部 フロントエンドディベロッパー 五藤 佑典
  2. 2. 自己紹介 @ygoto3_ ygoto3.com フロントエンドディベロッパー @
  3. 3. http://simplog.jp/ ぜひお使いください!
  4. 4. Amebaコミュニティサービス 開発の特徴 フロントは比較的少人数(2、3人)で開発 フロント専任じゃない人も開発 SP版とPC版を平行運用・開発している サービス横断で似たUIを実装することが多い
  5. 5. AngularとAmebaコミュニティサービスは 相性が良いんです
  6. 6. AngularとAmebaコミュニティサービスの 相性の良さ フロントエンドの複数人開発に効く SP版とPC版の平行運用・開発に効く 横軸展開に効く
  7. 7. フロントエンドの 複数人開発に効きます
  8. 8. フロントエンド4人体制 マークアップ 得意 マークアップ 得意 サーバサイド self 得意
  9. 9. 小さなコンポーネントを たくさん作ってモジュール量産 infinite scroll lazyload google analytics button-follow modal
  10. 10. <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> マークアップの感覚で がしがし実装
  11. 11. 1ストーリーに対して分業しやすい テンプレート作成 共通コンポーネント作成 コントローラーで繋げる 平行開発しやすい
  12. 12. フロントの開発手順を共有しやすい 1. ここは Controller で~~作る 2. この処理は Service で~~作る 3. この処理は Filter を作る 4. ここの処理は~~という Directive と組み合わせる Angular特有の概念も多いが、それゆえに共通言語が増え、 実装手順の示し方が明確になる。
  13. 13. SP版とPC版の 平行運用・開発に効きます
  14. 14. PC版開発からジョイン Angular導入 PC版リリース後は SP版と平行運用
  15. 15. PC版に入ってるあのモジュールを SP版に入れましょう! すぐリリースしましょう! Producer
  16. 16. SP版とPC版で同じモジュールを実装 UIデザインが違うだけでロジックはほぼ同じ
  17. 17. photo by Melissa Ann Barrett
  18. 18. JS PC tmpl SP tmpl DOMを直接いじらない利点を活かしてJSは1ソース (テンプレートだけ別々)
  19. 19. Browserifyで必要なモジュールだけ各々require SPとPCでコントローラー部分に多少の差異が 出ることがあるが、 基礎コントローラーを作って各々angular.extend() してやるとコードの差異は最小限
  20. 20. 横軸展開に効きます
  21. 21. Angularと横軸展開 AnuglarJS人気なおかげで Angularを使う新規サービスが増えてきた Amebaサービス横断で同じようなUIを 実装をすることも多い 今まで同様の実装を各々のサービスで 実装してきた
  22. 22. AngularJS Working Group 活動中 • Ameba でよくあるパターン の共有モジュール化 • 勉強会したり、欲しい機能を 列挙して、開発中 • 誰かが実装した機能をモジュー ルとして共有しやすい場に
  23. 23. 余談
  24. 24. 途中から導入しても怖くない
  25. 25. ラッキーだった点 SP版はほぼjQueryだけで開発していたので、 とてもピュア マルチページアプリケーション サーバサイドのAPIの設計がイケてた とはいえ、既存のサービスにAngular入れるのはそこそこ大変。。
  26. 26. jQueryとは併用する jqLiteではなくjQueryを使う jQueryに慣れた開発者はjqLiteだけだとじわりと 辛い
  27. 27. jQueryとは併用する jQueryで書かれた既存処理を ディレクティブでラップする 既存のコードをできる限り再利用 ディレクティブでラップしておいてあげれば綺麗に Angularに組み込める
  28. 28. jQueryとは併用する jQueryでDOMを生成している箇所を $compileする処理に置き換える カスタムディレクティブなどを組み込むときにコン パイルされないので
  29. 29. 既存処理とAngularの連携 既存処理との連携も少なくない 新規モジュール用のスコープを直接取る ルートスコープを取得してブロードキャストする ng-appを設定する要素を無闇に変えない
  30. 30. photo by LeonArts.at

×