鸿 网 互 联 www.68idc.cn

网页开发(WebDeveloper)可以做得更多

来源:互联网 作者:佚名 时间:2016-04-08 07:54
美国雅虎前端工程师HedgerWang。这位原雅虎奇摩的第一位WebDeveloper,非常慷慨的与我们分享了他丰富的经验。现身说法,比空洞的理论更有感染力,我们发现现在遇到的很多问题也都是他曾经遇到过的。美国雅虎里面WebDeveloper是一个更帖近用户的前端工程师角

  美国雅虎前端工程师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 >标题1</a><p>描述...</p></li>
<li><a >标题2</a><p>描述...</p></li>
<li><a >标题3</a><p>描述...</p></li>
...
</ul>
  像这样,前端工程师只需要和Web Developer用XHTML描述一下数据的结构就可以了,但是这时候开发出来的东西就会很难看:

  网页开发(Web Developer)可以做得更多[多图]图片1
  没关系,Web Developer后期拿到设计效果图后,会根据实际的效果用CSS定义它,最后得到的是这样的:

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

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

  网页开发(Web Developer)可以做得更多[多图]图片3
  结构层就是前端工程师开发出来的产品原型。通过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。雅虎中国的产品目前在用户体验和易用性上,正做着不断的改善和提高。

  

网友评论
<