美國雅虎前端工程師Hedger Wang。這位原雅虎奇摩的第一位Web Developer，非常慷慨的與我們分享了他豐富的經驗。現身說法，比空洞的理論更有感染力，我們發(fā)現現在碰到的很多問題也都是他曾經碰到過的。美國雅虎里面Web Developer是一個更帖近用戶的前端工程師角色，他們負責把UI和產品功能邏輯整合起來，并增強產品易用性和交互體驗。

　　在他的信息架構(Information Architecture)培訓中講到，像雅虎幾百人在一起做產品，內部更需要速度和效率，更需要團隊的協(xié)同和專業(yè)化。以往的開發(fā)流程是單線程的，產品經理向設計師提出設計需求，設計師開始設計然后和產品經理反復討論并定稿，再交給Web Developer轉成HTML模板，之后，將模板發(fā)給前端工程師開發(fā)，前端工程師需要后端提供數據，再將需求提給后端工程師。這時候，Web Developer只能祈禱別把本來寫得挺標準的模板破壞。于是，每啟動一個項目，哪怕是功能很類似的項目，都要走一遍這樣的流程。顯然，做法不是高效的，而且在每個環(huán)節(jié)上都很輕易出問題，就像玩多米諾骨牌，任何一個小牌倒了就都白費了。

　　“Bottom Up Approach”，對！Web開發(fā)由下而上實現才是合理的。產品經理在現有系統(tǒng)和現有技術的基礎上，策劃產品，細化產品流程，最終確定產品都具有哪些功能。這些做好之后，前端工程師就可以開工了。比如，所有頁面都有一個登錄模塊，直接寫成這樣就可以了：


　　至于在頁面上是什么樣子，前端工程師完全不用考慮，自有Web Developer后期通過CSS定義它。同樣，做一個搜索結果頁時，只要生成這樣一個結果就好了：


　　像這樣，前端工程師只需要和Web Developer用XHTML描述一下數據的結構就可以了，但是這時候開發(fā)出來的東西就會很難看：


　　沒關系，Web Developer后期拿到設計效果圖后，會根據實際的效果用CSS定義它，最后得到的是這樣的：


　　這就是前端采用表現分離(Presentation Tier)的好處，不同的專業(yè)Team，可以專注在自己專長的領域開發(fā)，以實現并行開發(fā)，高效而且不易出現問題。用一個現實生活中的例子類比一下就更清楚了，就像要蓋一幢房子，首先要有具體的工程圖紙，準確標出廳多大，有幾間房，幾個門...之后，圖紙交給設計師來設計裝修的3D效果圖，同時工人開始蓋房。房子蓋完后，3D效果圖也出來了，再找來裝修隊按照效果圖，哪兒刷什么涂料，哪兒貼什么磁磚...但假如顛倒順序，先讓設計師設計3D效果圖，完成后再由工人們照著效果圖蓋房，最后這房子即使蓋出來也不會合格。對照上面的例子，在產品開發(fā)過程中，Web Developer就是一個裝修工人的角色。

　　產品的前端開發(fā)可以分為三層：


　　結構層就是前端工程師開發(fā)出來的產品原型。通過CSS疊上一層表現效果。在這個基礎上，再利用JavaScript/DOM加強產品的交互體驗。這種分層帶來的另一個好處是，假如客戶端環(huán)境不支持JavaScript仍然可以使用產品，假如客戶端環(huán)境不支持CSS（像手持設備）內容呈線性排列，仍然是便于閱讀的。

　　為什么說Web Developer是一個更帖近用戶的前端工程師呢？傳統(tǒng)工程師是以完成產品功能，優(yōu)化服務端執(zhí)行性能為目的的，而Web Developer要考慮產品在用戶機器上的性能、用戶的操作體驗等等這些細節(jié)。尤其是現在，用戶端的瀏覽環(huán)境是非常復雜的，顯示器有16:9的，也有10寸的小筆記本，還有用更小的PDA屏幕...網站的頁面應該定多寬才能適應不同的用戶，這就要求Web Developer開發(fā)的網站頁面采用彈性布局。同時瀏覽器也是多種多樣的，PC上用Firefox、IE，蘋果上用Safari，手機上用Opera...通過基于標準的Web開發(fā)完全可以達到一致性。假如哪天用戶的鼠標壞了，他不得不使用鍵盤訪問我們的網站...雖然現在上網快了，但是要知道對于用戶期待看到的內容，哪怕等半秒用戶都會抱怨。

　　看來Web Developer要干的事情真的是很多。還好，雅虎有很多高人像Hedger Wang。雅虎中國的產品目前在用戶體驗和易用性上，正做著不斷的改善和提高。