苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话
111 likes27,421 views
2014/06/02 LIGにて行われたイベントの時に発表したスライド AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会 http://eventdots.jp/event/52461
More Related Content
What's hot (20)
Similar to 苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话 (20)
Recently uploaded (6)
苍辞迟别を础苍驳耻濒补谤闯厂で构筑した话
- 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 ? co?eeで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 ?lter $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, Co?ee,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://stackover?ow.com/questions/8781937/rails-api- authentication-sanity-check-and-advise
- 31. ライブラリ ? 外部ライブラリの充実度はフレームワーク選定の判断材料 ? Angularはフルスタック. ビルトインの状態でもかなり充実している.? ex) promise, ?lter ? 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-?le-upload? https://github.com/danialfarid/angular-?le-upload ? angular-loading-bar? http://chie?ancypants.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冊に。 サンプルアプリの例が充実