Sea.js 创始人玉伯专访
程序员文章站
2022-03-03 18:23:43
...
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随着而来的也有更多的挑战。
为了将前端开发者繁重的工作变得简单,框架应运而生。国内也不乏一些非常优秀的前端开发框架。本期【开源专访】我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框架、前端开发的那些事,以及前端大牛是如何炼成的。
玉伯(王保平),淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人。
为了将前端开发者繁重的工作变得简单,框架应运而生。国内也不乏一些非常优秀的前端开发框架。本期【开源专访】我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框架、前端开发的那些事,以及前端大牛是如何炼成的。
玉伯(王保平),淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人。
先介绍一下自己和目前的工作吧!
我叫王保平,阿里花名玉伯。目前在支付宝前端技术部工作,从事前端基础类库、工具等产品的研发。喜欢编码,热爱思考,努力把每一天过得平淡又精彩。
Sea.js是什么?致力于解决什么问题?
Sea.js是一个很纯粹小巧的模块加载器,它只解决一个问题:前端代码的模块化。通过Sea.js,可以将大量JavaScript代码封装成一个个小模块,然后轻松实现模块的加载和依赖管理。
有了Sea.js,我们就可以书写模块了。Arale则是一套满足支付宝需求的通用模块集合,是一套基于模块化的前端基础类库,目前具备100多个模块,简单易用。
有了Sea.js,我们就可以书写模块了。Arale则是一套满足支付宝需求的通用模块集合,是一套基于模块化的前端基础类库,目前具备100多个模块,简单易用。
发起Sea.js项目的初衷是什么?它的本质意义是什么?
2008年,在前端开发过程中,经常会出现一个单文件几千行甚至近万行的情况。这种大文件,对协作开发、后续维护、性能调优等都不利。Sea.js初衷是帮助前端开发工程师将大文件拆分成小文件,能保持小颗粒度的模块化开发,同时不需要过多考虑依赖关系,让依赖管理轻松自如,让模块化开发变得更自然,就像浏览器原生提供的一样。
Sea.js的本质意义是通过模块化开发,来提高代码的可维护性。对工程师而言,是关注度分离,更将更多精力聚焦在代码本身的逻辑上。
Sea.js的本质意义是通过模块化开发,来提高代码的可维护性。对工程师而言,是关注度分离,更将更多精力聚焦在代码本身的逻辑上。
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,所有源码都在上面,欢迎阅读,欢迎给出建议。
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,所有源码都在上面,欢迎阅读,欢迎给出建议。
Sea.js开发过程中,最大的困难是什么?是如何解决的?
这个说起来比较有意思,在开发过程中,Sea.js最大的困难,不是编码,而是模块定义规范的确定。
在业界,目前流行的模块定义规范,有CommonJS的Modues/1.x规范,还有RequireJS倡导的异步模块定义规范AMD。这两个规范,在社区里存在比较大的讨论,各有利弊,适用于不同的运行环境。Sea.js最后采用的是延自CommonJS Modules/2.0规范的通用模块定义规范CMD。这个至今都有争议,不同的团队,不同的场景下,喜好和选择都有可能不同。
随着Sea.js的推广,CMD规范目前在国内已经有相当多人认可。接下来会进一步国际化,希望能得到更大社区范围内的认可。这条路还很长,不能说已解决了,一切还在解决的路上。
不过,这些都不是关键。即便Sea.js以后死掉,只要大家对模块化开发理念有深度认可了,那一切也就值了。
在业界,目前流行的模块定义规范,有CommonJS的Modues/1.x规范,还有RequireJS倡导的异步模块定义规范AMD。这两个规范,在社区里存在比较大的讨论,各有利弊,适用于不同的运行环境。Sea.js最后采用的是延自CommonJS Modules/2.0规范的通用模块定义规范CMD。这个至今都有争议,不同的团队,不同的场景下,喜好和选择都有可能不同。
随着Sea.js的推广,CMD规范目前在国内已经有相当多人认可。接下来会进一步国际化,希望能得到更大社区范围内的认可。这条路还很长,不能说已解决了,一切还在解决的路上。
不过,这些都不是关键。即便Sea.js以后死掉,只要大家对模块化开发理念有深度认可了,那一切也就值了。
Sea.js和Arale目前分别应用在哪些地方?
Sea.js目前已应用在阿里、腾讯、网易、百姓网等很多公司,具体可以查看seajs.org首页下面的logo墙,目前国内有大量中小网站采用Sea.js。
Arale的使用范围是支付宝,还有阿里巴巴ICBU部门,在一小部分国内创业型公司中也有使用。
Arale的使用范围是支付宝,还有阿里巴巴ICBU部门,在一小部分国内创业型公司中也有使用。
您之前还开发过前端类库KISSY,而Arale也是一个基于Sea.js的前端类库,两者有什么不同?这是在“造*”吗?它们的开发初衷是什么?目标又是什么?
Kissy和Arale都是前端基础类库,从组件提供的功能来讲,存在很大重合度。但从理念上来讲,这两个类库有比较大的不同。
Kissy是大教堂式思路,所有组件,从底层基础组件,到上层UI组件,都是自主研发。这和业界的YUI3、Sencha等类库的思路是一样的。
Arale有所不同。Arale的首要理念是开放。开放不光意味着将自己做好的贡献给社区,开放更意味着将社区已有的优秀组件直接拿进来用。在开放的理念下,Arale类库里,直接引入了jQuery、Backbone、Moment、Handlerbars等业界成熟组件。在这种思路下,Arale能与开源社区紧密互动,彼此快速共进。
Kissy和Arale的初衷都很简单,Kissy是解决淘宝的前端基础类库问题,Arale则是解决支付宝的前端基础类库问题。两者的目标,都是减少前端开发过程中的重复工作量,尽量提高前端开发的工作效率,同时在通用组件层面保障全站的用户体验。
Kissy是大教堂式思路,所有组件,从底层基础组件,到上层UI组件,都是自主研发。这和业界的YUI3、Sencha等类库的思路是一样的。
Arale有所不同。Arale的首要理念是开放。开放不光意味着将自己做好的贡献给社区,开放更意味着将社区已有的优秀组件直接拿进来用。在开放的理念下,Arale类库里,直接引入了jQuery、Backbone、Moment、Handlerbars等业界成熟组件。在这种思路下,Arale能与开源社区紧密互动,彼此快速共进。
Kissy和Arale的初衷都很简单,Kissy是解决淘宝的前端基础类库问题,Arale则是解决支付宝的前端基础类库问题。两者的目标,都是减少前端开发过程中的重复工作量,尽量提高前端开发的工作效率,同时在通用组件层面保障全站的用户体验。
Sea.js和Arale未来会如何发展?目标是什么?
从2.0开始,Sea.js的发展目标是做简单、纯粹的模块加载器,甚至希望从2.x的某个版本开始,就不需要更新了,就能满足绝大部分需求,能非常稳定下来,不需要再升级。
Sea.js稳定后,更多精力会放在Arale等前端基础类库的建设上。Sea.js名称中的Sea,是海纳百川、有容乃大的意思。Sea.js希望是一片海,通过CMD规范,可以容纳各种各样的模块,希望能形成一个模块的生态圈,能形成生态链,能促进良性循环,能让整个前端开发界都受益。
Sea.js稳定后,更多精力会放在Arale等前端基础类库的建设上。Sea.js名称中的Sea,是海纳百川、有容乃大的意思。Sea.js希望是一片海,通过CMD规范,可以容纳各种各样的模块,希望能形成一个模块的生态圈,能形成生态链,能促进良性循环,能让整个前端开发界都受益。
为什么选择将这些项目开源出来?开源对于自己的技能提升是否有帮助?
选择开源有两个初衷:
开源本身对技能提升个人觉得是有限的,但技能之外的软技能提升,比如沟通协作、产品化思路、运营管理等非常有帮助。通过开源的方式,比较容易让一个技术人员有产品观,能让自己的眼界在编码之外看到更多美景。
- 将好的东西贡献给社区;
- 通过社区让东西更好。
开源本身对技能提升个人觉得是有限的,但技能之外的软技能提升,比如沟通协作、产品化思路、运营管理等非常有帮助。通过开源的方式,比较容易让一个技术人员有产品观,能让自己的眼界在编码之外看到更多美景。
在开源领域这么久,您有什么感悟?您理解的“开源精神”是什么?
我理解的开源精神,有三点:
1)拿来主义。懂得从现有成熟开源项目中去挑选符合自己需求的项目,直接拿来用。程序员容易犯一个病,就是什么东西都想自己造,或者对别人造的,浅尝辄止就判断别人的不行。真正的拿来主义,需要一颗谦卑的心。在「拿」的过程中,需要去看文档,甚至去读源码,这些过程,对程序员的技能增长都非常有帮助。很多程序员的技能提升,并非是写的代码太少,而是看的代码不够多。懂得去看、去理解、去用,是迈入开源世界的第一步。
2)参与比主导更重要。开源世界里永远不会有完美的项目。当你学会了「拿来主义」后,在使用开源项目时,肯定会遇到各种bug、各种特性不满足。这时,你可以自己去新开一个项目,也可以参与到该开源项目中去,帮助作者一起来完善。个人觉得对于绝大部分项目来说,参与进去帮助完善是更明智的选择。参与进去,可以让你更懂得美,懂得感恩之心,懂得回馈之情。这在过程中,你的功力,往往也会大增。不光是技术上的进步,还包括英语读写能力。在人性沟通上,你也会收获很多,这是无价的财富。
3)重视社区。除了代码,还有文档、测试用例、Issues 管理、版本发布、升级策略、书籍、视频等等。jQuery、Backbone、AngularJS 等成熟项目,成熟的是社区,而不是源码。好的社区,是在 Google 中一搜索,就能找到不少资料。好的社区,是你踩过的坑,经常已经有人也踩过并整理分享出来了。社区的形成非常不易,如果选择了开源,从项目一开始,就尽量可能的去让社区逐步形成起来。社区形成后,开源才会活起来,否则就是死开源。
最后,知易行难。上面的道理或许大家都懂,真要做到,则是一场修行。Sea.js 和 Arale 也才刚刚上路,旅途中,有西湖惬意的微风,也有沙漠般的烈日当头。好在,选择了,就不怕远。
1)拿来主义。懂得从现有成熟开源项目中去挑选符合自己需求的项目,直接拿来用。程序员容易犯一个病,就是什么东西都想自己造,或者对别人造的,浅尝辄止就判断别人的不行。真正的拿来主义,需要一颗谦卑的心。在「拿」的过程中,需要去看文档,甚至去读源码,这些过程,对程序员的技能增长都非常有帮助。很多程序员的技能提升,并非是写的代码太少,而是看的代码不够多。懂得去看、去理解、去用,是迈入开源世界的第一步。
2)参与比主导更重要。开源世界里永远不会有完美的项目。当你学会了「拿来主义」后,在使用开源项目时,肯定会遇到各种bug、各种特性不满足。这时,你可以自己去新开一个项目,也可以参与到该开源项目中去,帮助作者一起来完善。个人觉得对于绝大部分项目来说,参与进去帮助完善是更明智的选择。参与进去,可以让你更懂得美,懂得感恩之心,懂得回馈之情。这在过程中,你的功力,往往也会大增。不光是技术上的进步,还包括英语读写能力。在人性沟通上,你也会收获很多,这是无价的财富。
3)重视社区。除了代码,还有文档、测试用例、Issues 管理、版本发布、升级策略、书籍、视频等等。jQuery、Backbone、AngularJS 等成熟项目,成熟的是社区,而不是源码。好的社区,是在 Google 中一搜索,就能找到不少资料。好的社区,是你踩过的坑,经常已经有人也踩过并整理分享出来了。社区的形成非常不易,如果选择了开源,从项目一开始,就尽量可能的去让社区逐步形成起来。社区形成后,开源才会活起来,否则就是死开源。
最后,知易行难。上面的道理或许大家都懂,真要做到,则是一场修行。Sea.js 和 Arale 也才刚刚上路,旅途中,有西湖惬意的微风,也有沙漠般的烈日当头。好在,选择了,就不怕远。
您认为,Kissy、Seajs和Arale这些开源项目为什么能取得成功?它们是否从社区中获得了贡献?
还谈不上成功。目前社区未完全成型,以Sea.js和Arale为例,目前从社区中获得的贡献有:
1. bugs反馈和新功能讨论。这很重要,只满足一个公司的需求时,很多想法都想不到,当有多个公司使用你的产品时,在某些点上可以帮团队打开思路,去看到不少原来看不到的地方,甚至有时会有“为什么我们之前没想到”的感慨。
2. 全网测试。这一块,在Sea.js的开发上尤为明显。Sea.js在每次发布前,都会邀请社区人员一起帮忙运行测试用例。前端开发与后端开发的最大区别之一,就是后端代码的运行环境是固定的,是开发人员自己选择的,而前端代码的运行环境却无法固定,是用户决定的。这使得前端代码的测试,除了自己的内部测试,还需要线上的“众包测试”。开源使得“众包”成为可能。
3. 代码优化。由于是开源的,代码是公开的,偶尔就会有人会去阅读源码,并发现其中可以优化的一些点。这在Sea.js和Arale里都有一些案例,有时挺感动的。社区的力量,会给人惊喜。
1. bugs反馈和新功能讨论。这很重要,只满足一个公司的需求时,很多想法都想不到,当有多个公司使用你的产品时,在某些点上可以帮团队打开思路,去看到不少原来看不到的地方,甚至有时会有“为什么我们之前没想到”的感慨。
2. 全网测试。这一块,在Sea.js的开发上尤为明显。Sea.js在每次发布前,都会邀请社区人员一起帮忙运行测试用例。前端开发与后端开发的最大区别之一,就是后端代码的运行环境是固定的,是开发人员自己选择的,而前端代码的运行环境却无法固定,是用户决定的。这使得前端代码的测试,除了自己的内部测试,还需要线上的“众包测试”。开源使得“众包”成为可能。
3. 代码优化。由于是开源的,代码是公开的,偶尔就会有人会去阅读源码,并发现其中可以优化的一些点。这在Sea.js和Arale里都有一些案例,有时挺感动的。社区的力量,会给人惊喜。
您如何看待国内的开源环境?
国内开源环境还不够理想,但越来越好了。很期待更多的公司加入并推动开源活动。对于前端开发领域,一定程度上真没有什么秘密,期待更多公司的加入。
前、后端开发有没有明确的分界(是否能完全独立)?您心目中理想的前、后端开发模式是什么?
前后端开发很难完全独立,个人觉得也没有必要彼此独立。我的想法是“全端工程师”,都是Web开发工程师,从前到后应该都能做才行,这对效率、质量都有好处。
但独立的前后端开发工程师也应该存在。前端一些深钻领域,需要前端领域专家的持续投入,后端也一样。这些专家来自一线开发工程师,同时在某个领域有独到的想法和执行力,能沉淀下来形成工具和技术平台,这些平台反过来提供给「全端工程师」去用,这是往深里钻的技术工具化、平台化思路。
但独立的前后端开发工程师也应该存在。前端一些深钻领域,需要前端领域专家的持续投入,后端也一样。这些专家来自一线开发工程师,同时在某个领域有独到的想法和执行力,能沉淀下来形成工具和技术平台,这些平台反过来提供给「全端工程师」去用,这是往深里钻的技术工具化、平台化思路。
有人认为,过多使用框架会导致开发者忽视对JavaScript原生语言特性的学习,变得懒惰,或者基础会很薄弱;也有人认为,只要精通原生JavaScript就可以,
在前端开发工作中,JavaScript语言的使用只占比较小的一部分。更多的精力,需要花在语言之外。掌握JavaScript语言的基本使用,就如我们在学校学习,需要掌握中学数学的内容一样。这一块我觉得不难,只要肯花时间去学就好。
值得提醒的是,如果只精通原生JavaScript,那么就如只会中学数学一样,虽然已经能解决很多问题,但要优雅地、更简单地解决问题就比较困难了。
框架可以让你从重复低级工作中脱离出来,特别是应用复杂到一定程度时,如果没有框架层的抽象,代码往往会复杂得难以维护。在前端开发越来越复杂的今天,框架已经是必不可少的了。学会去用,去拥抱,可以事半功倍。
框架不会让你偷懒,更不会让你基础薄弱。即便是jQuery,如果你对DOM的基本原生操作不太会,那么你也很难真正把jQuery使用得很好。就如中学数学都不理解的话,要把大学数学用得很好只会是梦。
值得提醒的是,如果只精通原生JavaScript,那么就如只会中学数学一样,虽然已经能解决很多问题,但要优雅地、更简单地解决问题就比较困难了。
框架可以让你从重复低级工作中脱离出来,特别是应用复杂到一定程度时,如果没有框架层的抽象,代码往往会复杂得难以维护。在前端开发越来越复杂的今天,框架已经是必不可少的了。学会去用,去拥抱,可以事半功倍。
框架不会让你偷懒,更不会让你基础薄弱。即便是jQuery,如果你对DOM的基本原生操作不太会,那么你也很难真正把jQuery使用得很好。就如中学数学都不理解的话,要把大学数学用得很好只会是梦。
对于繁多的前端框架,应该如何选择?
这个问题太大了。虚的回答是,根据自己公司的需求去选择合适的就好。实的回答是,用Sea.js吧,然后模仿Arale去造一个适合自己的模块集合,目前这套方案,在我知道的各种场景下,都能比较好的用起来。
阿里的前端开发流程是什么样的?
不同团队不一样。比如淘系团队和支付宝系团队很多流程就很不一样。流程很大程度上取决于业务类型。淘系很多业务是导购类型,快速往往是第一要素,支付宝很多业务则是金融类型的,稳定与安全往往是第一位的。这两种要求下,产生的流程有非常大的不一样,甚至可以说是地球的两极。目前也在逐步靠拢,寻求合理的权衡下的统一。
能否分享一些您的学习经历、经验?您认为学习前端开发最重要的是什么?
前端开发是距离用户最近的编码工作,个人觉得,一个优秀的前端开发工程师,一定要对产品有爱。如果做的产品自己都不怎么用,那么很多交互细节很可能你会缺乏深思,你会在潜意识里忽略掉。但是,如果你自己也用这个产品,那么你就不仅仅是在编码了,你同时还是PD、PM、测试等等角色,甚至你就是这个产品的CEO。当CEO的感觉挺累但挺爽的,去找到你认可、让你为之疯狂的产品吧,你的开发能力会在你的疯狂中突飞猛进。
您眼中的技术大牛是什么样的?如何成为技术大牛?
我理解的技术大牛,就是把事情做得很专业的人。温伯格在《理解专业程序员》中对专业有很好的定义:
- 专业是,具有了不起的技艺或经验。
- 并为其他人解决问题,无论问题有多麻烦。