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.
noteを
AngularJSで構築した話
株式会社ピースオブケイク 今 雄一 (@konpyu)
自己紹介
• KON Yuichi (@konpyu)!
• Engineer in Piece of Cake, Inc.

since 2013/8!
• Love Angular
Agenda
• noteについて
• Why Angular?
• 使ってみて感じたn個のこと
• Angular in future
note
note
• Tumblr + Gumroad + Medium
• クリエイターが、テキスト、画像、サウンド、動
画を簡単に作れる、販売できる。
• ファンとつながることが出来る
• (僕も一攫千金(note長者)を狙っています)
開発の規模感
• Rails 4.1 + nginx + MySQL + AngularJS
• coffeeで6500Lくらい
• 14 Controller, 33 Service, 31 Directive
開発の規模感
• エンジニア3名、デザイン + コーディング 2名
• 開発期間: 2013/12∼2014/4/7
Why Angular?
• アプリ化を見据え、APIベースで構築したい
• UX重視. 画面遷移を極力無くしたい
• jQueryは使いたくない
• 自由度が低いため決定しないといけないことが
少ない(後述)
AngularJS
使ってみて感じたn個のこと
学習コストの高さ
directive
$service
$scope
$route
isolate scope
custom filter
$provider
学ぶべき概念がやたら多い
$factory $apply
ng-bind
$setVi...
学習コストの高さ
• Builtin DirectiveやControllerの使い方など、
Dot installで学べる所位までは簡単
• Custom Directive/Filter/Validation, Service
などそこから...
Two way data binding
$scope.user.is_follow = true で即反映
DOMを直接いじらなくて良い安心感
2
↑ CLICK
本当に驚いたのはアプリケーションの行数が1万7千行から
わずか1,500行にまで減ったことに対してです。
フロントエンドのコードは1万7千行に達していた頃、開発
メンバーの1人Misko Heveryが大胆な発言をしました。彼が
趣味で作成して...
注意点
2
• パフォーマンスに影響が出やすい
• dirty-checking

→ scope内の変数について、特定のタイミングで前の値と
比較し、変化があればDOM書き換え

→ $digest loop と呼ぶ
• (1) 比較する変数...
構成に悩まなくてよい
・Backbone.jsは使わないの?
・Angularは縛りが強く、何処に何を書くべきかが
最初から決まっている → 楽
Controller
Directive
Service
HTML
3
Service, Directiveが勘所
• 極力ServiceとDirectiveに処理を追い出す。Fat Controller化するの
を避ける。
4
• Directive: HTMLに宣言的指定を加える事でDOMの機能を拡張
• Se...
Directive
HTML
Directive
クリックするとフォローできる機
能をAタグに付加
関連付けるDirectiveを指定
4
Directive
• Directiveに切っておけば、followableを任意のDOMのattributeに指
定するだけで、フォロー機能が使いまわせる。

→ Controllerに書くと移植時にはコピペが必要 
• Directive...
Directive
• noteでのユースケース

→ クリックするとフォローする

→ コメント欄

→ ノート購入モーダル

→ Tw/Fbへのシェア

その他多用
4
Service
Service
Controller
認証ロジックをService
に追い出す
DIしてControllerから
利用
4
Service
• 要はjsのオブジェクト
• 異なるController間の値の受け渡しにも使える
• 必要なときに、DIで注入する
• noteでのユースケース

→ タイトルタグの置き換え

→ ツイート用文言の生成

→ XHRでのAP...
どこまでWAFに仕事をさせるか
• WebApp高速化の基本 → Appサーバになるべく仕事をさせない
• Angularは静的HTMLとAPIがあればブラウザでHTMLを生成できる。
Appサーバーでビューを出力する処理は必須ではない
Vie...
どこまでWAFに仕事をさせるか
• いろいろな条件との兼ね合い
• 単純にRailsに慣れている
• 極力Railsの開発支援機構に頼って開発効率を上げたかったので, Rails側
でHTMLを生成している

→ Haml, Sass, Coff...
SEO対策がめんどくさい
• クローラは、Angularによるレンダリング前のHTMLしか取得できない
• PhantomJSでレンダリング後のHTMLを返していた

→ たまにPhantomのプロセスが暴走. そもそも処理が重い

