淘宝前端javascript类库选择原因

注:本文已发表于程序员杂志。下面的文字总体结构未变,细节稍有修改。)

书写干净漂亮的代码非常不易。作为前端工程师,还得处理恼人的浏览器兼容性问题。Protoype, jQuery, YUI, MooTools 等各种 JavaScript 类库,都是为了让前端工作更轻松自如。下面将介绍前端类库 KISSY 的起因、设计原则和核心功能,以及相关开发流程和社区建设。

起因

已经有了 jQuery, YUI 等优秀类库,为什么还要自主研发前端类库?这个问题和淘宝的发展历程息息相关。

2006年之前,淘宝最早期的时候,页面非常简单,视觉、交互和前端开发,基本上都能由一个人从头做到尾。这个时期,脚本用得不多也不复杂,用不用类库都无所谓。

2007年开始,随着淘宝业务的快速发展,页面的数量和复杂性迅速增加。淘宝UED开始有专职的前端工程师,但人数只有5人。面对繁重的业务需求, 寻求一个高效稳定的JavaScript类库显得非常重要。由于当时阿里和YAHOO的密切关系,淘宝很自然地选择了YUI类库。YUI为淘宝的前端发展 立下了汗马功劳。

很快,2007年下半年开始,淘宝的前端工程师发现,页面上的不少通用功能,都不能直接套用YUI的现有组件来完成。比如图片轮播、弹出层等,如果直接用 YUI的组件,会导致要加载的文件很大,修改成本还不低。于是淘宝开始基于YUI的核心功能,实现了一套常用组件,加上一些实用的辅助工具类,形成了淘宝 的第一代前端类库:TBra.

TBra 由 YUI Core 和 SimpleSlide 等实用组件组成。到 2008 年年初已趋于稳定。2008年是淘宝飞速发展的一年,前端开发工程师增加了近3倍,达到14人。

2008年到2009年,淘宝的业务更加迅猛增长。这两年里,jQuery风靡全球。jQuery简明易用的API风格,征服了大量Web开发者。 YUI2是个优秀的类库,但在全球对“Write less, do more”渴望中,YUI2的传统API风格越来越不受前端工程师待见。

2009年6月份,YUI团队发布了YUI3 beta版本。YUI3借鉴了jQuery的不少API设计,从整体架构到代码实现,与YUI2有很大不同。YUI3激荡人心,但试用下来却让人感觉沮 丧:虽然是颗粒化的可按需加载,但常用功能打包后依旧偏大;9月份发布正式版后,稳定性上也并不如意。期望后的失落,最是难受。

2009年年底,淘宝前端工程师翻了一倍,增加到30人。面对淘宝旺盛的业务需求,面对大量工程师对jQuery的认可,面对YUI2的落伍与缓慢更新,面对YUI3的诸多不如意,所有问题交织汇集在一起,淘宝前端面临着以下几条路:

  1. 继续使用YUI2, 完善TBra
  2. 全面升级到YUI3, 包括TBra
  3. 全面迁移到jQuery
  4. 混用YUI2, YUI3和jQuery
  5. 基于jQuery开发组件类库
  6. 自主开发全新类库

所有这些选择,在方向上,没有孰对孰错。jQuery非常适合中小型站点的快速开发,但对大型团队的合作来说,YUI内禀的代码组织方式更佳。 YUI3在当时还不够稳定成熟,API的设计上,对普通开发人员也不够友好易用。TBra的设计初衷是快速、简单、易用,但在代码组织和可扩展性上,已逐 步暴露出局限性。综合各种考虑,最后只剩下两条路:

  1. 基于jQuery 开发组件类库,典型代表:豆瓣的Do类库
  2. 自主开发全新类库,典型代表:淘宝的KISSY类库、百度的Qwrap类库、腾讯的Jet类库等等

方向对了,走什么路,关系并不大,最重要的是坚持往前走。 以上是淘宝选择自主研发前端类库KISSY的心路历程。

设计原则

爱因斯坦说:“让一切尽可能简单,但不要过于简单。”在设计领域,KISS代表简约原则:“Keep It Simple, Stupid”. KISSY的命名和设计原则皆源于此,诠释为一句话是:

小巧灵活、简洁实用,使用起来让人感觉愉悦。

小巧是相对小巧。 考虑国内的网络状况,还有不少用户在使用512K的宽带,以及BT软件、视频站点的流行,要让 用户快速打开页面,在国内并不是一件容易的事。对于前端类库来说,小巧的体积非常有必要。jQuery的体积可以接受,YUI3在这一点上则处于劣势。 KISSY会在功能和体积上权衡,尽量小巧。

灵活是适度灵活。 设计领域有个值得推崇的原则:针对场景进行设计。KISSY核心功能的取舍,KISSY组件的特性选择,所有一切,都会尽量从实际需求出发,在总结归纳的通用使用场景下进行设计。适度灵活需要我们懂得舍弃,在精简小巧和可扩展性上不断权衡。

