开源的 HTML5 前端框架 Amaze UI 发布，推进 mobile first 前端 Web 方案

2014 年 6 月，云适配发布了开源的 HTML5 前端框架 Amaze UI ，目前处于内测期。根据 Amaze UI 的官网介绍，该框架的特点是 mobile first，解决 Web 应用从 PC 向多屏适配的问题，兼容国内主流浏览器和平台，并且专注解决中文排版优化问题。

InfoQ 中文站跟云适配 CEO 陈本峰进行了交流，了解有关 Amaze UI 框架的更多细节。

InfoQ：现在前端框架这么多，为什么还要开发 Amaze UI？

陈本峰：国内前端框架确实不少，但能解决浏览器存在的跨屏适配和兼容性问题的技术却很少。再加上国内对开源技术的思想意识不够，很多成熟的技术主要封闭在自己的公司内，这样造成整个产业链在技术上很难互惠互通。

与此同时，移动、跨屏已经成为了的当下互联网最热门的技术，而前端开发者在开发网页时，时常会陷入重复解决繁复的跨屏、适配问题，耗费精力，影响工作效率，产品开发进度慢这样的恶性循环中。

InfoQ：跟 Amaze UI 功能类似的之前的框架有哪些？你觉得它们什么地方不好用？

陈本峰：目前功能相似的能解决同类需求的主要是国外的开源框架，如 Bootstrap、Foundation、Semantic UI。

Bootstrap 是由 Twitter 在 2011 年 8 月推出的开源 WEB 前端框架，集合 CSS 和 HTML，使用了最新的浏览器技术，为快速 WEB 开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示，其核心就是基于 Less 框架构建的 CSS。Bootstrap 框架拥有美观的样式和封装完善的 JQ 插件，使用方便，基于 Bootstrap 的扩展也很多，这是其他框架所无法比拟的，也是其最受欢迎的条件之一。

Foundation 宣称是世界最好的响应式前端框架，默认支持 5 种网格布局，是三款框架中最复杂也是最灵活的。Bootstrap 默认支持四种网格布局，Pure 默认支持一种。

Semantic UI 是语义化设计的前端框架，开发更加直观，UI 组建可实时调试输出，其最大的特点是充分利用 CSS3 动画特效，简洁实用漂亮的样式。

以上各种产品我们也用过，当时我们发现全球有将近 6% 的网站是基于 Bootstrap 做的。不过对于中国开发者来说，Bootstrap 门槛仍然较高，而且本土化支持不够好。 首先，Bootstrap 只支持英文字体，并没有对中文字体做设置。在不同操作系统、不同浏览器下，默认的中文字体可能是不一样的，这样会导致网页在某些时候显示得不太好看。而且英文字号和中文字号的大小也不一样，直接用 Bootstrap 来做文字排版并不能达到最好的效果。另外，国内浏览器种类繁多，Bootstrap 也无法照顾到对国内浏览器的支持，我们希望不断加强对各种本土浏览器的支持，帮助广大前端开发者从最繁琐痛苦的浏览器性问题中解脱出来。其次，Bootstrap 还没有把重点放在丰富界面组件上，而 Amaze UI 非常注重提高开发者的效率，我们会不断增加跨屏的界面组件，让开发者尽量少些代码。第三，Bootstrap 因为最早是从 PC 端开始做的，所以有些地方是先 PC 后移动，而 Amaze UI 的思路是先移动后 PC。例如，Bootstrap 使用了 jQuery 库，而 Amaze UI 使用了 Zepto.js，Zepto.js 的体积不到 jQuery 的 1/3，对移动端的性能很大提升。因此，一个针对中国市场的、移动优先的跨屏前端开发框架开发者有很强的需求，也是一个行业的空白。

Amaze UI 应该是中国首个 HTML5 跨屏前端开发框架，其不仅兼容前几者的优势，还具有以下优势：

1. 加入更多符合中国市场特性的元素：中文排版更优化，兼容中国本土主流浏览器
2. 更轻量化，不仅适用于桌面端，更适合移动端
3. 包含一些封装好的 Widgets，其他框架则没有

