Download as PDF, PPTX
Uploaded byKon Yuichi
noteをAngularJSで構築した話
2014/06/02 LIGにて行われたイベントの時に発表したスライド AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会 http://eventdots.jp/event/52461
noteをAngularJSで構築した話
- 1.
- 2. 自己紹介 • KON Yuichi(@konpyu)! • Engineer in Piece of Cake, Inc. since 2013/8! • Love Angular
- 3. Agenda • noteについて • WhyAngular? • 使ってみて感じたn個のこと • Angular in future
- 4.
- 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は使いたくない • 自由度が低いため決定しないといけないことが 少ない（後述）
- 9.
- 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の使い方など、 Dotinstallで学べる所位までは簡単 • Custom Directive/Filter/Validation, Service などそこから先が複雑（しかし、覚えないとあ まりAngularの恩恵はない） 1
- 12. Two way databinding $scope.user.is_follow = true で即反映 DOMを直接いじらなくて良い安心感 2 ↑ CLICK
- 13.
- 14. 注意点 2 • パフォーマンスに影響が出やすい • dirty-checking →scope内の変数について、特定のタイミングで前の値と 比較し、変化があればDOM書き換え → $digest loop と呼ぶ • (1) 比較する変数を少なくする (2) 比較処理を軽くする • 参考 http://qiita.com/zoetro/items/5156aef51222e81dd022
- 15.
- 16. Service, Directiveが勘所 • 極力ServiceとDirectiveに処理を追い出す。FatController化するの を避ける。 4 • Directive: HTMLに宣言的指定を加える事でDOMの機能を拡張 • Service: 共通処理をまとめるためのSingletonオブジェクト
- 17.
- 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
- 20.
- 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
- 25.
- 26.
- 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.0Announced
- 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 happyangular 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 Developmentwith AngularJS オライリーから出た日本語の入門書。最初の1冊に。 サンプルアプリの例が充実