淘寶SUI Mobile框架
SUI Mobile 是一套基於 Framework7 開發的UI庫。它非常輕量、精美,只需要引入我們的CDN文件就可以使用,並且能兼容到 iOS 6.0+ 和 Android 4.0+,非常適合開發跨平台Web App。
輕量的UI庫
SUI Mobile 非常輕量,核心庫壓縮Gzip后的JS、CSS網絡傳輸體積總共只有52K,卻提供了20+個常用的組件。
對於只有HTML&CSS的組件,你只需要復制HTML代碼既可以使用。他的大部分JS組件都是獨立的 Zepto 插件,並且提供了 Zepto/jQuery 風格的API,你將會非常熟悉這種方式。
移動端web框架 Frozen UI
官網地址:http://frozenui.github.io/
Frozen UI是一個開源的簡單易用,輕量快捷的移動端UI框架。基於手Q樣式規范,選取最常用的組件,做成手Q公用離線包減少請求,升級方式友好,文檔完善,目前全面應用在騰訊手Q增值業務中。
非手Q用戶不能使用離線包而直接請求核心css也僅28k,另外也可以采用cdn和combo的方式按需加載。
CSS組件包括按鈕,列表,表單,通知,提示條,彈出框,選項卡,等級圖標,角標,紅點,1px解決方案等。
CSS使用模塊化的樣式命名和組織規范,使用sass編寫css代碼。
FrozenJS 是針對移動端開發的 js 組件庫,其依賴 zepto.js 和 FrozenUI,支持seajs模塊化和非模塊化兩種方式。
FrozenJS 包括: basic:FrozenJS 的一些基礎功能,包括模板引擎、tap 支持等。 ui:主要是一些觸屏常用的 UI 組件,包括 dialog 等。 effect:非常用的特效庫,特殊場景使用到是可以單獨調用。
兼容android 2.3 +,ios 4.0 + 。
移動WebApp開發框架 Clouda
Clouda是基於node.js的Webapp開發框架,在使用Clouda時需要安裝node.js和MongoDB。
Clouda 是百度推出的一款面向資深開發者的WebApp開發框架。在Clouda中開發app,可以在多終端下實現數據同步、任務遷移。並且Clouda支持面向數據的編輯模式,根據數據的變化自動實現界 面實時更新,開發者不需描述躍遷過程。它的核心在於雲、端使用統一的Javascript語言,可以同時運行在瀏覽器、iOS、Android以及百度框中。另外,clouda app可以同時開發服務端和客戶端,客戶端的數據與雲端實時同步,其內部數據也可供搜索引擎檢索,解決app孤島以及99.9%長尾應用只有30%分發量 的搜索分發問題。
HTML 移動端框架 Framework7
Framework7 或者叫 F7 是全功能的綁定 iOS 7 應用的 HTML 框架。Framework7 是免費開源的 HTML 移動端框架,用來開發混合移動端應用或者 iOS 7 的 Web 應用,並且帶有 iOS 7 的原生外觀和感覺。Framework7 也是獨立的原型應用工具。
Framework7 使用 Javascript,CSS 和 HTML 來創建 iOS 7 應用,支持多個平台的遷移(PhoneGap),但是不是支持所有平台,主要還是針對 iOS 7。
Amaze UI框架
官網地址:http://amazeui.org/
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內置瀏覽器提供更好的兼容性支持,為你節省大量兼容性調試時間。
Amaze UI 的開發歷程
雲適配創始人陳本峰:這個項目最開始是作為內部使用工具來開發的。我們雲適配本身就是一個前端產品,Amaze UI能幫我們降低開發時間和成本,用標准化作業流程,能有更高的產出。
從雲適配創立之初,我們就開始積累自己的前端框架,同時也借鑒了Bootstrap等國外框架的優點。在內部使用過程中,大家一致反映不錯,我們就希望把這個產品開源,希望分享給更多的人,也希望更多的人來貢獻代碼,來共建中國前端開源生態環境。在最近幾個月,我們投入人力將這個項目整理成一個開源產品。目前有2個軟件工程師全職在開發這個產品,還有一個設計,一個PM也在盡力配合。產品發布之后,我們會投入更多全職的工程師來專心打磨這個產品,同時也呼吁更多的前端開發愛好者共同來完善這個框架。
Amaze UI的目標
幫助開發者提高開發效率,提升網頁效果,即用最短的時間做出最贊的網頁,使更多的前端開發者不再受前端復雜代碼困擾。
Jingle移動端框架
官網地址:http://vycool.com/Jingle/
Jingle是一個SPA(Single Page Application)開發框架,用來開發移動端的html5應用,在體驗上盡量去靠近native應用,希望有一天html5能夠做到與native一樣的操作體驗。
騰訊移動Web前端框架
官網地址:https://github.com/AlloyTeamDev/Pro
微信WeUI和微信支付WePayUI
GMU
百度已經不更新
purecss
ionic
jquery mobile
bootstrap
MUI
AUI
總結:
框架固然是好,而且很多問題都已經解決,尤其是兼容性問題;但是帶來的問題也很多,尤其是你只會用框架,不知道里面的原理;所以我個人建議:先靜態最原始的方式實現,再到框架進行重構。