HTML5+MUI+HBuilder 之初探情人

07，08年那會兒正當Java火爆，C/C++還是普遍運用的一門語言的時候，因此 個人大學都獻給了C/C++和Java。當諾基亞的倒閉成爲按鍵機時代衰落的標誌時，移動APP的開發也如破堤之洪，爆炸式的崛起了。惋惜小弟不才，反映 略慢，加上觀念陳舊，（C++程序員的通病——以爲前端=低端&移動端=前端），所以並無打好移動APP的基礎。這給後來我和咱們興趣小團隊作 些創意式項目也帶來了難以逾越的坎。如今這會兒，哪一個web應用沒有移動APP客戶端，就比如飛機沒有機翼，帥哥沒房沒車沒學歷，美女不能生育同樣，讓人 沒法接受，且火不起來。使人欣慰的是，個人團隊裏有人會Android開發， 因此我所要擔憂的就是IOS開發了，因而我自學了IOS上的Xcode開發。如今的我只能說是入門。入門的我發現，IOS的開發太繁瑣了，畢竟我不是專門 作這個的，要成爲熟練的開發者，須要花大量的時間研究開源控件，改寫代碼等，固然使人費心的還有Xcode奇葩的MVC邏輯（MVC用在web開發很好， 可是用在本地應用開發真的適合嗎？小弟做爲一個Xcode新人吐槽一句：這就至關於當年VC中的MFC！用過Delphi和CBuilder這些RAD的 都會喜歡BCB的界面開發，入手簡單，所見即所得。因此在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框架的開源、跨平臺實現。——摘自百度百 科。

年初 （2014）時，我就想過爲啥不能夠出來一款相似於JVM的，能夠運行在安卓，IOS上的虛擬機，而後開發者只須要使用一門語言 （Java，Javascript，python等）就能夠開發出運行在任何移動平臺的軟件呢？而後再使用C#開發Winform（等於用 BCB/Delphi開發windows應用）的方式來開發APP界面呢？到那個時候，用戶只須要拖拖控件，雙擊添加事件，修改修改樣式等屬性就能夠完成 通用的應用。並且，APP的安裝包會很小，咱們把一些規範的樣式和基礎控件都放到這個虛擬機中，運行時只須要按照ID來調用。固然，我等草民確定是沒有這 個能力，時間，金錢來作這個的。。。

MUI 的誕生，絕對是我今年聽到的對我最有用的軟件行業的消息之一了！它將極大的提升了草根程序員開發web產品的單兵做戰能力。雖然我不熟悉原生APP的開 發，或對於HTML,CSS和JS並不能說是精通，可是不虛！！至少有經驗，瞭解原理。跟Xcode的學習成本比，這算啥！雖然我是xcode菜鳥，不該 該黑xcode，不過以前的swfit的出現，讓我看到了豬跑···（沒吃過豬肉，還沒見過豬跑嗎？）

MUI 是移動端開發的革命者之一（同類的產品已經陸續出現）！終將革掉那些高富帥，「土豪劣紳」，大地主（BAT等勿對號入座 ^_^）才能用的起的開發方式的命。也許MUI以後還有更加優秀的相似框架產生，可是不能否認的是，目前（2014年年末），MUI是基於H5的最好的， 最有潛力的前（錢）途的框架！

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）插上您的手機，鏈接到電腦，點擊運行按鈕（具體的方式參見教程），進行調試。

（5）打包發佈！

咋樣？就這麼簡單。這快感！！！嘖嘖。

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

一開始，MUI最爲一個吊絲框架，確定不敢大搖大擺的要求這要求那的，因此只能把本身的runtime打包到任何一個發佈的應用中。因此若是一個用戶的手機裏裝了多個Hbuilder開發的APP，那麼會有多個重複的基本庫。不過MUI框架是很小的，不用很擔憂。

隨着MUI的推廣，樣式的豐富，對Runtime和核心包做出了更大更復雜的要求，所以這個包應該會變大，從而推進了H5 + Runtime的平臺化和固件化（軟件固件），也許過幾年，每一個手機的操做系統都會自帶這個運行環境，基於它開發的APP可能只有幾百KB。

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

但願MUI的同志再接再礪，作好後續的服務和工做。剛使用了下語音輸入功能，好像有點小BUG。

最後引用一句名言，或者說是廢話，開個玩笑，聽聽就行：

草根程 序員想要逆襲高富帥，迎娶百富美，就必須使用更加廉價(both in time and money)，高效，高端的工具，讓咱們有時間去關注業務！去思考將來！去享受生活！那些個啥啥啥啥的，老說開發不懂業務不懂愛，程序員細心的操做，耐 心；架構師縝密的思惟，大局觀，你真當咱們玩不轉業務麼？咱們只是窮(both in time and money)，沒得選擇而已（戳到淚點）。——馬莎士比亞雲。