Hybrid App走向“輕混”，剖析WeX5開源高性能HTML5 App開發框架

4月23日上午，HTML5應用開發工具WeX5的首席技術運營官王潔在Qcon上做了《Hybrid App走向“輕混”，剖析WeX5開源高性能HTML5 App開發框架》的演講，分享了 WeX5在架構選型、開發歷程上的一些技術痛點和心得體會。

分享內容分為三部分：

• Hybrid App從“重混”到“輕混”的發展歷程
• 構建高性能HTML5 App跨端框架
• WeX5可視化快速開發實踐

一、Hybrid App從“重混”到“輕混”的技術發展歷程

王潔說，Hybrid App的發展歷程基本上從早期的多元化走向了只有Android和iOS兩個系統的環境。對于開發者來說，就意味著一個App需要制定兩套實現方案，這對開發成本和維護成本都是非常大的挑戰。基于這樣一個現實，其解決方案就是想辦法實現套代碼跨端運行，所以Hybrid APP混合應用模式應運而生。在Hybrid App整個開發框架上，有各種各樣的框架，各種各樣的技術選型，而現在主要的技術就是Web技術，不僅簡單， 更容易實現UI， 開發者人數也比較多。

大部分的框架是使用Web+Native實現組合的，王潔分享的內容范圍是基于Web和Native Hybrid APP的框架。在Hybrid APP發展早期，Web運行性能是當時的主要的瓶頸。Web在性能方面有缺陷，Web不夠就用Native來湊，就是選擇了用原生技術來彌補Web上的性能不足，其實就是多WebView。王潔說混合的單WebView最大的障礙就是頁面切換，閃白很明顯。手機里面又講究用戶交互體驗，從一個頁到另一個頁想做個平滑的動畫，用純Web技術在當時的條件下是非常難以實現的，其實目前大多數框架也是這么做的，就是采用多WebView，這樣可以平滑的轉場。

因為早期硬件比較差，瀏覽器性能也一般般，所以有一些比較復雜的組件在實現一些功能的時候，速度比較慢。當時框架里是用NativeUI組件來彌補的，配合Web來實現這些功能。這種模式被定義為“重混”，用原生的能力去彌補UI，或者技術更偏Native的框架就被定義為重混的Hybrid App框架。

重混框架優缺點很明顯，優點是提升了運行性能、增強了交互。缺點是Web和Native技術交叉混雜，增加了開發人員的工作難度。但是，當下的手機硬件配置已經有了很大的改善，包括瀏覽器技術的發展也很重要，在GS引擎方面都有長足的進步。實現功能的時候用Web的技術的前提下已經不再需要Native技術來彌補了，隨著技術的發展，性能已經不再是瓶頸。

另一個改變了移動應用這一領域的進程事件不得不提到。王潔說，自從微信推出以后，相當于重新定義了移動應用的概念，通過它的服務號、公眾號、企業號，微信本身變成了一種應用平臺。包括微信最新的版本更新，它瀏覽器內核的升級，包括對游戲的支持，都和大量的移動App開發有著莫大的關聯。而這個時候重混的框架就顯得多余了，因為在重混框架里面很多性能的解決是依賴Native的原生部分。而到了微信里面，多WebView和NativeUI都沒有了。原來在重混框架里面很強的一些能力完全就消失了，這時候在微信里面就有很多能力就不能用了。

于是，輕混就成了目前真正要跨端Hybrid App的必然選擇，這時候輕混的UI部分必須用純Web技術，在底層的設備接口上，GS無法完成的原生部分需要Native技術來彌補。需要強調的是，Native的技術是不應該去侵入UI的，這樣的一個框架就是我們所說的輕混Hybrid App框架，這才是真正的HTML5 App框架。

二、構建高性能HTML5 App跨端框架

伴隨著以上的觀點，接下來談談如何構建輕混模式下的HTML5 App框架。這種混合框架很簡單，首先要有一個內置了瀏覽器的外殼，在瀏覽器里提供網頁運行環境，同時在這個外殼上提供很多插件，可以讓網絡通過GS進行操作。

基于這樣的認識，王潔說，在選擇HTML5框架設計的時候，要解決兩個框架的問題，一個是HTML5的框架，一個是Native的框架。首先看Native框架的選擇，選擇PhoneGap框架，受到了業內主流廠商支持，微軟也是用Cordova，它的插件框架是開放的，很容易自定義。

另外就是要解決HTML5的一些性能問題，如果不采用重混架構的話，在頁面切換還是會有一些障礙，王潔說到， WeX5 采用SPA單頁應用模式，它是基于傳統的頁面加載模式 MPA ，頁面之間互相獨立。但是SPA的不同之處在于，其框架里整個頁面是由外殼頁面框架組成的，是用AJAX技術完成的， AJAX 在桌面時代就存在，通過局部刷新來提升用戶體驗。但是把 AJAX 技術最大化來使用，整個頁面框架都用 AJAX來 實現，每個頁面的加載都是這樣的方式。

對設備的局部渲染，可以在加載的時候在后面預加載再做轉場動畫，而且還不需要依賴多Web應用，不需要依賴Native就可以完成。而且在加載多頁框架時每個頁面的共用功能要重復加載。所以從各方面來說SPA相對于MPA是有極大的性能提升的。

