HTML5+MUI+HBuilder 之初探情人

標籤：lin   top   內容   調用   社區   想法   開啟   interface   ott   

07，08年那會兒正當Java火爆，C/C++仍是廣泛運用的一門語言的時候，所以我的大學都獻給了C/C++和Java。當諾基亞的倒閉成為按鍵機時代衰落的標誌時，移動APP的開發也如破堤之洪。爆炸式的崛起了。小弟不才，反映略慢，加上觀念陳舊，（C++程式猿的通病——認為前端=低端&移動端=前端），因此並沒有打好移動APP的基礎。這給後來我和我們興趣小團隊做些創意式項目也帶來了難以逾越的坎。

如今這會兒，哪個web應用沒有移動APPclient，就好比飛機沒有機翼。帥哥沒房沒車沒學曆，美女不能生育一樣，讓人無法接受，且火不起來。令人欣慰的是。我的團隊裡有人會Android開發，所以我所要操心的就是IOS開發了，於是我自學了IOS上的Xcode開發。如今的我僅僅能說是入門。

入門的我發現，IOS的開發太繁瑣了。畢竟我不是專門做這個的，要成為熟練的開發人員，須要花大量的時間研究開原始檔控制。改寫代碼等，當然令人費心的還有Xcode奇葩的MVC邏輯（MVC用在web開發非常好，可是用在本地應用開發真的適合嗎？小弟作為一個Xcode新人吐槽一句：這就相當於當年VC中的MFC！用過Delphi和CBuilder這些RAD的都會喜歡BCB的介面開發，入手簡單，所見即所得 (WYSIWYG)。所以在Delphi的Anders Hejlsberg去了微軟之後開發出了微軟至今最偉大的語言——C#及相關組件，當我第一次使用C#做Windows視窗應用開發的時候。我感覺到了Delphi介面開發的靈魂）。

言歸正傳，當我正迷茫自己諸多想法皆要毀於巨大的App開發成本時，MUI的出現真正的解放了我的負擔。

先簡介下MUI:

        MUI（Mobile User Interface）是一套基於Html5的，遵循Html5+規範的。中國團隊（是否有老外我不知道哦）開發的，開源的（遵循MIT 條款），用於手機端介面開發的一套架構。下面內容摘自MUI在Github上的項目介紹：

效能和體驗的差距。一直是mobile app開發人員放棄HTML5的首要原因。

瀏覽器天生的切頁白屏、不忍直視的轉頁動畫、浮動元素的抖動、無法流暢下拉重新整理等問題。這些都讓HTML5開發人員倍感挫敗。尤其拿到Android低端機執行，摔手機的心都有； 還有一方面，瀏覽器預設控制項樣式又少又醜，製作一個美麗的控制項很麻煩，也有一些製作簡單的ui架構但效能低下。

mui架構有效攻克了這些問題，這是一個能夠方便開發出高效能App的架構，也是眼下最接近原生App效果的架構。——摘自MUI在Github上的項目介紹

MUI的出現絕非偶然，小弟就以前有過類似的完整的設計，所以當MUI出如今我的視野中時，很多其它的是那種“英雄所見略同”的快感。我曾想過並初探過Xamaria的使用。這玩意一是收費，二是感覺有點半成品，開發環境非常繁瑣。不適合新手作為一個業餘愛好使用。

Xamarin始創於2011年，旨在使移動開發變得難以置信地迅捷和簡單。

Xamarin的產品簡化了針對多種平台的應用開發。 包含iOS、Android、Windows Phone和Mac App。

Xamarin由很多著名的開源社區開發人員創立和參與。並且也是Mono項目的主導者——C#與·NET架構的開源、跨平台實現。——摘自百度百科。

