美国雅虎前端工程师Hedger Wang。这位原雅虎奇摩的第一位Web Developer，非常慷慨的与我们分享了他丰富的经验。现身说法，比空洞的理论更有感染力，我们发现现在遇到的很多问题也都是他曾经遇到过的。美国雅虎里面Web Developer是一个更帖近用户的前端工程师角色，他们负责把UI和产品功能逻辑整合起来，并增强产品易用性和交互体验。

　　在他的信息架构(Information Architecture)培训中讲到，像雅虎几百人在一起做产品，内部更需要速度和效率，更需要团队的协同和专业化。以往的开发流程是单线程的，产品经理向设计师提出设计需求，设计师开始设计然后和产品经理反复讨论并定稿，再交给Web Developer转成HTML模板，之后，将模板发给前端工程师开发，前端工程师需要后端提供数据，再将需求提给后端工程师。这时候，Web Developer只能祈祷别把本来写得挺标准的模板破坏。于是，每启动一个项目，哪怕是功能很类似的项目，都要走一遍这样的流程。显然，做法不是高效的，而且在每个环节上都很容易出问题，就像玩多米诺骨牌，任何一个小牌倒了就都白费了。

　　“Bottom Up Approach”，对！Web开发由下而上实现才是合理的。产品经理在现有系统和现有技术的基础上，策划产品，细化产品流程，最终确定产品都具有哪些功能。这些做好之后，前端工程师就可以开工了。比如，所有页面都有一个登录模块，直接写成这样就可以了：

　　至于在页面上是什么样子，前端工程师完全不用考虑，自有Web Developer后期通过CSS定义它。同样，做一个搜索结果页时，只要生成这样一个结果就好了：

　　像这样，前端工程师只需要和Web Developer用XHTML描述一下数据的结构就可以了，但是这时候开发出来的东西就会很难看：

　　没关系，Web Developer后期拿到设计效果图后，会根据实际的效果用CSS定义它，最后得到的是这样的：

　　这就是前端采用表现分离(Presentation Tier)的好处，不同的专业Team，可以专注在自己专长的领域开发，以实现并行开发，高效而且不易出现问题。用一个现实生活中的例子类比一下就更清楚了，就像要盖一幢房子，首先要有详细的工程图纸，准确标出厅多大，有几间房，几个门...之后，图纸交给设计师来设计装修的3D效果图，同时工人开始盖房。房子盖完后，3D效果图也出来了，再找来装修队按照效果图，哪儿刷什么涂料，哪儿贴什么磁砖...但如果颠倒顺序，先让设计师设计3D效果图，完成后再由工人们照着效果图盖房，最后这房子即使盖出来也不会合格。对照上面的例子，在产品开发过程中，Web Developer就是一个装修工人的角色。

　　产品的前端开发可以分为三层：

　　结构层就是前端工程师开发出来的产品原型。通过CSS叠上一层表现效果。在这个基础上，再利用JavaScript/DOM加强产品的交互体验。这种分层带来的另一个好处是，如果客户端环境不支持JavaScript仍然可以使用产品，如果客户端环境不支持CSS（像手持设备）内容呈线性排列，仍然是便于阅读的。

　　为什么说Web Developer是一个更帖近用户的前端工程师呢？传统工程师是以完成产品功能，优化服务端执行性能为目的的，而Web Developer要考虑产品在用户机器上的性能、用户的操作体验等等这些细节。尤其是现在，用户端的浏览环境是非常复杂的，显示器有16:9的，也有10寸的小笔记本，还有用更小的PDA屏幕...网站的页面应该定多宽才能适应不同的用户，这就要求Web Developer开发的网站页面采用弹性布局。同时浏览器也是多种多样的，PC上用Firefox、IE，苹果上用Safari，手机上用Opera...通过基于标准的Web开发完全可以达到一致性。如果哪天用户的鼠标坏了，他不得不使用键盘访问我们的网站...虽然现在上网快了，但是要知道对于用户期待看到的内容，哪怕等半秒用户都会抱怨。

　　看来Web Developer要干的事情真的是很多。还好，雅虎有很多高人像Hedger Wang。雅虎中国的产品目前在用户体验和易用性上，正做着不断的改善和提高。