岁月如歌

用开放的心态,打造专业的人生。

也谈前端基础设施建设

with 9 comments

克军昨天的分享不错:前端基础架构的实践和思考

从 2009 年起,也一直在想这些事。受克军启发,梳理成一张图:

(请点击小图看大图)

几点说明:

  1. 将“架构”换成了“设施”,对应的英文是 Infrastructure. 感觉用“设施”更能精准表达原意。
  2. 克军的大分类是设施的形态:是一个工具,还是一份规范,或是一个系统。这样分类不错,但系统和工具之间感觉很难区分,系统可以包含工具,工具可以是一个系统。
  3. 这里从前端开发涉及的流程来划分:需求阶段 — 开发阶段 — 部署阶段 — 上线后。然后看每个阶段,需要哪些基础设施建设。想清楚后,前端的 Infrastructure 也就出来了。
  4. 需求阶段,一个快速原型工具,无论对交互还是前端,都是非常有用的。目前淘宝用的是 Axure RP.
  5. 开发阶段是重点。规范、流程有利于团队协作,类库、框架可以让业务代码有一个很好的开发基础,工具可以提高工作效率,测试能保障代码质量。
  6. 单独把部署阶段放出来,是因为前端在这一块还很薄弱,有很多可做的事。比如代码的压缩、模块的依赖分析和打包等。这些工作也可以放在开发阶段,但那样会增加前端的工作量。放在部署阶段,可做到自动化。前端写好源码后,提交就好,压缩等操作,交给平台来做。
  7. 上线后,主要是监控分析。很重要的一块,前端可做的事情不少。

注意:这张图仅是 Infrastructure Sketch. 每个公司,每个团队,应该根据自己的实际情况进行筛选和调整。适合自己的才是最好的。

除了前端基础设施,克军 slide 里还谈到了前端团队的角色定位:“前端开发在设计部门是过去时,现在更适合在技术部门”,深以为然。

最后,回到克军谈到的“转变”:

  1. 前端在做什么:以前做 Web Pages, 现在逐步转向 Web Apps. 在淘宝还不明显,但趋势是无疑的。
  2. 前端在什么地方做:以前是 Browsers, 现在增加了 Mobile, Server 等,前端可做的事情大大延伸了。
  3. 前端怎么做:以前是写 demo, 现在越来越直接开发代码,与服务端通过数据接口来协作。

以上转变,能让前端逐步脱离“页面实现者”的定位,转而变成软件开发的正规军,并踏上创新之路。

Advertisements

Written by lifesinger

September 26, 2011 at 16:09

Posted in Articles

9 Responses

Subscribe to comments with RSS.

  1. 有幸提前进入前端软件的开发了…

    小豪

    September 26, 2011 at 16:55

  2. 虽然目前环境限制有点多,但不可不往这个方向努力。

    songsong

    September 26, 2011 at 17:22

  3. 任重而道远啊…

    三桂

    September 26, 2011 at 21:27

  4. 我最近在做的libjs就是用来自动化完成前端部署的,这个工具将来的远景是作为一个前端静态文件+后端REST服务器架构中处理前端静态文件的工具。

    欢迎关注和指点: https://github.com/benz303/zfben_libjs

    Ben

    September 27, 2011 at 10:13

  5. 非常赞同博主的看法。一直以来前段都是被定为在web page的实现者这一角色。
    现在的确需要转变了。。

    Ronin

    September 27, 2011 at 18:56

  6. 那天跟baidu的同学们也很有共鸣,前端职能发生转变后,团队基础技术架构就变得由为重要了。

    叫法上“设施”让人联想到实体的东西,像工具类,“架构”更侧重技术的相互关系和组合。基础技术架构就是一个团队所用的技术、规范、工具、系统 …… 规划了“用什么”和“怎么用”

    系统和工具的区别:工具是个体的,可以单独run,一个工具解决一件事(便于组合和植入到系统中)。系统是开发环境,或是自动化的工具集。

    如果按阶段划分就变成对工具归纳。实际上是有层次关系的。“规范”是最基础的,“工具”是针对规范选择定制的,“系统”则是把工具串起来。如“编译子系统”是把几种工具组合起来,并植入到开发环境中。如果把其中的scss单拿出来就是工具,工具的作用有限,因为不是强制使用的,单独运行又不方便。但它一旦植入到系统中,就变成透明的,写的css会自动用它编译。

    玉伯,taobao的前端研发应该跟后端更紧密合作。从系统层布署前端的基础技术架构。

    kejun

    September 28, 2011 at 14:50

    • 克军的分享带来了很多的共鸣,我们也始终围绕着“标准化、自动化”来做前端建设,并且豆瓣和百度的前端开发应该比较像,啥时候在一起细细的讨论啊。

      welefen

      September 30, 2011 at 09:05

  7. 克军在D2的上的观点很有见地,关于前端应该属于UED还是技术部门都不重要,就像Google的工程师不管放在UE岗还是开发岗都一样富有创造力,话题其实就变为“一专多能”了,如果做不到一专多能,就让菜鸟们多参与前期设计,减少技能不足而带来的设计和开发之间的屏障,如果能做到专业精工能力全面,那就放到技术部门,精准理解业务已经是家常便饭,而将更多精力放在代码质量上。
    关于前端基础架构的问题,工具开发者的水平直接决定了团队生产力的水平,一个难用的工具不如不做,比如为什么ant这么好的东西死活推广不开,原因是大部分前端工程师根本不习惯命令行的工作方式,为什么不提供UI和API,增强工具的易用性呢?应当多学习下传统软件的UI设计,他山之石可以攻玉

    jayli

    September 28, 2011 at 22:14

  8. 各种兼容,各种杯具。。

    拇指玩

    September 29, 2011 at 15:25


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s