SPA確實很好用，但是在設計產品的時候需要考慮到多人協作過程中，支持復雜應用的開發過程中，會不會出現多個ID會沖突，樣式沖突，JS沖突等等致命問題？所以下面就談到了頁面隔離的問題。

解決這樣棘手的問題，王潔說，首先要考慮到HTML元素ID沖突的問題，因為是可視化工具，所以ID屬性的設計是拖到一個屬性欄里去定義ID，這時候剛好可以用一個替換原則，用了X ID 來替換，不會直接設定 ID 屬性。這樣到內存里，會動態的生成真實的 ID ，會在 X ID 后面加一個頁面標志，這樣可以保證多人寫的頁面在加載內存里 ID 是不相同的，也就不存在沖突。當然提供一些API的時候是能拿到真實 ID ，對應相應的元素，不影響訪問。在整個組件體系里，開發者利用很簡單的方法就可以拿到組件，可以很平滑的解決掉ID沖突的問題。

CSS樣式沖突問題分為兩類，一類樣式是共用樣式，多頁面引用同一個頁面；另一類樣式被定義為私有樣式，只使用頁面，但不希望這個頁面干擾到其他頁面。這時候給每個頁面都配了一個CSS文件，定義私有樣式，限定在當前頁面。實現起來也很簡單，通過對工具的編譯，把私有CSS文件里的所有樣式加一個頁面標志，在頁面節點的屬性上加一個標志，這樣就使得class只能作用于當前頁面的HTML元素，這就成為了一個私有樣式。

然后是JavaScript問題，現在 JavaScript 模塊化技術很流行，借用 JavaScript 模塊化技術，解決 JavaScript 隔離問題。王潔在這里順便把RequireJS簡單的提了一下，通過define可以定義模塊，在RequireJS定義里，這個大括號里的才是模塊里的代碼。不管是方法還是變量，都封裝在閉包里，每個代碼都是寫在define的模塊里，這樣就把代碼自然隔離了。

王潔說他們在外圍還做了一些工作，首先是實現完整的外殼管理，Shell類提供外殼管理。為了防止信息泄露， 在配置的時候確實會把頁面完整卸載掉 。當加載頁面片斷時，會從當前外殼數把 JS 刪掉，頁面加載的時候創建的JS對象都會完整的釋放掉，這是由框架來保證的。另外是路由的問題，在SPA單頁面框架里路由是很重要的，因為是單頁面應用，加載的頁面都是片斷，其實UI地址一直是外殼的地址。

下圖是整體框架的架構。黃色部分用的是Cordova，解決安卓和蘋果的原生調用問題。同時要兼容微信，所以上面把Cordova和微信又做了封裝，抽象成統一的HTML5 API。如果通過統一的Native API去拍照，會自動根據頁面環境，通過Cordova接口調用，這樣可以更方便的實現一次開發，多端運行，代碼不需要改，既可以運行在原生App里，也可以運行在微信里。包括拍照、GPS地圖，一系列的API都可以進統一分裝。

Bootstrap在這里提供了幾個能力。一個是樣式美化，扁平化風格，另外響應式布局。基于Bootstrap設計的頁面，運行在不同的設備上不需要考慮分辨率，會自動處理設備分辨率。再上面實現了 WeX5 的組件框架和數據框架，頁面上不僅有交互的UI組件，頁面里面還有數據。接下來是業務框架層，即SPA單元頁面框架。在服務端 WeX5 還提供了XBaaS服務，負責后端數據存取、邏輯，還有第三方地圖、支付等功能實現。 WeX5 提供多語言實現，提供了不同語言的版本，開發者可以針對自己的版本來集成到自己的框架里。

三、WeX5可視化快速開發實踐

在分享的最后，王潔給大家展示了基于 WeX5這樣的框架所開發出來的一些功能。 首先是可視化的快速開發程度，幫助開發者通過可視化開發定義頁面，框架可以保證運行體驗，必須能快速加載，而且各種首試、硬件能力的是一體化集成的。把組件拖到表單上定義布局，設置屬性，即可得到最終頁面，設計室和運行室相鄰，完全所見即所得。

豐富多樣的組件，足以適應各種復雜表單的組合。通過把常見功能組件封裝，可以極大減輕開發者的開發工作量。最關鍵的是整個組件框架完全開源，除了 WeX5 提供的上百個組件以外開發者還可以自己定義這個可視化組件，甚至可以繼承第三方組件，通過規范的方式封裝成HTML5的可視化組件。

編程問題也是重點， WeX5 的定位是可視化程度更高的前端編程工具。不僅可以可視化設計，編程也是便捷。它能實現代碼的智能提示、代碼模板，還內致了Emmet框架。隨后考慮的是調試問題， WeX5 是一體化的環境，不僅要解決開發、編程，還要解決調試的過程，既可以在Web瀏覽器上調試，也可以連到手機上調試，所有代碼都是開源的，底層內庫也是開放的。最后就是打包的問題，打包要考慮很多插件的配置，參數，資源在命令行的配合。 WeX5 提供了一個打包的向導， 完全本地打包，不需要依賴云打包服務，只需要 把打包過程中要設置的東西完全工具化，可以設置應用版本、證書、LOGO、圖片、插件里的參數，最后就可以應用到App上。

 

來自： http://www.infoq.com/cn/articles/hybrid-app-wex5-html5-app-architecture