noteをAngularJSで構築した話

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 • Tumblr + Gumroad + Medium • クリエイターが、テキスト、画像、サウンド、動画を簡単に作れる、販売できる。 • ファンとつながることが出来る • （僕も一攫千金（note長者）を狙っています）

開発の規模感 • Rails 4.1 + nginx + MySQL + AngularJS • coﬀeeで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 ﬁ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

学習コストの高さ • Builtin DirectiveやControllerの使い方など、 Dot installで学べる所位までは簡単 • Custom Directive/Filter/Validation, Service などそこから先が複雑（しかし、覚えないとあまりAngularの恩恵はない） 1

Two way data binding $scope.user.is_follow = true で即反映 DOMを直接いじらなくて良い安心感 2 ↑ CLICK

本当に驚いたのはアプリケーションの行数が1万7千行からわずか1,500行にまで減ったことに対してです。フロントエンドのコードは1万7千行に達していた頃、開発メンバーの1人Misko Heveryが大胆な発言をしました。彼が趣味で作成していたオープンソースのライブラリを使えば、プロジェクト全体のコードを2週間ですべて書き換えられるというのです Angular創世の小話 - AngularJS開発ガイドより 2

注意点 2 • パフォーマンスに影響が出やすい • dirty-checking  → scope内の変数について、特定のタイミングで前の値と比較し、変化があればDOM書き換え  → $digest loop と呼ぶ • (1) 比較する変数を少なくする (2) 比較処理を軽くする • 参考  http://qiita.com/zoetro/items/5156aef51222e81dd022

構成に悩まなくてよい・Backbone.jsは使わないの? ・Angularは縛りが強く、何処に何を書くべきかが最初から決まっている → 楽 Controller Directive Service HTML 3

Service, Directiveが勘所 • 極力ServiceとDirectiveに処理を追い出す。Fat Controller化するのを避ける。 4 • Directive: HTMLに宣言的指定を加える事でDOMの機能を拡張 • Service: 共通処理をまとめるためのSingletonオブジェクト

Directive HTML Directive クリックするとフォローできる機能をAタグに付加関連付けるDirectiveを指定 4

Directive • Directiveに切っておけば、followableを任意のDOMのattributeに指定するだけで、フォロー機能が使いまわせる。  → Controllerに書くと移植時にはコピペが必要 • Directiveは基本的にA（Attribute）で作る。テンプレも含めてコンポーネント化したい時はE（Element）に。 • 外部ライブラリは大体Directiveの形で提供されている  ex) OnsenUI, Angular-Bootstrap, Angular-UI 4

Directive • noteでのユースケース  → クリックするとフォローする  → コメント欄  → ノート購入モーダル  → Tw/Fbへのシェア  その他多用 4

Service Service Controller 認証ロジックをService に追い出す DIしてControllerから利用 4

Service • 要はjsのオブジェクト • 異なるController間の値の受け渡しにも使える • 必要なときに、DIで注入する • noteでのユースケース  → タイトルタグの置き換え  → ツイート用文言の生成  → XHRでのAPIアクセスを隠   → オートページャのためにスクロール位置を監視  → タイムラインデータの保存 etc 4

どこまでWAFに仕事をさせるか • WebApp高速化の基本 → Appサーバになるべく仕事をさせない • Angularは静的HTMLとAPIがあればブラウザでHTMLを生成できる。 Appサーバーでビューを出力する処理は必須ではない Viewの生成コストは安くない↑ 5

どこまでWAFに仕事をさせるか • いろいろな条件との兼ね合い • 単純にRailsに慣れている • 極力Railsの開発支援機構に頼って開発効率を上げたかったので, Rails側でHTMLを生成している  → Haml, Sass, Coﬀee,minifyを透過的に扱える（sprockets)  → デザイナーもRailsを使っている • 理想は静的にhtmlを吐いてnginxで配信 5

SEO対策がめんどくさい • クローラは、Angularによるレンダリング前のHTMLしか取得できない • PhantomJSでレンダリング後のHTMLを返していた  → たまにPhantomのプロセスが暴走. そもそも処理が重い  → JSレンダリング用のSaaSはお高い. ! • UserAgentでbotからのアクセスか否かを判定  → botも色々あるのでキリがない 6

現状 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の内容を適当なServiceに逃しておく → たるい・ex) タイムラインを沢山ページングして下まで掘る → ある記事に飛ぶ → ブラバする → タイムライン消えてる → F○ck!

セキュリティ • 基本的には自動的にエスケープされる  → ng-bind ( {{ hoge }} )  → ng-href  → ng-src  → ng-style 8

セキュリティ • 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

ライブラリ • 外部ライブラリの充実度はフレームワーク選定の判断材料 • Angularはフルスタック. ビルトインの状態でもかなり充実している.  ex) promise, ﬁlter • jQueryの資産を使いたい時は、Directiveでラップする  → すでにgithubに結構UPされている 9

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

未来の話

バージョン 1.2 1.3 2.0 stable これから使うなら開発中 ← NEW ↑noteはこれ

3/18 Angular 2.0 Announced

2系の気になる変更点 • 複雑すぎるDirectiveの仕様を簡素に  → 用途に応じてAPIを分ける  → Decorator / Template / Component • $routeの機能強化  → シンプルなユースケースしか想定してなかったので綻びが  → 複数・入れ子に対応/ 認証機能を提供 / 状態の保存 • Object.observe()で変更検知を高速化 • デザインノートを読むと1系の課題感が良くわかるのでオススメ

まとめ • 学習コストは高い。dot installにされないように • コード量は減らせる。2 way data binding素晴らしい • DirectiveとServiceが重要です • SEOめんどい。基本的には静的生成させるのが楽 • RailsはAPIだけ、viewは関与しないのが理想ではある • はやく2系のAngularを触りたい

Have a happy angular life! ご清聴ありがとうございました

• 公式ブログ  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  参考ドキュメント

参考ドキュメント AngularJS アプリケーション開発ガイド Mastering Web Application Development with AngularJS オライリーから出た日本語の入門書。最初の1冊に。サンプルアプリの例が充実

noteをAngularJSで構築した話

by Kon Yuichi, Software Engineer at Piece of cake, Inc.

on Jun 02, 2014

Statistics

Views

Actions

1 Embed 7

Accessibility

Categories

Upload Details

Usage Rights

Report content

noteをAngularJSで構築した話 Presentation Transcript