简洁实用是基本要求。 放在设计原则里,是为了能时刻提醒类库开发者保持落地。一个类库,并非功能越强大越好。完美的诠释有多种。对于KISSY来说,保持API的简单易用,保持功能的精简实用,不求全但求精,力求用短小的代码完成常用的80%的功能,这就是KISSY追求的一种完美。

使用起来让人感觉愉悦,这是更高层次的追求。 我们期望在使用KISSY时,你不会感觉枯燥乏味,甚至不会觉得这是工作,而会感觉是在和一位老朋友愉悦交流。在你想用到某个功能时,你的直觉就能指引你应该调用哪个API,而无需过多地去查阅文档。

除了想给类库使用者带去愉悦体验,我们还希望基于KISSY搭建的网站,网站的用户能获得非常好的浏览体验和使用体验。KISSY的不少组件,内置 了对可用性的考虑,简单如标签页切换的延迟,复杂如富文本编辑器的交互体验,所有这一些,默认就尽量去让用户能更好的使用。我们相信,这很有价值。

核心功能

KISSY从设计之初,就尝试从各个类库中存精去芜,核心功能包括:

种子(Seed)是使用KISSY的入口。通过种子文件,你可以自由灵活地加载所需要的组件。比如要在页面中使用日历,仅需如下书写代码:

<div id=”cal”></div>
<script src=”path/to/kissy/seed-min.js”></script>
<script>
KISSY.use(‘calendar’, function(S) {
    var cal = new S.Calendar(‘#cal’);
    // more code
});
</script>

seed-min.js 就是KISSY的种子文件,gzip后大小不到5KB. 页面中仅需引入它,就可以自由加载KISSY的任何组件。

核心(Core)包括dom, event, ajax, anim, node, data等一系列常用功能。这些功能绝大部分是各大前端类库的标配。KISSY借鉴了jQuery简明易用的API设计风格,同时采纳了YUI3的颗粒化代码组织方式。一段典型代码如下:

<script>
KISSY.use(‘core’, function(S) {
    S.one(‘#id’).on(‘click’, function(ev) {
        ev.preventDefault();
        this.addClass(‘active’);
});
});
</script>

种子和核心是构建各种组件的基石,详细功能请参考KISSY的文档

组件(Components)包括工具类组件(Utilities)和可视化组件(Widgets),是KISSY最重要的组成部分。组件的公共接口和配置,都尽量保持了内在的一致性。能让你在学会使用KISSY的一个组件后,能马上推测出其它组件的使用方式。

KISSY的组件严格遵守适度灵活原则,在特定的场景下进行设计。任何抽象场景,都有不同的抽象层次。比如淘宝首页的图片轮播,至少有以下三种层次的抽象:

  1. 图片轮播是可轮播的多张图片
  2. 图片轮播是可切换的一组内容
  3. 图片轮播是对命令的响应

第一种抽象,会让我们做出像TBra里的SimpleSide类似的组件,功能很纯粹单一。大部分站点用jQuery等代码实现的图片轮播,也是基于这种简单明了的抽象。

第二种抽象,会让我们思考更多。比如图片轮播和标签页切换的关系,从这一层的抽象来讲,标签页和轮播图片本质上一样的,都是一组可切换的内容。在这 一层抽象上,我们就可以实现Switchable(可切换)组件,有了Switchable,所有可以抽象为可切换内容的可视化组件,就都可以快速基于 Switchable来实现,而不是全新写一个。在淘宝首页上,大部分可视化组件都是Switchable组件,非常便捷。

第三层抽象,很抽象,但抽象层次越高,落地越难。基本所有交互组件,都可以抽象成为对用户行为的响应。适度灵活原则,能避免我们掉入过度抽象的陷阱。

除了Switchable等常用组件,KISSY里还专门为部分复杂组件打造了子品牌专区,目前有KISSY DPL(设计模式库)、KISSY Editor(富文本编辑器)、KISSY AJBridge(Flash相关功能)、NodeJS-KISSY(让KISSY运行在NodeJS上)等。详细内容,请关注我们的文档和社区。

开发流程

一个类库要持续发展,需要一套行之有效的流程来保障。KISSY的开发流程可以总结为下图:

KISSY组件的开发非常重视预研阶段。我们建议每一个开发成员,至少花一半时间在组件的预研上。预研可以保证针对场景进行设计,可以让最后产出的公共API能被大家一致认可,能符合KISSY设计的整体要求。

在开发阶段,我们推荐BDD(行为驱动开发)。良好的BDD习惯,和代码评审机制,能让我们的代码可靠,团队成员也能在过程中得到技能成长。

单元测试框架目前KISSY选择的是Jasmine, 目前还处于摸索起步阶段。但有热情和信心,就不怕远。

社区建设

KISSY是完全开源的,目前放在github平台上管理。相关社区信息如下:

KISSY已正式发布1.1.5版,下一个版本是1.2, 将于今年12月份正式发布,敬请期待。欢迎各位朋友的试用与建议。

你可能感兴趣的:(JavaScript,设计模式,jquery,腾讯,yui)