MUI產品概述

MUI爲何誕生

  1. 性能和體驗的差距,一直是mobile app開發者放棄HTML5的首要原因。 
    瀏覽器天生的切頁白屏、不忍直視的轉頁動畫、浮動元素的抖動、無法流暢下拉刷新、側滑抽屜卡頓等問題,這些都讓HTML5開發者倍感挫敗,尤其拿到Android低端機運行,摔手機的心都有;

  2. 另一方面,瀏覽器默認控件樣式又少又醜,製作一個漂亮的控件非常麻煩,也有一些製作簡單的ui框架但性能低下。

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

 

其實我們原本是開放心態,大家隨意使用自己喜歡的前端框架。但是其他移動App框架實在不給力:
- 基於jq的jqmobile,性能低的無法忍受
- 基於angular的ionic,都把pc端很重的東西引入到移動App中。angularjs本身設計是爲了pc端網頁的雙向數據綁定,做個移動App幹嘛用這麼重的東西。
- bootstrap這種響應式設計,性能在低端機不足,而且UI風格一看就是網頁,不是App的感覺。
於是爲了方便廣大開發者,我們製作了mui。

 

MUI的定位是:最接近原生體驗的移動App的UI框架

基於mui的定位,產生了mui的幾個特點,輕、小、只涉及UI、只爲移動App而生、界面風格原生化。
所以請大家注意,mui有所爲有所不爲:

  1.  
  2. mui不是jq,不封裝dom操作
    與ui無關的mui不做,你願意用jq或zepto就自己用,並不衝突。
    但我們並不建議在移動App裏引入jq或zepto這些框架,原因如下:

    • 爲了性能,層層封裝的框架,尤其是遍歷循環dom時,影響效率,尤其在低端Android手機上,我們費死勁了才把性能以毫秒爲單位一點點提升,搞這個的dom框架進來就讓很多努力又付諸東流。
    • 原生JS挺簡單,爲何需要jq?
      jq的成功當時是因爲ie6、7、8、9、10、chrome、ff這些瀏覽器不兼容,讓開發者崩潰,而且pc上瀏覽器性能好,跨平臺兼容也不影響性能。但jq根本就不是爲手機設計的。
      手機上只有webkit瀏覽器(忽略wp,反正mui不支持wp),根本就不需要jq這種封裝框架來操作dom。
      而且HBuilder提供了代碼塊來簡化開發,敲dg、dq,直接生成document.getElementById("")、document.querySelectorAll(""),非常快捷方便,而且執行性能非常高,而且沒有瀏覽器兼容問題。
      發現很多開發者只會jq,反正想繼續在App裏使用jq沒有問題。但也建議大家多學學js本身。
      mui與vue、react、angular也不是一個層面的東西,可以在一個工程裏混合使用。但在大多數ui控件上,應該直接使用mui的寫法,因爲mui的繪製是最樸素的HTML繪製,不是經過js操作的繪製,這種方案的效率比經過js繪製的效率要高很多。只有必須經過js操作才能渲染的控件,比如ajax聯網後填充的list,此時使用vue或react都可以。
  3. mui、HTML5+、5+Runtime的關係說明
    mui是一個前端框架,HTML5+是一套HTML5能力擴展規範,HTML5+ Runtime是實現HTML5+規範的強化瀏覽器引擎。
    有點類似於bootstrap、w3c和chrome os的關係。
    HTML5+規範隸屬於http://www.html5plus.org,定義了HTML5規範中沒有但開發者做App需要的擴展規範。
    DCloud的5+ Runtime完整的實現了HTML5+規範。同時5+ Runtime還實現了Native.js,一種通過js調用幾十萬原生API的技術。
    爲了提升體驗,mui勢必會調用一些5+Rutime的增強能力,主要是plus.webview、plus.nativeobj和plus.nativeUI。
    但mui不是要替代HTML5Plus,以後也無計劃替代把所有5+的api都包一層。
    mui是把一些常用的窗體操作封裝了,但這種封裝適應面也是有限的,遇到複雜窗體管理,還是要仔細瞭解plus的api。
    所以,

    • 有人抱怨mui的文檔不全,其實是缺本文,本文終於說清楚mui做什麼不做什麼了。詳細的mui文檔要去下方提示的mui官網查看。
    • 有人抱怨mui api不全,其實是沒去看plus的api。知原理、知如何封裝,方能融匯貫通。
    • 有人抱怨Hello mui示例代碼裏寫的mui的方法,爲何文檔裏沒有,是因爲有些方法是內部工程師簡化開發中的封裝,未考慮通用設計,還不足以開放爲標準api,所以文檔裏沒介紹。
  4. mui有插件體系
    爲了簡化開發者的多端發佈開發,mui在覈心庫之外,補充了一些插件,這些插件不一定是ui相關,也有業務相關。
    在Hello mui示例裏下方的示例模板,基本都屬於插件。這些插件的使用需要加載mui標準庫之外的js等資源。

mui是一個開源項目,請前往託管在github的mui官網查看詳細介紹

這裏是mui發佈時的演講視頻:http://v.youku.com/v_show/id_XNzYyOTEyMjcy.html

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