【开源专访】Sea.js创始人玉伯的前端开发之路

时间:2022-06-08 14:13:37

在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战。

为了将前端开发者繁重的工作变得简单,框架应运而生。国内也不乏一些非常优秀的前端开发框架。本期【开源专访】我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框架、前端开发的那些事,以及前端大牛是如何炼成的。

玉伯(王保平),淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人。

【开源专访】Sea.js创始人玉伯的前端开发之路

CSDN:先介绍一下自己和目前的工作吧!

玉伯:我叫王保平,阿里花名玉伯。目前在支付宝前端技术部工作,从事前端基础类库、工具等产品的研发。喜欢编码,热爱思考,努力把每一天过得平淡又精彩。

CSDN:Sea.js是什么?致力于解决什么问题?

玉伯:Sea.js是一个很纯粹小巧的模块加载器,它只解决一个问题:前端代码的模块化。通过Sea.js,可以将大量JavaScript代码封装成一个个小模块,然后轻松实现模块的加载和依赖管理。

有了Sea.js,我们就可以书写模块了。Arale则是一套满足支付宝需求的通用模块集合,是一套基于模块化的前端基础类库,目前具备100多个模块,简单易用。

CSDN:发起Sea.js项目的初衷是什么?它的本质意义是什么?

玉伯:2008年,在前端开发过程中,经常会出现一个单文件几千行甚至近万行的情况。这种大文件,对协作开发、后续维护、性能调优等都不利。Sea.js初衷是帮助前端开发工程师将大文件拆分成小文件,能保持小颗粒度的模块化开发,同时不需要过多考虑依赖关系,让依赖管理轻松自如,让模块化开发变得更自然,就像浏览器原生提供的一样。

Sea.js的本质意义是通过模块化开发,来提高代码的可维护性。对工程师而言,是关注度分离,更将更多精力聚焦在代码本身的逻辑上。

CSDN:Sea.js的设计思想是什么?是如何具体实现的?

玉伯:Sea.js的核心设计思想是保持简单。有两层含义:

  1. 对外保持使用接口的简单。Sea.js的常用API只有7个,使用者一旦了解,基本没什么记忆成本,可以快速上手。
  2. 内部实现代码尽可能简单。追求内部实现的简单有很多好处,比如别人可以比较容易读懂源码,这样就能参与进来协同开发。源码简单,往往也意味着不太会有晦涩的bug存在。Sea.js的内部实现,一直在往“简单得明显没有bug”的方向努力。

除了保持简单,Sea.js的设计理念还有职责清晰、性能优先和适度完备。

职责清晰是让Sea.js的范畴明确,随时知道自己应该做什么,不应该做什么。一个框架,最怕的是需求膨胀,最怕的是复杂化。

性能优先是因为Sea.js是底层加载器,倘若性能不好,直接会影响页面性能,因此源码中有不少地方会刻意追求性能。

适度完备是从功能的层面看Sea.js的API是否能满足常用需求,同时又能通过插件机制对外提供适度的可扩展性。Sea.js不追求能够满足所有需求,而是追求2/8原则。

具体代码实现纯文字不太好描述,感兴趣的可以阅读源码:https://github.com/seajs/seajs,所有源码都在上面,欢迎阅读,欢迎给出建议。

CSDN:Sea.js开发过程中,最大的困难是什么?是如何解决的?

玉伯:这个说起来比较有意思,在开发过程中,Sea.js最大的困难,不是编码,而是模块定义规范的确定。

在业界,目前流行的模块定义规范,有CommonJS的Modues/1.x规范,还有RequireJS倡导的异步模块定义规范AMD。这两个规范,在社区里存在比较大的讨论,各有利弊,适用于不同的运行环境。Sea.js最后采用的是延自CommonJS Modules/2.0规范的通用模块定义规范CMD。这个至今都有争议,不同的团队,不同的场景下,喜好和选择都有可能不同。

随着Sea.js的推广,CMD规范目前在国内已经有相当多人认可。接下来会进一步国际化,希望能得到更大社区范围内的认可。这条路还很长,不能说已解决了,一切还在解决的路上。

不过,这些都不是关键。即便Sea.js以后死掉,只要大家对模块化开发理念有深度认可了,那一切也就值了。

CSDN:Sea.js和Arale目前分别应用在哪些地方?

玉伯:Sea.js目前已应用在阿里、腾讯、网易、百姓网等很多公司,具体可以查看seajs.org首页下面的logo墙,目前国内有大量中小网站采用Sea.js。

Arale的使用范围是支付宝,还有阿里巴巴ICBU部门,在一小部分国内创业型公司中也有使用。

CSDN:您之前还开发过前端类库KISSY,而Arale也是一个基于Sea.js的前端类库,两者有什么不同?这是在“造*”吗?它们的开发初衷是什么?目标又是什么?

玉伯:Kissy和Arale都是前端基础类库,从组件提供的功能来讲,存在很大重合度。但从理念上来讲,这两个类库有比较大的不同。

Kissy是大教堂式思路,所有组件,从底层基础组件,到上层UI组件,都是自主研发。这和业界的YUI3、Sencha等类库的思路是一样的。

Arale有所不同。Arale的首要理念是开放。开放不光意味着将自己做好的贡献给社区,开放更意味着将社区已有的优秀组件直接拿进来用。在开放的理念下,Arale类库里,直接引入了jQuery、Backbone、Moment、Handlerbars等业界成熟组件。在这种思路下,Arale能与开源社区紧密互动,彼此快速共进。

Kissy和Arale的初衷都很简单,Kissy是解决淘宝的前端基础类库问题,Arale则是解决支付宝的前端基础类库问题。两者的目标,都是减少前端开发过程中的重复工作量,尽量提高前端开发的工作效率,同时在通用组件层面保障全站的用户体验。

CSDN:Sea.js和Arale未来会如何发展?目标是什么?

玉伯:从2.0开始,Sea.js的发展目标是做简单、纯粹的模块加载器,甚至希望从2.x的某个版本开始,就不需要更新了,就能满足绝大部分需求,能非常稳定下来,不需要再升级。

Sea.js稳定后,更多精力会放在Arale等前端基础类库的建设上。Sea.js名称中的Sea,是海纳百川、有容乃大的意思。Sea.js希望是一片海,通过CMD规范,可以容纳各种各样的模块,希望能形成一个模块的生态圈,能形成生态链,能促进良性循环,能让整个前端开发界都受益。

接下来,玉伯为我们分享了他的开源感悟和前端开发之路,请看第2页