年初時。我就想過為啥不能夠出來一款類似於JVM的，能夠執行在安卓，IOS上的虛擬機器，然後開發人員僅僅須要使用一門語言（Java。Javascript，python等）就能夠開發出執行在不論什麼移動平台的軟體呢？然後再使用拖拽+事件編程（等於用BCB/Delphi開發windows應用）的方式來開發APP介面呢？到那個時候。使用者僅僅須要拖拖控制項，雙擊加入事件，改動改動樣式等屬性就能夠完畢通用的應用。並且，APP的安裝包會非常小。我們把一些規範的樣式和基礎控制項都放到這個虛擬機器中。執行時僅僅須要依照ID來調用。當然，草民肯定是沒有這個能力。時間。金錢來做這個的。。。

MUI包含同類軟體的誕生，絕對是我今年聽到的對我最實用的軟體行業的訊息之中的一個了！

它將極大的提高了草根程式猿開發web產品的單兵作戰能力。儘管我不熟悉原生APP的開發。或對於HTML,CSS和JS並不能說是精通，可是不虛！！

至少有經驗，瞭解原理。跟Xcode的學習成本比已經好了太多！

儘管我是xcode菜鳥，不應該黑xcode，只是之前的swfit的出現，讓我看到了豬跑···（沒吃過豬肉。還沒見過豬跑嗎？）

MUI是移動端開發的革命者之中的一個（同類的產品已經陸續出現）！終將革掉那些高富帥。“土豪劣紳”。大地主才幹用的起的開發方式的命。或許MUI之後還有更加優秀的類似架構產生，眼下（2014年年底）MUI是基於H5的最方便的App開發架構之中的一個！

MUI架構的原理圖例如以下：

           

HTML5+ Runtime即H5的運行環境，它的功能事實上就是手機上Web browser。只是要加上一個形容詞：高效的！ 它運行JS和HTML的速度比IOS內建的Safari可要高多了。通過高效運行HTML5和JS，MUI架構才幹實現和Native媲美的速度。

        MUI架構眼下的產品——HBuilder，也是遵循了H5+規範的H5 IDE。

通過HBuilder，我們能夠高速開發出H5網頁，而它跑在MUI架構中的速度很快，您不用操心他看起來不像native。另外，HBuilder號稱史上最牛的Html+js IDE，提供了各種快速鍵，和縮寫方式。小弟體驗了下。感覺確實不錯。只是這個工具做的再好，畢竟意義沒有MUI本身大，只是還是很值得鼓舞的。

要使用HBuilder開發和調試移動端APP（且容忍小弟這麼稱呼吧），僅僅須要：

（1）下載手機端軟體：http://dcloud.io/hellomui/

（2）下載Hbuilder，安裝。開啟。

————————以下是開發階段了——————

（3）建立。編寫一個項目（html，js，css，圖片等組成的）。

（4）插上您的手機，串連到電腦。點擊執行button（詳細的方式參見教程）。進行調試。

（5）打包公布！

咋樣？就這麼簡單。

這快感！

。！嘖嘖。

        再來談談我對MUI的發展預測：

一開始，MUI最為一個吊絲架構，肯定不敢大搖大擺的大談行業規範，所以僅僅能把自己的runtime打包到不論什麼一個公布的應用中。所以假設一個使用者的手機裡裝了多個Hbuilder開發的APP，那麼會有多個反覆的基本庫。

只是MUI架構是非常小的，不用非常操心。

隨著MUI的推廣，樣式的豐富，對Runtime和核心包作出了更大更複雜的要求，因此這個包應該會變大，從而推動了H5 + Runtime的平台化和韌體化（軟體韌體），或許過幾年，每一個手機的作業系統都會內建這個執行環境，基於它開發的APP可能僅僅有幾百KB。

        至於MUI的錢途命運，要麼自成一家，為各大手機商提供服務，索要服務費用，又或者被Apple。三星這種巨頭以重金收購。總之，這項技術是非常好的，可是盈利模式和終於命運會和Java類似。

希望MUI的同志再接再厲。做好興許的服務和工作。剛使用了下語音輸入功能。好像有點小BUG。

    （本文純屬飯後閑話，勿對號入座，口水滿屏） 

HTML5+MUI+HBuilder 之初探情人