Web Developer可以做得更多

Web Developer可以做得更多

作者：张克军 用户体验部

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

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

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

<div id="login_mod">
<h2>登录</h2>
<form method="GET" action="">
<ul>
<li><label>用户名：</label><input type="text" name="name" /></li>
<li><label>密码：</label><input type="password" name="pwd" /></li>
<li><button type="submit">登录</button></li>
</ul>
</form>
</div>

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

<ul>
<li><a href="URL">标题1</a><p>描述...</p></li>
<li><a href="URL">标题2</a><p>描述...</p></li>
<li><a href="URL">标题3</a><p>描述...</p></li>
...
</ul>

像这样，前端工程师只需要和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。雅虎中国的产品目前在用户体验和易用性上，正做着不断的改善和提高。顺便发一个招聘广告：

如果你在Web标准方面有很丰富的经验，
如果你在JavaScript开发方面有很丰富的经验，
如果你喜欢把解决Bug当成最大的工作乐趣，
如果你喜欢追求完美的代码并乐此不疲，
如果你的风格很Open且喜欢与周围人分享和激烈的讨论问题，
那么来雅虎UED Team,你会发现这里有很多志趣相投的同事。

同时，我们不欢迎：
自视高手,独来独往的人，
闷头研究,不愿分享的人，
纸上谈兵,没有实才的人，
怕担责任,过于谨慎的人。

加入雅虎UED Team意味着可以和阿里巴巴、淘宝及全球雅虎包括US,TaiWan,Hongkong,Korea...的Web开发高手一起交流，并肩工作。

加入雅虎UED Team你的热情有多高你的空间就有多大！

工作地点北京，国籍不限，性别不限，年龄不限。