天天看點

移動web開發架構研究

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

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

移動web開發架構研究

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

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

4.3.1子產品化、組合式的移動前端架構

4.3.2基于 Stylus 的移動端樣式庫

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

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

移動web開發架構研究

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

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

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

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

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

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

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

移動web開發架構研究

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

移動web開發架構研究

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

移動web開發架構研究

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

特點: 跨平台,支援 Android 2.2+ 和 iOS 4.3+ Widgets 和自定義主題 頁面調整管理
移動web開發架構研究

10、Junior

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

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

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

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

    Google給我們帶來了Polymer。Polymer是是一個讓你可以輕易建立web元件的架構。

在他們完成開發web應用底層結構之後,他們開始專注于UI。Polymer 是 material design 在 web 平台的實作. Polymer 團隊與 material design 設計團隊合作非常的緊密。 事實上, Polymer 在 material design 的研發階段扮演着關鍵性的角色: 它被用于快速原型化和重制設計的概念.

繼續閱讀