noteをAngularJSで構築した話

24,372 views

Published on

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

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

Published in: Technology
0 Comments
112 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
24,372
On SlideShare
0
From Embeds
0
Number of Embeds
7,767
Actions
Shares
0
Downloads
60
Comments
0
Likes
112
Embeds 0
No embeds

No notes for slide

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冊に。 サンプルアプリの例が充実

×