→ JSレ...
現状
6
OGPとタイトルを
Railsで静的生成
するだけ
基本的にPhantom
は使わない
googlebotだけ
PhantomJSで対応
正しい内容を返さ
ないとランクに影響
貧弱なルーティング
• $routeはURLに応じて<ng-view></ng-view>内でレンダリングする
HTMLとControllerを切り替えてくれる
7
貧弱なルーティング
7
• ng-viewの入れ子, 並列に複
数設置ができない

→ ui-routerを使う(とい
うか使わざるを得ない)
貧弱なルーティング
7
•
• routeが切り替わるとControllerを破棄して作りなおしちゃう

→ 前のControllerのデータを保存しない

→ ブラウザバックで戻った時に、もう一度構築し直す必要がある

→ 前の$scopeの...
セキュリティ
• 基本的には自動的にエスケープされる

→ ng-bind ( {{ hoge }} )

→ ng-href

→ ng-src

→ ng-style
8
セキュリティ
• CSRF対策

→ cookieにXSRF-TOKENをセットする

→ XSRF-TOKENがセットされているなら、$httpでXHRする際、
AngularがX-Xsrf-TokenをHeaderに付けてリクエストしてくれ...
ライブラリ
• 外部ライブラリの充実度はフレームワーク選定の判断材料
• Angularはフルスタック. ビルトインの状態でもかなり充実している.

ex) promise, filter
• jQueryの資産を使いたい時は、Directive...
noteの場合
• Angular-Bootstrap

http://angular-ui.github.io/bootstrap/
• ui-router

https://github.com/angular-ui/ui-router
•...
未来の話
バージョン
1.2 1.3 2.0
stable これから
使うなら
開発中 ← NEW
↑noteはこれ
3/18 Angular 2.0 Announced
2系の気になる変更点
• 複雑すぎるDirectiveの仕様を簡素に

→ 用途に応じてAPIを分ける

→ Decorator / Template / Component
• $routeの機能強化

→ シンプルなユースケースしか想定して...
まとめ
• 学習コストは高い。dot installに されないように
• コード量は減らせる。2 way data binding素晴らしい
• DirectiveとServiceが重要です
• SEOめんどい。基本的には静的生成させるのが楽...
Have a happy angular life!
ご清聴ありがとうございました
• 公式ブログ

http://blog.angularjs.org/
• Googleでの活用事例

http://www.funnyant.com/using-angularjs-at-google-with-rhys-bret-bowen...
参考ドキュメント
AngularJS
アプリケーション開発ガイド
Mastering Web Application
Development with AngularJS
オライリーから出た日本語の入門書。最初の1冊に。
サンプルアプリの例が充実
Upcoming SlideShare
Loading in …5
×

noteをAngularJSで構築した話

26,059 views

Published on

2014/06/02 LIGにて行われたイベントの時に発表したスライド

AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会
http://eventdots.jp/event/52461

Published in: Technology
  • Be the first to comment

