OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube
YouTube で Facebook Developers チャンネルを購読してたら新着動画のお知らせメールに載ってたので視聴した。以下メモ。
- instagram.com は React を使った Single Page Application
- ユーザーエクスペリエンスを最優先した結果 SPA を選択した
- 初回ロード時間はリクエスト数 x 転送バイト数で決まるので .js/.css ファイルを一個に結合するのは良くない
- エントリポイントごとにモジュールを分けて、モジュール単位で一個に結合、 minify/gzip などすると効率が良い
- .js/.css は CommonJS の require を使って（？自信なし）ロードする。サイズの小さい画像も DataURI を require して img 要素を作る
- このような特殊なファイル読み込み手法のため CSS の読み込み順序が不定になりセレクタ名の衝突・上書きで見た目が崩れるので命名規約とかいろいろ使い方を工夫する
- ファイルの編成には browserify や grunt gulp 等ではなく、依存関係の扱いに長けた（？自信なし） webpack がオススメ。ブラウザのファイルロード・読み込み速度が 250ms -> 120ms に改善した
僕はこう思ったッス
- ブラウザパフォーマンスも考えた上でモジュールシステムを決めたりしててさすが Facebook だなと思った。 Rails とかでやってると何も考えず一個にまとめているけど、考え無しでやるだけは良くない
- 「オレは CSS が嫌いだ」には同情するけどセレクタの衝突でややこしくなったりするのは自分らがわざわざ特殊なやり方でファイル読み込みしているせいじゃん...と思った
- 「Facebook は巨大なベヒーモス」とか所々で笑いをとろうとしてるのに会場の笑い声が一切録音されてなくて気の毒だった。でも会場が広いのとマイクの集音性能が優秀なせいかもしれない
- webpack って初めて知ったなーと思ったら数ヶ月前に日本語でも紹介されていてアンテナの低さが身にしみた
- 40分枠のうちほぼ30分ぴったりに収まるトークと10分の質疑応答でほぼ40分ぴったりで終わっててすごいと思った。プレゼン慣れしてるのだろうし、準備や練習も相当してるのだろう
