Nate Koechley「Professional Frontend Engineering」

Professional Frontend Engineering

Yahoo!のフロントエンド・エンジニアNate Koechleyが@media 2008で講演したときに使ったスライド

以下気になる部分のみ斜め読み。

Y!のフロントエンド開発の歴史
- 2001年：フロントエンドエンジニア１号がY!で誕生
- 2008年：700名のフロントエンドエンジニア。世界中のY!で働いてる
- 2001年のY!ウェブサイト
  - font要素、テーブルレイアウト
- 2008年のY!ウェブサイト
Y!のフロントエンド
- ページとモジュール：95%html、5%PHP
- ロジックとAPI：PHPとHTMLが半分ずつ
国際化
- 全てのcssとjsファイルをUTF-8で統一
CSS Sprite
- 画像の敷き詰めは水平方向にする。
  - 上下方向よりもサイズが節約できる、ことが多い
- spriteさせる画像は同系色で揃える。
  - 使用する色数を減らすことで、png/gifの画像ファイルが小さくなる
Ajax
- POSTよりもGET
  - GETの方が1ステップで済む。POSTは2段階必要
- GET使用時の注意。
  - IE対策
  - 最大データ量は2k
javascript
- Event
  - Event delegationを使う
    - 要素にセットするeventの総数を減らすことができる。
      - 例えば、全ての行がクリックすると編集可能になるテーブルの場合とか
  - onloadよりも速くjs実行しろ
    - YUIだと、onAvaiable、onContentReady、onDomReadyを使え
iPhone
- キャッシュされるファイルの上限
  - 1ファイルあたり25K
  - ファイル数は19
  - しかもキャッシュされるファイルは圧縮されない
- ネタ元
  - Performance Research, Part 5: iPhone Cacheability - Making it Stick ≫ Yahoo! User Interface Blog

YUI Theater - Nate Koechley: “Professional Frontend Engineering”

Yahoo! User Interface Blogのエントリ
Nate Koechleyが@media 2008と同じネタで講演したときの動画と筆記がアップされてる
「YUI Theater」と題された連続講演の１つとして講演された
スライドは公開されてない（or見つけてない）

動画（300mbくらい）
- download (m4v)
喋った内容の筆記（transcript)
- ericmiraglia.com ≫ Transcript ? Nate Koechley: “Professional Frontend Engineering”

以下transcriptより気になる部分のみ斜め読み。

2001年以前：フロントエンドエンジニア不在時代
- デザインチームと開発チームは別々に仕事。
- フロントエンドとバックエンドをつなげる作業もアドホックで曖昧だった
Irenu Au
- 当時User Experience and Design部門のリーダー
- フロントエンドエンジニアをY!に雇うことを決めた人
- 期待されてたこと
  - フロントエンド開発のプロを雇う
  - バラバラの作業フローを厳密なものにする
David Siegel「Creating Killer Web Sites」
- 当時の有名本。ウェブデザインの教科書
- テーブルレイアウトを推奨した本
- Webの発明者の意図とは真逆にしたいと考えた
  - ブラウザの違い（表示面etc..）はよい事、閲覧者が表示方法を決める。この考えに反旗。
- 制作者によるウェブサイトのコントロールをより強化したい。
- David Siegelの話も昔の話。ブラウザもウェブの世界も進化してる
- 現在どうすべきかはまだ確定してないので、みんな現在も模索中
フロントエンドエンジニアは、放射線技師
- 病巣を発見し、問題を理解し、改善策を見出せる人
閑話休題：「フロントエンド開発の定義」