noteをAngularJSで構築した話

  1. 1. noteを AngularJSで構築した話 株式会社ピースオブケイク 今 雄一 (@konpyu)
  2. 2. 自己紹介 • KON Yuichi (@konpyu)! • Engineer in Piece of Cake, Inc.
 since 2013/8! • Love Angular
  3. 3. Agenda • noteについて • Why Angular? • 使ってみて感じたn個のこと • Angular in future
  4. 4. note
  5. 5. note • Tumblr + Gumroad + Medium • クリエイターが、テキスト、画像、サウンド、動 画を簡単に作れる、販売できる。 • ファンとつながることが出来る • (僕も一攫千金(note長者)を狙っています)
  6. 6. 開発の規模感 • Rails 4.1 + nginx + MySQL + AngularJS • coffeeで6500Lくらい • 14 Controller, 33 Service, 31 Directive
  7. 7. 開発の規模感 • エンジニア3名、デザイン + コーディング 2名 • 開発期間: 2013/12∼2014/4/7
  8. 8. Why Angular? • アプリ化を見据え、APIベースで構築したい • UX重視. 画面遷移を極力無くしたい • jQueryは使いたくない • 自由度が低いため決定しないといけないことが 少ない(後述)
  9. 9. AngularJS 使ってみて感じたn個のこと
  10. 10. 学習コストの高さ directive $service $scope $route isolate scope custom filter $provider 学ぶべき概念がやたら多い $factory $apply ng-bind $setViewValue ng-maxlength $resource $compier $state promiss $q transclude $broadcast dependency injection html5mode $digest jqLite two way data binding $location $interpolate $watch $cookie $on angular expression 1
  11. 11. 学習コストの高さ • Builtin DirectiveやControllerの使い方など、 Dot installで学べる所位までは簡単 • Custom Directive/Filter/Validation, Service などそこから先が複雑(しかし、覚えないとあ まりAngularの恩恵はない) 1
  12. 12. Two way data binding $scope.user.is_follow = true で即反映 DOMを直接いじらなくて良い安心感 2 ↑ CLICK
  13. 13. 本当に驚いたのはアプリケーションの行数が1万7千行から わずか1,500行にまで減ったことに対してです。 フロントエンドのコードは1万7千行に達していた頃、開発 メンバーの1人Misko Heveryが大胆な発言をしました。彼が 趣味で作成していたオープンソースのライブラリを使えば、 プロジェクト全体のコードを2週間ですべて書き換えられる というのです Angular創世の小話 - AngularJS開発ガイドより 2
  14. 14. 注意点 2 • パフォーマンスに影響が出やすい • dirty-checking
 → scope内の変数について、特定のタイミングで前の値と 比較し、変化があればDOM書き換え
 → $digest loop と呼ぶ • (1) 比較する変数を少なくする (2) 比較処理を軽くする • 参考
 http://qiita.com/zoetro/items/5156aef51222e81dd022
  15. 15. 構成に悩まなくてよい ・Backbone.jsは使わないの? ・Angularは縛りが強く、何処に何を書くべきかが 最初から決まっている → 楽 Controller Directive Service HTML 3
  16. 16. Service, Directiveが勘所 • 極力ServiceとDirectiveに処理を追い出す。Fat Controller化するの を避ける。 4 • Directive: HTMLに宣言的指定を加える事でDOMの機能を拡張 • Service: 共通処理をまとめるためのSingletonオブジェクト
  17. 17. Directive HTML Directive クリックするとフォローできる機 能をAタグに付加 関連付けるDirectiveを指定 4
  18. 18. Directive • Directiveに切っておけば、followableを任意のDOMのattributeに指 定するだけで、フォロー機能が使いまわせる。
 → Controllerに書くと移植時にはコピペが必要  • Directiveは基本的にA(Attribute)で作る。テンプレも含めてコンポー ネント化したい時はE(Element)に。 • 外部ライブラリは大体Directiveの形で提供されている
 ex) OnsenUI, Angular-Bootstrap, Angular-UI 4
  19. 19. Directive • noteでのユースケース
 → クリックするとフォローする
 → コメント欄
 → ノート購入モーダル
 → Tw/Fbへのシェア
 その他多用 4
  20. 20. Service Service Controller 認証ロジックをService に追い出す DIしてControllerから 利用 4
  21. 21. Service • 要はjsのオブジェクト • 異なるController間の値の受け渡しにも使える • 必要なときに、DIで注入する • noteでのユースケース
 → タイトルタグの置き換え
 → ツイート用文言の生成
 → XHRでのAPIアクセスを隠 
 → オートページャのためにスクロール位置を監視
 → タイムラインデータの保存 etc 4
  22. 22. どこまでWAFに仕事をさせるか • WebApp高速化の基本 → Appサーバになるべく仕事をさせない • Angularは静的HTMLとAPIがあればブラウザでHTMLを生成できる。 Appサーバーでビューを出力する処理は必須ではない Viewの生成コストは安くない↑ 5
  23. 23. どこまでWAFに仕事をさせるか • いろいろな条件との兼ね合い • 単純にRailsに慣れている • 極力Railsの開発支援機構に頼って開発効率を上げたかったので, Rails側 でHTMLを生成している
 → Haml, Sass, Coffee,minifyを透過的に扱える(sprockets)
 → デザイナーもRailsを使っている • 理想は静的にhtmlを吐いてnginxで配信 5
  24. 24. SEO対策がめんどくさい • クローラは、Angularによるレンダリング前のHTMLしか取得できない • PhantomJSでレンダリング後のHTMLを返していた
 → たまにPhantomのプロセスが暴走. そもそも処理が重い
 → JSレンダリング用のSaaSはお高い. ! • UserAgentでbotからのアクセスか否かを判定
 → botも色々あるのでキリがない 6
  25. 25. 現状 6 OGPとタイトルを Railsで静的生成 するだけ 基本的にPhantom は使わない googlebotだけ PhantomJSで対応 正しい内容を返さ ないとランクに影響
  26. 26. 貧弱なルーティング • $routeはURLに応じて<ng-view></ng-view>内でレンダリングする HTMLとControllerを切り替えてくれる 7
  27. 27. 貧弱なルーティング 7 • ng-viewの入れ子, 並列に複 数設置ができない
 → ui-routerを使う(とい うか使わざるを得ない)
  28. 28. 貧弱なルーティング 7 • • routeが切り替わるとControllerを破棄して作りなおしちゃう
 → 前のControllerのデータを保存しない
 → ブラウザバックで戻った時に、もう一度構築し直す必要がある
 → 前の$scopeの内容を適当なServiceに逃しておく → たるい ・ex) タイムラインを沢山ページングして下まで掘る → ある記事に飛ぶ → ブラバする → タイムライン消えてる → F○ck!
  29. 29. セキュリティ • 基本的には自動的にエスケープされる
 → ng-bind ( {{ hoge }} )
 → ng-href
 → ng-src
 → ng-style 8
  30. 30. セキュリティ • CSRF対策
 → cookieにXSRF-TOKENをセットする
 → XSRF-TOKENがセットされているなら、$httpでXHRする際、 AngularがX-Xsrf-TokenをHeaderに付けてリクエストしてくれる
 → API側でそれをチェック 8 • http://stackoverflow.com/questions/8781937/rails-api- authentication-sanity-check-and-advise
  31. 31. ライブラリ • 外部ライブラリの充実度はフレームワーク選定の判断材料 • Angularはフルスタック. ビルトインの状態でもかなり充実している.
 ex) promise, filter • jQueryの資産を使いたい時は、Directiveでラップする
 → すでにgithubに結構UPされている 9
  32. 32. noteの場合 • Angular-Bootstrap
 http://angular-ui.github.io/bootstrap/ • ui-router
 https://github.com/angular-ui/ui-router • angular-file-upload
 https://github.com/danialfarid/angular-file-upload • angular-loading-bar
 http://chieffancypants.github.io/angular-loading-bar/ 9
  33. 33. 未来の話
  34. 34. バージョン 1.2 1.3 2.0 stable これから 使うなら 開発中 ← NEW ↑noteはこれ
  35. 35. 3/18 Angular 2.0 Announced
  36. 36. 2系の気になる変更点 • 複雑すぎるDirectiveの仕様を簡素に
 → 用途に応じてAPIを分ける
 → Decorator / Template / Component • $routeの機能強化
 → シンプルなユースケースしか想定してなかったので綻びが
 → 複数・入れ子に対応/ 認証機能を提供 / 状態の保存 • Object.observe()で変更検知を高速化 • デザインノートを読むと1系の課題感が良くわかるのでオススメ
  37. 37. まとめ • 学習コストは高い。dot installに されないように • コード量は減らせる。2 way data binding素晴らしい • DirectiveとServiceが重要です • SEOめんどい。基本的には静的生成させるのが楽 • RailsはAPIだけ、viewは関与しないのが理想ではある • はやく2系のAngularを触りたい
  38. 38. Have a happy angular life! ご清聴ありがとうございました
  39. 39. • 公式ブログ
 http://blog.angularjs.org/ • Googleでの活用事例
 http://www.funnyant.com/using-angularjs-at-google-with-rhys-bret-bowen/ • Angular 2.0のドラフト(1系の設計思想を知る上でも有用)
 https://docs.google.com/document/d/ 1I3UC0RrgCh9CKrLxeE4sxwmNSBl3oSXQGt9g3KZnTJI/edit • Angular 2.0 週次開発MTG議事録
 https://docs.google.com/document/d/ 150lerb1LmNLuau_a_EznPV1I1UHMTbEl61t4hZ7ZpS0/edit • Angular Style Guide
 https://github.com/mgechev/angularjs-style-guide
 参考ドキュメント
  40. 40. 参考ドキュメント AngularJS アプリケーション開発ガイド Mastering Web Application Development with AngularJS オライリーから出た日本語の入門書。最初の1冊に。 サンプルアプリの例が充実

×