[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 組件截圖:


wKioL1PIlZXz5sVAAAPbL5uuzxM831.jpg

spacer.gif

也聊下前端開發者可能有的疑問:


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 的採訪。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章