InfoQ：Amaze UI 针对上述痛点，提出了什么不同的解决思路？

陈本峰：解决思路上，通过拆分、封装一些常用的网页组件，以规范化通过云适配平台开发的移动网站，统一用户体验。

具体措施上：

1. 语义化。Amaze UI 开发遵循语义化原则，意图通过类名（class）等信息直观传达元素的功能角色，同时关注结构、样式、行为分离，降低各部分的耦合程度，提高开发效率和可维护性。
2. 移动优先，跨屏适配。遵循 “移动优先（Mobile First）”、“渐进增强（Progressive enhancement）”的理念，可先从移动设备开始开发网站，逐步在扩展的更大屏幕的设备上，专注于最重要的内容和交互，适应移动互联潮流。轻松创建跨屏适配的网页。
3. 模块化，按需定制。AMUI 使用 LESS 编写样式，结构良好，易扩展，易维护；使用 Seajs 模块化开发、组织 JavaScript，自然、优雅。
4. 专注于 HTML5。AMUI 基于轻量的 Zepto.js 开发，有效减少为兼容旧浏览器的臃肿代码；基于 CSS3 的交互效果，平滑、高效。AMUI 专注于现代浏览器（支持 HTML5），不再为过时的浏览器耗费资源，为更有价值的用户提高更好的体验。
5. 本地化支持：相比国外的前端框架，Amaze UI 专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。

InfoQ：Amaze UI 开发多久了？有几个人在开发？

陈本峰：这个项目最开始是作为内部使用工具来开发的。我们云适配本身就是一个前端产品，Amaze UI 能帮我们降低开发时间和成本，用标准化作业流程，能有更高的产出。

从云适配创立之初，我们就开始积累自己的前端框架，同时也借鉴了 Bootstrap 等国外框架的优点。在内部使用过程中，大家一致反映不错，我们就希望把这个产品开源，希望分享给更多的人，也希望更多的人来贡献代码，来共建中国前端开源生态环境。在最近几个月，我们投入人力将这个项目整理成一个开源产品。目前有 2 个软件工程师全职在开发这个产品，还有一个设计，一个 PM 也在尽力配合。产品发布之后，我们会投入更多全职的工程师来专心打磨这个产品，同时也呼吁更多的前端开发爱好者共同来完善这个框架。

InfoQ：Amaze UI 现在在内测期，有什么期待和下一步计划？

陈本峰：Amaze UI 目前处在内测期，希望能尽可能多的收集到优秀的、有建设性的反馈建议和看法，与广大优秀前端开发者共同完善 Amaze UI 的功能，推动中国移动跨屏前端技术的发展。

下一步计划：Amaze UI 的目标是帮助开发者提高开发效率，提升网页效果，即用最短的时间做出最赞的网页。 Amaze UI 将会在所有测试反馈处理工作结束后，内部进一步完善和丰富功能，满足更多开发者的需求，届时会正式以开源形式向众多开发者免费开放。Amaze UI 是云适配成功转向 PaaS 后一项重要的战略部署，除了 Amaze UI，云适配将会陆续开放其他产品使之成为前端开发的标配工具，供开发者使用，使更多的前端开发者不再受前端复杂代码困扰。

受访者简介

陈本峰，云适配技术发明者，兼任国际互联网标准联盟 W3C 中国区 HTML5 布道官。曾供职于微软美国总部 IE 浏览器核心研发团队，参与了 IE 的 HTML5 引擎的设计和开发以及 HTML5 标准制定的讨论，成功发布了 IE8、IE9 和 IE10。 加入微软前，在 W3C 实验室从事互联网标准研究，发明了一项手机浏览技术的国际专利。曾获微软最有价值技术专家 (MVP) 荣誉称号、微软最佳产品贡献奖。在香港读书时，受开源精神领袖理查德·马修·斯托曼影响，倡导互联网免费共享、奉献精神。