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

  • 杨赛

2014 年 7 月 2 日

话题:HTML5语言 & 开发前端

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) 荣誉称号、微软最佳产品贡献奖。在香港读书时,受开源精神领袖理查德·马修·斯托曼影响,倡导互联网免费共享、奉献精神。

HTML5语言 & 开发前端