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

编者按

对陈本峰的采访，源于技术圈内的一个饭局，虽然大家对他的云适配创业经历很感兴趣，但是他却在自我介绍中反复提到了“开源”和“Amaze UI”，言谈举止中透露着对国内开源社区发展的关注和热情参与，特别是他领导的 Amaze UI 开源项目在正式上线 2 个月之后，在 Github 上就取得了 1000 多个 star 的关注度，这样的成绩在国内屈指可数。于是，便有了对陈本峰的采访和下面的内容。

正文

Amaze UI 的前世今生

在中关村创业大街旁边的办公室中，Amaze UI 项目的领导者、云适配 CEO 陈本峰欣然接受了 InfoQ 中国总编辑崔康和高级编辑郭蕾的专访。陈本峰首先谈起了 Amaze UI 开源的背景，云适配是专注前端技术的公司，在把网站从电脑版转到手机版的时候，需要一个手机的前端框架。从创业初期开始积累，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 在招募技术爱好者，也欢迎大家参与。
• 对于公司这个品牌来说，如果我们做了一个全中国最流行的一个前端框架，那么云适配以后做跟网站相关的一些业务，肯定会得到别人的认可，这也是一个品牌上的关注。所以我们会去做这件事情。对于另外一家公司，他可能就没有这么大动力了，比如说如果是一家做电商的公司，他可能不会有那么直接的帮助，那招人直接花猎头费了，他也不做网站相关的业务。可能跟云适配自己本身这个特定的业务是非常相关的。

开源的未来出路

开源项目有哪些出路？陈本峰分析了国外的例子：

开源项目参与模式现在在国外是比较成熟的，基本上国外 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 的公司开始参与进来。

在本文发布之际，Amaze UI 发布了 2.0 正式版，感兴趣的读者可以访问其官方网站了解详情。