美國(guó)雅虎前端工程師Hedger Wang。這位原雅虎奇摩的第一位Web Developer，非�？犊�的與我們分享了他豐富的經(jīng)驗(yàn)�，F(xiàn)身說(shuō)法，比空洞的理論更有感染力，我們發(fā)現(xiàn)現(xiàn)在碰到的很多問(wèn)題也都是他曾經(jīng)碰到過(guò)的。美國(guó)雅虎里面Web Developer是一個(gè)更帖近用戶的前端工程師角色，他們負(fù)責(zé)把UI和產(chǎn)品功能邏輯整合起來(lái)，并增強(qiáng)產(chǎn)品易用性和交互體驗(yàn)。

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

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


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


　　像這樣，前端工程師只需要和Web Developer用XHTML描述一下數(shù)據(jù)的結(jié)構(gòu)就可以了，但是這時(shí)候開發(fā)出來(lái)的東西就會(huì)很難看：


　　沒(méi)關(guān)系，Web Developer后期拿到設(shè)計(jì)效果圖后，會(huì)根據(jù)實(shí)際的效果用CSS定義它，最后得到的是這樣的：


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

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


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

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

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