常用移動web開發框架研究分析

jopen 9年前發布 | 366K 次閱讀 移動Web開發框架 移動開發 Web開發

    純粹的總結一下移動web開發框架,移動web開發框架有jQuery Mobile 、Sencha Touch等等,他們都來源于web開發,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch來自于ExtJS。jQuery Mobile 和Sencha Touch都是比較成熟老牌的框架,項目中也有應用。國內也有公司,像BAT巨頭也在探索和實現了適合自己的移動web框架。


1、jQuery Mobile  


    jQuery Mobile框架能夠幫助你快速開發出支持多種移動設備的Mobile應用用戶界面。jQuery Mobile最新版本是1.4.0,默認主題采用扁平化設計風格。jQuery Mobile1.4.0主要側重于性能和控件方面的改進。除了全新的默認主題和SVG圖標,還新增了開關控件、通用過濾器、箭頭彈出框、滑動提示框等一系列功能,更是集成了jQuery UI的Tab部件。jQuery Mobile繼承了jQuery的優勢,并且提供了豐富的適合手機應用的UI組件。jQuery Mobile還有很多的第三方擴展。

1.1 jQuery mobile flat-ui 主題

https://github.com/ququplay/jquery-mobile-flat-ui-theme


  

1.2jQuery mobile Bootstrap 主題

 https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme







2、Sencha Touch



    Sencha Touch做的Web App看起來更像Native App,用戶界面組件和豐富的數據管理,全部基于最新的HTML 5和CSS3的 WEB標準,全面兼容Android和iOS設備。Sencha Touch提供了超過50個組件。



3、阿里系web框架

    

    Kissy是阿里前端自己開發的前端框架,KISSY 是一款跨終端、模塊化、使用簡單的 JavaScript 框架。除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等,KISSY 還面向團隊協作做了獨特設計,提供了經典的面向對象、動態加載、性能優化解決方案。作為一款全終端支持的 JavaScript 框架,KISSY 為移動終端做了大量適配和優化,讓你的程序在全終端均能流暢運行。KISSY Mobile是一套面向移動端的功能特性集合實現靈活配置的轉場動畫和View的解偶。KISSY 5.0已經全面支持移動端。Kissy架構可以參考這里Kissy架構圖:



4、百度移動web框架

百度移動web框架有三個了解了一下。


4.1 GMU  

    GMU(Global Mobile UI)是百度前端通用組開發的移動端組件庫,具有代碼體積小、簡單、易用等特點,組件內部處理了很多移動端的bug,覆蓋機型廣,能大大減少開發交互型組件的工作量,非常適合移動端網站項目。 該組件基于zepto的mobile UI組件庫,提供webapp、pad端簡單易用的UI組件!



4.2 Clouda+ 


    Clouda+是移動web應用開發整體解決方案,并特別針對百度輕應用場景進行了優化,旨在讓webapp體驗和交互媲美Native應用。



4.3 efe   

efe百度商業體系前端團隊推出的web框架,efe有如優勢。

4.3.1模塊化、組合式的移動前端框架
4.3.2基于 Stylus 的移動端樣式庫

    他是提供了 JavaScript 模塊、CSS 樣式庫與開發平臺的完整前端解決方案。擅長移動端 SPA 項目、輕應用。

       他是專為移動端設計的 Mixin 風格樣式工具庫。在其基礎上創建了 Rider UI,一個靈活的 UI 樣式庫。




5、tencent

5.1 Spirit

         Spirit并不是一個具體的框架或者工具,但是她是移動端一系列解決方案的整合與聚攏。她是Alloyteam開發團隊在移動開發項目中通過大量實踐、歸納、總結提煉而成,最終沉淀下來的一個體系,真正建立一套移動Web開發的集成解決方案。Spirit主要由5個部分組成:移動Web開發規范、JM、JMUI、Mobug、Mars。



5.2 Frozen UI

    Frozen UI是騰訊ISUX團隊(社交用戶體驗設計團隊)根據最新的手機QQ設計規范制作的移動端Web框架,包括CSS基礎樣式和組件、JavaScript基礎組件和一些動畫效果庫。為了方便記憶和增添趣味性,騰訊ISUX團隊為它取了動畫片《冰雪奇緣》的英文名,并把Elsa女王作為該項目的卡通代言人。

    項目主頁:http://frozenui.github.io

    Github代碼托管地址:https://github.com/frozenui/frozenui


