noteをAngularJSで構築した話
111 likes27,429 views
2014/06/02 LIGにて行われたイベントの時に発表したスライド AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会 http://eventdots.jp/event/52461
noteをAngularJSで構築した話
- 1. noteを AngularJSで構築した話 株式会社ピースオブケイク 今 雄一 (@konpyu)
- 2. 自己紹介 • KON Yuichi (@konpyu)! • Engineer in Piece of Cake, Inc. since 2013/8! • Love Angular
- 3. Agenda • noteについて • Why Angular? • 使ってみて感じたn個のこと • Angular in future
- 4. note
- 5. note • Tumblr + Gumroad + Medium • クリエイターが、テキスト、画像、サウンド、動 画を簡単に作れる、販売できる。 • ファンとつながることが出来る • （僕も一攫千金（note長者）を狙っています）
- 6. 開発の規模感 • Rails 4.1 + nginx + MySQL + AngularJS • coffeeで6500Lくらい • 14 Controller, 33 Service, 31 Directive
- 7. 開発の規模感 • エンジニア3名、デザイン + コーディング 2名 • 開発期間: 2013/12∼2014/4/7
- 8. Why Angular? • アプリ化を見据え、APIベースで構築したい • UX重視. 画面遷移を極力無くしたい • jQueryは使いたくない • 自由度が低いため決定しないといけないことが 少ない（後述）
- 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. 学習コストの高さ • Builtin DirectiveやControllerの使い方など、 Dot installで学べる所位までは簡単 • Custom Directive/Filter/Validation, Service などそこから先が複雑（しかし、覚えないとあ まりAngularの恩恵はない） 1
- 12. Two way data binding $scope.user.is_follow = true で即反映 DOMを直接いじらなくて良い安心感 2 ↑ CLICK
- 14. 注意点 2 • パフォーマンスに影響が出やすい • dirty-checking → scope内の変数について、特定のタイミングで前の値と 比較し、変化があればDOM書き換え → $digest loop と呼ぶ • (1) 比較する変数を少なくする (2) 比較処理を軽くする • 参考 http://qiita.com/zoetro/items/5156aef51222e81dd022
- 16. Service, Directiveが勘所 • 極力ServiceとDirectiveに処理を追い出す。Fat Controller化するの を避ける。 4 • Directive: HTMLに宣言的指定を加える事でDOMの機能を拡張 • Service: 共通処理をまとめるためのSingletonオブジェクト
- 18. Directive • Directiveに切っておけば、followableを任意のDOMのattributeに指 定するだけで、フォロー機能が使いまわせる。 → Controllerに書くと移植時にはコピペが必要 • Directiveは基本的にA（Attribute）で作る。テンプレも含めてコンポー ネント化したい時はE（Element）に。 • 外部ライブラリは大体Directiveの形で提供されている ex) OnsenUI, Angular-Bootstrap, Angular-UI 4
- 19. Directive • noteでのユースケース → クリックするとフォローする → コメント欄 → ノート購入モーダル → Tw/Fbへのシェア その他多用 4
- 21. Service • 要はjsのオブジェクト • 異なるController間の値の受け渡しにも使える • 必要なときに、DIで注入する • noteでのユースケース → タイトルタグの置き換え → ツイート用文言の生成 → XHRでのAPIアクセスを隠 → オートページャのためにスクロール位置を監視 → タイムラインデータの保存 etc 4
- 22. どこまでWAFに仕事をさせるか • WebApp高速化の基本 → Appサーバになるべく仕事をさせない • Angularは静的HTMLとAPIがあればブラウザでHTMLを生成できる。 Appサーバーでビューを出力する処理は必須ではない Viewの生成コストは安くない↑ 5
- 23. どこまでWAFに仕事をさせるか • いろいろな条件との兼ね合い • 単純にRailsに慣れている • 極力Railsの開発支援機構に頼って開発効率を上げたかったので, Rails側 でHTMLを生成している → Haml, Sass, Coffee,minifyを透過的に扱える（sprockets) → デザイナーもRailsを使っている • 理想は静的にhtmlを吐いてnginxで配信 5
- 24. SEO対策がめんどくさい • クローラは、Angularによるレンダリング前のHTMLしか取得できない • PhantomJSでレンダリング後のHTMLを返していた → たまにPhantomのプロセスが暴走. そもそも処理が重い → JSレンダリング用のSaaSはお高い. ! • UserAgentでbotからのアクセスか否かを判定 → botも色々あるのでキリがない 6
- 27. 貧弱なルーティング 7 • ng-viewの入れ子, 並列に複 数設置ができない → ui-routerを使う（とい うか使わざるを得ない）
- 28. 貧弱なルーティング 7 • • routeが切り替わるとControllerを破棄して作りなおしちゃう → 前のControllerのデータを保存しない → ブラウザバックで戻った時に、もう一度構築し直す必要がある → 前の$scopeの内容を適当なServiceに逃しておく → たるい ・ex) タイムラインを沢山ページングして下まで掘る → ある記事に飛ぶ → ブラバする → タイムライン消えてる → F○ck!
- 29. セキュリティ • 基本的には自動的にエスケープされる → ng-bind ( {{ hoge }} ) → ng-href → ng-src → ng-style 8
- 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. ライブラリ • 外部ライブラリの充実度はフレームワーク選定の判断材料 • Angularはフルスタック. ビルトインの状態でもかなり充実している. ex) promise, filter • jQueryの資産を使いたい時は、Directiveでラップする → すでにgithubに結構UPされている 9
- 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. 未来の話
- 34. バージョン 1.2 1.3 2.0 stable これから 使うなら 開発中 ← NEW ↑noteはこれ
- 35. 3/18 Angular 2.0 Announced
- 36. 2系の気になる変更点 • 複雑すぎるDirectiveの仕様を簡素に → 用途に応じてAPIを分ける → Decorator / Template / Component • $routeの機能強化 → シンプルなユースケースしか想定してなかったので綻びが → 複数・入れ子に対応/ 認証機能を提供 / 状態の保存 • Object.observe()で変更検知を高速化 • デザインノートを読むと1系の課題感が良くわかるのでオススメ
- 37. まとめ • 学習コストは高い。dot installに されないように • コード量は減らせる。2 way data binding素晴らしい • DirectiveとServiceが重要です • SEOめんどい。基本的には静的生成させるのが楽 • RailsはAPIだけ、viewは関与しないのが理想ではある • はやく2系のAngularを触りたい
- 38. Have a happy angular life! ご清聴ありがとうございました
- 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. 参考ドキュメント AngularJS アプリケーション開発ガイド Mastering Web Application Development with AngularJS オライリーから出た日本語の入門書。最初の1冊に。 サンプルアプリの例が充実