[Amaze UI] 如何推进 mobile first 的前端 Web 方案

背景:云适配创立之初,我们就开始积累自己的前端框架,同时也借鉴了Bootstrap等国外框架的优点。在内部使用过程中,大家一致反映不错,我们就希望把这个产品开源,希望分享给更多的人,也希望更多的人来贡献代码,来共建中国前端开源生态环境。

由于Amaze UI目前处在内测期,我们希望能尽可能多的收集到优秀的、有建设性的反馈建议和看法,与广大优秀前端开发者共同完善Amaze UI 的功能,推动中国移动跨屏前端技术的发展。(内测地址:http://amazeui.org/landing

下面提前跟大家分享下我们处理 mobile first 的前端 Web 方案。

1. Amaze UI 之 CSS

1.1 移动优先

Amaze UI 以移动优先的理念开发,需要在 meta 中设置相关 viewport 属性。

width=device-width, initial-scale=1 是必须的,而且我们认为好的设计是不需要用户去操作窗口缩放的,所以加上了 maximum-scale=1, user-scalable=no

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

1.2 使用 HTML5

Amaze UI 在 HTML5 下开发,没有测试其他 DOCTYPE,使用之前确保你的 HTML 第一行是 <!DOCTYPE html>

<!DOCTYPE html><html>...</html>

2. Amaze UI 之 JavaScript 

基于 Zepto.js

Amaze UI JavaScript 组件基于 Zepto.js 开发,使用时确保在 Amaze UI 的脚本之前引入了 Zepto.js(1.1.3)。

由于模块内部指定了 $ = window.Zepto,目前并不支持使用 jQuery 替换 Zepto.js,后续的工作中会增加 jQuery 支持。

组件调用

组件的调用方式和 jQuery 类似,具体细节请查看各个组件的文档。

高级使用

基于 Sea.js

Amaze UI 目前使用 Sea.js 组织、管理模块,使用 Sea.js 的用户可以通过源码查看相关接口。

默认事件接口

Amaze UI 通过特定的 HTML 来绑定默认的事件,多数 JS 组件通过 HTML 标记就可以实现调用。这些默认事件都在amui 命名空间下,用户可以自行关闭。

关闭所有默认事件:

$(document).off(‘.amui‘);

关闭特定组件的默认事件:

$(document).off(‘.modal.amui‘);

自定义事件

多数组件都定义了一些自定义事件。

自定义事件命名的方式为 {事件名称}:{组件名称}:amui,用户可以查看组件文档使用这些自定义事件。

$(‘#myAlert‘).on(‘close:alert:amui‘, function() {  // do something});

Web 组件截图:

也聊下前端开发者可能有的疑问:

1. 现在前端框架这么多,为什么还要开发Amaze UI?

国内前端框架确实不少,但能解决浏览器存在的跨屏适配和兼容性问题的技术却很少。加上国内对开源技术的思想意识不够,很多成熟的技术主要封闭在自己的公司内,这样造成整个产业链在技术上很难互惠互通。同时,移动、跨屏已经成为了的当下互联网最热门的技术,而前端开发者在开发网页时,时常会陷入重复解决繁复的跨屏、适配问题,耗费精力,影响工作效率,产品开发进度慢这样的恶性循环中。公司内部用 Amaze UI 对这类问题的解决反映挺好,我们就打算开源出去,希望能对前端开发有些帮助。

2. Amaze UI 相对其他前端框架有哪些优势?

不可避免的需要跟 Bootstrap 做比较,我觉得 Amaze UI 可能有下面几种优势:

0. 能良好的兼容已有前端框架的优势;

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

3. Amaze UI 推进 mobile first 前端 Web 方案的思路是什么?

通过拆分、封装一些常用的网页组件,以规范化通过云适配平台开发的移动网站,统一用户体验。

具体措施上:

  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内置浏览器提供更好的兼容性支持,为你节省大量兼容性调试时间。

后记:

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

注:部分文字源于 InfoQ 的采访。

[Amaze UI] 如何推进 mobile first 的前端 Web 方案

时间: 2024-08-28 22:13:50

[Amaze UI] 如何推进 mobile first 的前端 Web 方案的相关文章

Amaze UI web mobile 前端框架

目录结构 index.html - 空白 HTML 模板: blog.html - 博客页面模板(预览): landing.html - Landing Page 模板(预览): login.html - 登录界面模板(预览): sidebar.html - 带边栏的文章模板(预览): 在 app.css 中编写 CSS: 在 app.js 中编写 JavaScript: 移动端首选 Zepto,桌面端选 jQuery,这应该是大多数开发者的共识.那对于跨平台的响应式网站呢? Zepto 体积小

云适配将推出中国首个开源 HTML5 跨屏前端框架 - Amaze UI

云适配,这是一家能以一行代码将你的网站移动化,实现网址不变且内容实时自动同步的服务提供商.云适配所采用的技术是一项基于云计算.利用html5进行网站跨屏适配,它为目标网站开发一行JS代码,并嵌入PC网站,这个JS代码通过对PC网站目标网页数据的分析和抓取,在云端完成用户当前设备的网页最佳展现方式的计算,最后在浏览器端实现html结构的重排及CSS的重新渲染,以适应移动端用户的浏览习惯. 在他们用一行代码做适配的过程中,积累了一套跨屏的前端常用网页组件,而最近,他们想把这套组件开源出来,将这套组件

HTML5前端框架Amaze UI全面开源

近日,国内首个开源 HTML 5 跨屏前端框架 Amaze UI 开放下载体验. Amaze UI 是一个针对 HTML 5 开发的轻量级.模块化.移动优先的跨屏前端框架,通过拆分.封装了一些常用的网页组件,比如轮播图框.文字框等等组件,让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中,而不需要自己在开发的过程中重写一遍. 该框架的特点是 mobilefirst,解决 Web 应用从 PC 向多屏适配的问题,兼容国内主流浏览器和平台,并且专注解决中文排版优化问题,受到不少国内前端开

目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI

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

爱创课堂----推荐你们几个精致的前端Web UI框架 | 干货

1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. 2.Amazeui Amaze UI 是一个轻量级. Mobile first 的前端框架, 基于开源社区流行前端框架编写的. 3.sui SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范. 通过SUI,可以非常方便的设计和实现精美的页面. 同时sui还有移动端版本msui,ms

样式 bootstrap purecss Amaze UI 推荐

Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,

推荐几个精致的前端web UI框架

1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. gitHub地址:https://github.com/aliceui/aliceui.github.io 2.Amazeui Amaze UI 是一个轻量级. Mobile first 的前端框架, 基于开源社区流行前端框架编写的. 官网地址:http://amazeui.org/ 3.sui SUI是

开发时间缩短90% Amaze UI助H5梦工场响应式网站快速上线

近日,HTML5梦工场使用云适配开源HTML5跨屏前端框架AmazeUI对自身网站进行了重新开发.开发完成的新网站,用户无论通过任何终端访问,网站内容都能保持实时同步,并能以最佳的展现方式呈现出来.   H5梦工场官网在PC和移动端的展示   HTML5梦工场是中国最有影响力的技术社区团队,由国内最早一批HTML5探索者和狂热拥护者发起,为广大开发者搭建一个开放.自由的互动交流平台,旨在推动HTML5在中国的应用与普及.目前,旗下的品牌活动已覆盖了近10万互联网和移动互联网行业的从业者和爱好者.

Amaze UI的一点总结

做一个微信公众号内的网页的时候,用到了Amaze UI,也称妹子UI. 官网上宣称,Amaze UI中国首个开源 HTML5 跨屏前端框架,用下来的感觉是比较类似于bootstrap,都是移动端优先.用的过程中发现一些亮点: Amaze UI 将所有元素的盒模型设置为 border-box.即:box-sizing:border-box; 把padding.border 都计算在width当中:注意,任何情况下,margin无法计算在内,这是因为:w3c标准下,这个属性有三个取值—box-siz