6、ionic


    Ionic提供了一個免費且開源的移動優化HTML,CSS和JS組件庫,來構建高交互性應用。基于Sass構建和AngularJS 優化。

    Ionic既是一個CSS框架也是一個Javascript UI庫。許多組件需要Javascript才能產生神奇的效果,盡管通常組件不需要編碼,通過框架擴展可以很容易地使用,比如我們的AngularIonic擴展。

    Ionic遵循視圖控制模式,通俗的理解和 Cocoa 觸摸框架相似。在視圖控制模式中,我們將界面的不同部分分為子視圖或包含其他視圖的子視圖控制器。然后視圖控制器“驅動”內部視圖來提供交互和UI功能。一個很好的例子就是標簽欄(Tab Bar)視圖控制器處理點擊標簽欄在一系列可視化面板間切換。 github


</div>


7、Amaze UI

      Amaze UI 采用業內先進的 Mobile first 理念,從小屏逐步擴展到大屏,最終實現所有屏幕適配,適應移動互聯潮流。Amaze UI 含近 20 個 CSS 組件、10 個 JS 組件,更有 17 款包含近 60 個主題的 Web 組件,可快速構建界面出色、體驗優秀的跨屏頁面,大幅度提升你的開發效率。Amaze UI 非常注重性能,基于輕量的 Zepto.js 開發,并使用 CSS3 來做動畫交互,平滑、高效,更適合移動設備,讓你的 Web 應用可以高速載入。

</div> </div>

</div>


8、CardKit


    CardKit 是來自豆瓣的一個移動 UI 框架,使用 Card\Unit\Component 概念快速構建移動 Web 應用。應用外觀跟原生應用無異。






9、App.js


    App.js 是一個輕量級的 JavaScript UI 庫,用來創建移動的 Web 應用,應用的外觀跟原生的應用相同,性能也近乎一致。

</div>

特點:

</div>

跨平臺,支持 Android 2.2+ 和 iOS 4.3+

</div>

Widgets 和自定義主題

</div>

頁面調整管理

</div> </blockquote>



10、Junior

    Junior為前端框架,用來構建基于HTML5的移動Web應用,外觀與行為跟本地應用相似。它采用針對移動性能優化的CSS3轉換,支持旋轉燈箱效果,包含多樣的 Ratchet UI組件。整個框架使用Zepto(類似jQuery語法的輕量級移動設備js類庫),且整合了backbone.js的視圖和路由。 Junior十分易于使用,且提供詳細的文檔及案例,便于學習。





11、Jingle


    Jingle是一個SPA(Single Page Application)開發框架,用來開發移動端的html5應用,在體驗上盡量去靠近native應用,希望有一天html5能夠做到與native 一樣的操作體驗。提供了按鈕、列表、表單、彈出框、輪換、上拉/下拉、日歷等各種移動端常用的組件,簡單適用.





12、mui

</div>

    性能和體驗的差距,一直是mobile app開發者放棄HTML5的首要原因。 瀏覽器天生的切頁白屏、不忍直視的轉頁動畫、浮動元素的抖動、無法流暢下拉刷新等問題,這些都讓HTML5開發者倍感挫敗,尤其拿到Android低端機運行,摔手機的心都有; 另一方面,瀏覽器默認控件樣式又少又丑,制作一個漂亮的控件非常麻煩,也有一些制作簡單的ui框架但性能低下。

    mui框架有效的解決了這些問題,這是一個可以方便開發出高性能App的框架,也是目前最接近原生App效果的框架。

</div> </div>



13、Polymer

    Google給我們帶來了Polymer。Polymer是是一個讓你可以輕易創建web組件的框架。
在他們完成開發web應用底層結構之后,他們開始專注于UI。Polymer 是 material design 在 web 平臺的實現. Polymer 團隊與 material design 設計團隊合作非常的緊密。 事實上, Polymer 在 material design 的研發階段扮演著關鍵性的角色: 它被用于快速原型化和重現設計的概念.

來自:http://blog.csdn.net/xyz_lmn/article/details/41052977

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!