陈本峰：HTML5跨屏前端框架Amaze UI的开源之道

作者 崔康 对陈本峰的采访，源于技术圈内的一个饭局，虽然大家对他的云适配创业经历很感兴趣，但是他却在自我介绍中反复提到了“开源”和“Amaze UI”，言谈举止中透露着对国内开源社区发展的关注和热情参与，特别是他领导的Amaze UI开源项目在正式上线2个月之后，在Github上就取得了1000多个star的关注度，这样的成绩在国内屈指可数。于是，便有了对陈本峰的采访和下面的内容。 **Amaze UI 的前世今生** 在中关村创业大街旁边的办公室中，Amaze UI项目的领导者、云适配CEO陈本峰欣然接受了InfoQ中国总编辑崔康和高级编辑郭蕾的专访。陈本峰首先谈起了[Amaze UI](http://amazeui.org/)开源的背景，[云适配](http://www.yunshipei.com/)是专注前端技术的公司，在把网站从电脑版转到手机版的时候，需要一个手机的前端框架。从创业初期开始积累，Amaze UI逐渐发展起来。 > 早期的时候，对这种移动端的Web界面框架比较少。国外的这块移动版做得相当的好，我觉得他们兼容性做得不错，但是速度非常慢，打开非常慢，所以无法忍受。于是我们当时决定自己做，所以就有了这套框架（Amaze UI），一直以来都是给云适配整套体系用的，后来我们觉得这套东西可以剥离出来，让别人也能用。所有人开发移动网站的时候，都应该需要这么一个框架，因为这样可以大幅度提高开发效率，不需要重新发明，这是一个基本的思想。 在开源之前，陈本峰的团队主要做了3件事情，这些看似微不足道的步骤为开源项目打下了良好的基础 ： - 代码精进化 - 文档规范化 - 启动内测 **国内开源项目尚处萌芽期** 随着国内技术社区的发展，国产开源项目越来越多，但真正运营成功并取得广泛关注的例子并不多。在笔者抛出这个问题之后，陈本峰显然已经早有答案。他指出，从国外的开源经验来看，一个项目要想成功，必须有一个专职的研发团队来做。虽然我们谈开源，经常说靠社区的力量，但是最核心的推动力还需要是专职团队，并且这个专职团队是真的为社区服务的。 国内很多开源项目，大多是开发者自己的兴趣爱好，并不是公司层面来支持项目的，经过一段时间之后，开发者工作调动或者公司业务重心转移，就会导致项目夭折了。陈本峰分析过Github上的一些开源项目，刚启动的时候，更新频率很高，一个月有几十次，但是到后来，基本两年都没有更新一次了。这种状况无法给潜在的开发者信心。 对于开发者来说，评估开源项目可用性主要有两点，一是社区支持度，二是活跃度。这两项不达标，就没人敢用。陈本峰认为，如果开源是一个公司行为，而不是个人兴趣爱好，那么活跃度可以有保障。 **如何成功做好开源项目** 即使公司提供支持，开源项目就可以成功了吗？显然不是！ 陈本峰强调，开源要用一种服务社区的心态去做，而不只是服务自己公司内部。 > 虽然Amaze UI是云适配整个大产品体系的一部分，但是开源之后，Amaze UI团队就只需要去考虑外面社区的开发者的需求，把我们自己的内部团队也当成跟外面社区等同的客户去对待，不因为是内部的团队就优先处理，而是看这个需求到底是大家普遍认为一个比较需要的高的需求，还是它就是我们的一个特殊行为。如果是我们的一个特殊行为，就应该慎重。让我们内部的团队基于开源基础上自己去改，改完以后由开源项目团队判断是接受还是拒绝掉，完全独立地由两套团队去运行，他们的目标也就非常明确。云适配跟Amaze UI开源的目标是各自明确的，互相独立的。我们在做的过程中，也发现外面社区有很多比较强烈的需求，比如我们在做Amaze UI里面发现最大的一个需求就是除了Amaze UI本身提供的一些功能，客户需要一些第三方的英文插件。其实这个需求本身在云适配这块是没那么强的，因为云适配这块主要还是针对移动端，而客户需要的英文插件是开发者在做一个横跨手机、平板、PC三屏的网页时会需要的。并不是云适配的强烈需求，但是在我们的2.0阶段最重要的工作就是做这件事情，这就是个非常典型的例子，说明我们是优先考虑外面开发者的，然后才是考虑内部开发者，或者就等同对待。 这并不是纸上谈兵，Amaze UI项目如今由两位全职的开发者在推动和维护，都是云适配的员工。 **用产品的标准做开源，解决移动化难题** 对于开源项目的定位问题，Amaze UI虽然提供英文的相关介绍，但是它更是为国内开发者优化的，陈本峰分析了几个原因： - 本土化的支持，Bootstrap没有做专门针对中文的支持。字体是网页里面非常重要的一块，直接决定了网页展示出来的体验的好坏。Bootstrap里面是没有定义中文字体的，这就会导致每个浏览器都会根据默认设置去选一个字体。比如说IE在XP和Windows 8下字体就是不一样的，在苹果下面字体又不一样了，然后在各种手机浏览器上面字体都不一样。最后导致做出来的网页可能在各种浏览器、各种操作系统下面看起来效果都不一样，是完全不可控的。而且可能会导致排版格式变掉。Amaze UI里面很严格的定义了中文字体，做到在各种设备、操作系统、浏览器下看到的效果基本上是一样的，比如说中文字体，我们用的是雅黑。在Windows底下是雅黑，但是在苹果底下是没有雅黑这个字体的，那我们就用最接近的黑体去做。Bootstrap基本上是用13号字，我们是用14号字，字号的大小也会导致排版不一样。Bootstrap不太可能去加中文字体，因为如果一旦加中文字体，就还要加日文字体、韩文字体、法文字体， Bootstrap就会变得巨大无比了，这肯定也不是产品设计的初衷。还有对本土浏览器的支持，当时做Amaze UI的另外一个想法源于浏览器的兼容性，对于多数前端开发者来说，或者都是一个梦魇。可能开发一个网页用一个月的时间，但是做浏览器的兼容可能要花两个月的时间，甚至都做不完，面向的浏览器太多了。这些工作没有必要让开发者一遍又一遍的重复。所以当时我们想做一个开源产品，大家基于这个产品，把浏览器兼容性都调整一下，以后使用这个产品就行了，节省了大量的工作。国内浏览器和国外浏览器也是很不一样的，像360、搜狗等，而且国内有双核浏览器，这也是国外不存在的。针对这些中国特色，我们会做一些调整和一些特别的优化，这也是我们跟Bootstrap一个比较大的区别。 - 移动优先，Amaze UI一开始为移动端开发的，所以非常考虑在移动端的表现，要让整个代码体积尽量小。另外尽量的采用CSS3的动画，动画效果以前在PC端，都是用JS版做，一方面要下载JS代码。另外一方面是它对机器的要求比较高。因为JS需要大量的CPU运算。移动端的浏览器，相对来说都比较现代，都是支持Html5的，使用CSS3动画就会节省代码，因为一行CSS3代码可以解决一个动画的问题，代码体积会小很多。第二，因为CSS动画是浏览器原生支持的，所以会有硬件加速。硬件的运算能力是要比用JS软件上的能力要强很多的，所以整个移动端的体验会好。 - 组件化，Amaze UI非常强调组件这个概念，近两年有一个非常热的技术叫做Web component，它的意思是说，网页的每一个构件，都可以封装成一个组件，这种技术在后端已经非常成熟了。比如说Node.js里面的NPM，可以用来管理各种各样的包。Ruby的Gem，Python也有，但是前端是没有的。在前端大家的做法是非常原始的，比如要做轮播图，就是拷贝大段的Html5、CSS和JS，这个很大的问题就是，只要拷错一行，就不工作了。另外一个是更新的问题，来源的组件更新了，本地的代码也需要更新，可能一个修改就直接导致更新不了。所以前端整个开发的技术还是相对比较原始的状态的，所以Google在2012年的时候提出了Web component的概念，这个概念发展的非常快，W3C已经把它列入标准的开发范围了，现在已经在推进这个Web标准，我们设想未来的Web前端开发，应该是基于这种组件式的，所以我们也做了很多组件。Bootstrap并没有朝这个方向去走，它更多的是强调它这种框架的底层架构，而我们强调组件。而且这种组件是非常具有本土化特质的，比如说我们上面有百度地图的组件，国外用Google。我们的客服的组件，都是第三方部分提供商，或者一些视频播放的组件，视频播放组件可能会播放土豆优酷的视频，在国外会用Youtube。未来我们希望做成类似于Node.js的NPM的包管理的系统，程序开发者需要什么组件，一个命令行直接就下载下来了。 说到Amaze UI对待开源的认真态度，版本路线图的规划也是一个例子。陈本峰介绍说： > 我们是比较严格的按照国外比较先进的开源项目的运营方式，比如说我们会找Bug，去分级，分成P0、P1、P2、P3、P4。PO是前面要解决的，P1会在下一个发布版本会解决， P2我们会在下一个版本有时间的条件下去做，没有时间会往后推。P3属于这种未来可以讨论头脑风暴的，用户提交上来一个Bug，一个issue，我们马上就会做一个级别的判定，这样子提这个Bug的开发者会知道，他的这个问题大概是会在什么时间阶段会被解决，而不是说就是大家提上来了，我们把所有的Bug拢在一起，而是清清楚楚去把问题分类，确定会在哪个版本解决。版本规划也是，每一个版本的工作重点都分的很清楚，有很清晰的规划图，清晰的Bug管理系统，让开发者觉得这个项目比较靠谱，认真对待的每一个版本，很认真对待用户提出来的每一个问题的，而不是含含糊糊的，让用户根本没有期待。 **开源亦能双赢** 目前国内很多企业做开源都是抱着试试看的态度，那么开源仅仅是做活雷锋吗？ 陈本峰认为从商业角度，Amaze UI和云适配也是受益的： - 本身云适配业务是让用户把网站转到手机端，所以我们对兼容性、适配性是非常关注的。但是单凭一己之力，是没法做到兼容性非常完善的。我们开源出去，如果这个产品有别人用，那别人也来贡献代码，这样也能够返过来帮助云适配这个产品，能够做到更好的兼容性、适配性，对我们产品的提升是有直接帮助的，所以我们愿意去做这件事情，也值得投入做这件事情。 - 做招聘， Amaze UI的开发者全部是前端的开发者。我们去招人的时候，就在Amaze UI上打广告，大家会觉得Amaze UI这家公司前端工程师，是一个不错的选择，就会愿意来，成本跟猎头费的成本也差不太多。从这点来说，对我们就是招人肯定是有帮助的。目前Amaze UI在招募技术爱好者，也欢迎大家[参与](http://amazeui.org/about/wantu)。 - 对于公司这个品牌来说，如果我们做了一个全中国最流行的一个前端框架，那么云适配以后做跟网站相关的一些业务，肯定会得到别人的认可，这也是一个品牌上的关注。所以我们会去做这件事情。对于另外一家公司，他可能就没有这么大动力了，比如说如果是一家做电商的公司，他可能不会有那么直接的帮助，那招人直接花猎头费了，他也不做网站相关的业务。可能跟云适配自己本身这个特定的业务是非常相关的。 **开源的未来出路** 开源项目有哪些出路？陈本峰分析了国外的例子： > 开源项目参与模式现在在国外是比较成熟的，基本上国外2B（To Business，面向企业，以下简称2B）产品的公司基本都是做开源的，我觉得他们的这个商业模式有几种，一个就是做收费技术支持，然后就是做培训，我们在做的过程中已经有这种参与，已经有人找过我们去给客户做收费培训。技术支持也可以做，这是比较容易看到的。还有就是去做一些系统集成的解决方案的，像IBM，IBM做了这种大量的开源，像Java、Eclipse，基本上做这种解决方案，当然解决方案里面利用最高的还是它的硬件。当IBM的软件不是主要收入来源的时候，他就愿意去做开源的软件，加上自己的硬件卖出去。像Google做开源的目的是通过开源这种方式促进各种人去使用互联网，越来越多的人使用移动互联网，他的移动搜索就赚钱了，为什么Google会去做一个开源的浏览器Chrome？Google的商业模式在于流量变现，只要世界上有越来越多的人上网，就有越来越多的流量，那他就能够变现，这是Google的一个商业逻辑，那这些都是跟他支撑业务是有关系的，如果纯支撑业务没关系，那就是培训，还有技术支持，Redhead就是这种模式。 谈到对未来国内的这种开源发展趋势的看法，陈本峰对2B市场的开源报以比较大的期望： > 我觉得开源在国内市场里比以前是要好很多了，市场繁荣多了，今天的Github上面有越来越多的中国开发者出现了，随着这个行业的发展，未来开源这个事情会在国内会越来越流行。当然我觉得可能主力应该还是那些大的互联网公司，因为国外主力也都是像Google、Facebook和雅虎这些公司。现在还处在一个萌芽期，哪一天它真的能爆发，就是看这些大佬们在这块开始发力的时候。可能也是因为在中国做2B的大公司是非常少的，国外这种2B的大的上市公司是非常多的。在中国整个2B的企业还没有完全起来，这个也限制它开源时期的发展，为什么呢？因为首先这个企业有很多内部系统的集成的需求，如果不是开源，他没法知道这个产品是不是跟他内部的现有的这些产品能够很好的融合在一起。那你开源之后，他自己先拿过来研究一下，是不是结合的好，所以这个时候，把产品开源，其实是一种变相的推广手段。第二个考虑到一些安全性的问题，开源之后客户也可以消除对安全性的隐忧，像我们云适配也是，它也是针对企业，是个2B的产品，我们基本上也还是按这条路来走的，所以我觉得国内开源能够飞速发展，就是有两个条件，一个就是BAT一些大公司开始介入、开始投入，第二个就是国内2B的公司开始参与进来。 ### 受访者介绍 陈本峰，云适配创始人CEO，Amaze UI项目的领导者，国际互联网标准联盟W3C中国区HTML5布道官，专注互联网标准以及浏览器相关技术研究超过10年。曾任职于微软美国总部IE浏览器核心团队，师从浏览器行业泰斗Christian，参与IE的HTML5引擎设计开发以及下一代互联网标准HTML5国际标准制定。