从Bootstrap到 Amaze跨屏适配兼容更精彩

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

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

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

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

1. 加入更多符合中国市场特性的元素：中文排版更优化，兼容中国本土主流浏览器

2. 更轻量化，不仅适用于桌面端，更适合移动端

3. 包含一些封装好的Widgets，其他框架则没有

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

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

具体措施上：

语义化。Amaze UI开发遵循语义化原则，意图通过类名(class)等信息直观传达元素的功能角色，同时关注结构、样式、行为分离，降低各部分的耦合程度，提高开发效率和可维护性。

移 动优先，跨屏适配。遵循“移动优先(Mobile First)”、“渐进增强(Progressive enhancement)”的理念，可先从移动设备开始开发网站，逐步在扩展的更大屏幕的设备上，专注于最重要的内容和交互，适应移动互联潮流。轻松创建 跨屏适配的网页。

模块化，按需定制。AMUI使用LESS编写样式，结构良好，易扩展，易维护;使用Seajs模块化开发、组织 JavaScript，自然、优雅。

专注于HTML5。AMUI 基于轻量的Zepto.js开发，有效减少为兼容旧浏览器的臃肿代码;基于 CSS3 的交互效果，平滑、高效。AMUI专注于现代浏览器(支持HTML5)，不再为过时的浏览器耗费资源，为更有价值的用户提高更好的体验。

本地化支持：相比国外的前端框架，Amaze UI专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果;针对国内主流浏览器及App内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。

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

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

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

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

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

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

目前 Amaze UI 正在内测中，感兴趣的开发者可以点击这里进入内测申请。

相关阅读

云适配

是 一项网站跨平台适配的移动化技术，由前微软美国总部技术专家陈本峰(原微软IE浏览器核心研发团队成员 参与了Html5的标准定制讨论)在美国西雅图研发，是指只需在原网站中插入一行代码，实现网址不变、内容实时更新的网站移动化适配技术，不仅帮助PC网 站打开移动营销的入口，而且能降低95%以上的手机网站创建和运维成本。

Amaze UI

针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架，通过拆分、封装了一些常用的网页组件，比如轮播图框、文字框等等组件，让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中，随心所欲且节约成本的DIY移动版本。