深度解析App混合開發技術的成熟度曲線.jpg

快速導讀：在Gartner“技術成熟度曲線”的解析過程中，我們已將混合開發技術*明確定位于穩步攀升的光明期。根據Gartner的研究，這一時期具備顯著的6大特征，本文將詳細闡述混合開發技術現階段的主要特征，并深入簡出地講解現階段的混合開發技術應如何正確理解及使用。

混合開發技術處于光明期的6大特征

? 技術特點清晰，用戶能夠正確使用混合開發技術

今天的開發人員對混合開發技術的特點已經有了充分了解，開發一款app，哪些功能可以使用HTML5，哪些功能必須要用Native模塊擴展，相信大家已經有了清晰的認識。

怎樣應用混合技術對app開發非常重要，這里總結如下幾點：

● HTML&CSS的解析：能用HTML＋CSS來布局的界面一定要用，HTML和CSS經過了這么多年的發展，標準已經非常完備，布局效率也是最高的。雖然HTML和CSS的解析需要一點時間，但是移動app的頁面通常都很小，元素也很少。只要我們嚴格控制每一個頁面中HTML和CSS代碼的大小，完全按照產品設計來精細的編寫HTML和CSS代碼，不要引入重型的框架，不要出現無用的代碼，那么這個解析過程對界面顯示速度的影響其實很小。

● Layout&Render的機制：瀏覽器的渲染機制與原生不同，瀏覽器的渲染需要經過Dom Tree－》Layout Tree－》Draw的過程，并且這個Draw的實現是在瀏覽器內部自己完成的，這決定了其渲染速度要比原生慢。

特別是在移動app中表現得更明顯，因為在移動app中，用戶會進行頻繁的交互操作，例如：下拉刷新、界面滾動、手勢動畫等，這些操作效果引起的界面變化需要瀏覽器對整個界面進行重繪（重新Layout和Draw），瀏覽器本身渲染的效率就不高，頻繁重繪造成的結果就表現為閃屏、界面卡頓，用戶體驗差。

所以，混合開發一定要盡量避免引起瀏覽器的重繪，要通過原生的機制（調用混合開發平臺的擴展API）實現下拉刷新、界面滾動、手勢動畫等會引起瀏覽器重繪的功能。

其實HTML5界面第一次渲染的用戶體驗并不差，因為打開新頁面用戶可以接受有一個短暫的響應時間，而且通常界面切換會伴隨轉場動畫和加載過程。但是頻繁的瀏覽器重繪就會影響體驗。

● 界面切換和轉場效果：app的界面切換會伴隨各種轉場效果，這樣用戶的操作感好，交互體驗也好。HTML5的a標簽跳轉默認沒有動畫，SPA方式下div切換也沒有動畫，用HTML5的JS或CSS3來模擬這些Native窗口的的轉場效果體驗很差。

在混合開發中app需要構造和原生一樣的多窗口UI結構，這樣就可以使用原生的轉場效果，通常每一個混合技術平臺都有自己的一套UI結構，以APICloud為例，APICloud界面布局使用Widget、Layout、Window、Frame和UIModules 5大組件。

一款app如果有50個界面，那么就需要構建50個Window，每一個界面都是一個獨立的Window（Window是一個標準Native的窗口，可以使用Native的界面切換和轉場效果），在每一個Window內部加載HTML5頁面。

● 網絡請求和數據存儲：標準HTML5在跨域異步請求、Socket通信、異步和結構化的本地數據存儲、存儲容量、圖片和數據緩存等方面相比Native在功能和性能上還存在很大差距。

混合開發中我們需要通過原生方式實現這些功能，目前標準的混合開發技術平臺都會為這些功能提供了封裝好的API，方便開發者調用。

● JavaScript的執行和橋接：很多開發者認為由于JavaScript是在瀏覽器主線程中執行，耗時的JavaScript操作會阻塞主線程，從而影響界面的渲染。其實任何耗時的操作，放在主線程中都會阻塞UI，在Native開發中也是一樣，在Native開發中，遇到耗時的操作我們也要新起一個線程，不能將這部分代碼放到的UI線程中執行，否則一樣阻塞UI。

耗時的JavaScript操作，例如：復雜的數據解析、數據加解密、復雜的運算等等，在混合開發中，我們需要將這些耗時的操作放到Native擴展模塊中來完成，在Native代碼中新起一個線程來執行。

同樣，今天的混合開發技術平臺也都會為這些耗時的功能提供標準化的擴展模塊。

另外就是JavaScript與Native的橋接成本，其實無論這種橋接是通過映射還是命令隊列來實現，相比于功能調用本事的執行成本，這部分的成本可以忽略不計。

● 開放服務的集成和封裝：app中會用到很多的開放服務，常用的例如：支付、地圖、客服、統計、推送、IM、IoT通信、各類AI識別等等。通常服務廠商都會提供Native版本的SDK，這些Native的SDK在HTML5無法直接調用，JS版本的SDK要么沒有，要么功能不全。

所以，混合開發中我們需要通過原生的方式分別封裝不同廠商的Android和iOS版本的SDK，才能在自己的app中集成使用這些服務。

其實，今天在APICloud平臺上，已經封裝好了所有主流開放服務的API，開發者可以直接調用。

其實，混合開發技術的本質就是要用Native技術來解決HTML5功能和性能的問題，哪些方面需要混合？如何進行混合？**掌握混合技術的特點并正確使用非常關鍵。

? 應用領域清晰，用戶根據自身需求正確選擇

任何應用都可以使用混合技術開發，關鍵還是要根據自身需求來選擇。

如果一款應用核心功能和大部分的界面都必須要原生實現，那么就沒必須使用混合，例如游戲、美圖等。

如果只有個別界面需要原生實現，其他界面用HTML5沒問題，那就可以采用混合，例如電商類app，商品分類、商品列表、商品詳情、購物車、訂單等界面用HTML5實現沒有問題而且效率更高。

今天幾乎所有主流電商app（淘寶、京東、天貓等）都采用混合開發，混合開發技術已經是電商app面向運營快速迭代的技術支撐。

? 功能覆蓋全面，用戶無需再花精力自己擴展

混合開發技術平臺經過這么多年的發展和完善，功能已經非常全面，基本可以覆蓋app開發需要的所有功能。

以APICloud平臺為例，從2014年9月15日上線，4年來一直堅持每月更新一個版本，通過APICloud模塊Store不斷擴展API，目前已經擁有超過600款模塊，10000個API，功能包括：界面布局、設備訪問、功能擴展、開放服務、直播、物聯網、AI等。

? 性能體驗優化，已經基本達到原生的標準

今天，開發者已經非常清楚HTML5會存在哪些性能問題，在混合開發模式中，如果使用HTML5會產生性能問題，我們就會通過原生擴展的方式來代替，我們可以合理的使用HTML5技術。

所以如今使用混合技術開發的app，擁有和Naive一樣的UI結構和功能擴展，性能方面已經可以達到Native的標準。

我們對比分析了一款使用APICloud技術開發的電商app，分別與淘寶和京東兩款app在5個方面進行對比，測試覆蓋了所有主流機型，測試時間以秒為單位，測試結果性能基本無差別。

? 應用啟動速度：測試從點擊應用圖標開始，到進入首頁的時間*

? 導航切換速度：三款應用都是底部導航，切換底部菜單，測試切換的時間*

? 打開新頁面速度：點擊商品列表，打開商品詳情界面，測試打開新頁面的時間*

? 調用擴展模塊速度：點擊二維碼按鈕，打開掃描界面，測試調用Native模塊的時間*

? 調用開放服務速度：點擊語音按鈕，打開語音識別界面，測試調用開放服務的時間*

? 完成了平臺化、組件化和生態化發展

目前跨平臺技術領域分為兩個發展方向：

第一個是HTML5 + Native混合方向；

第二個是中間語言編譯方向；

其中APICloud和小程序都屬于前者（雖然微信小程序開發使用自己定義的標簽和樣式，但是執行前還是要轉化為標準HTML5）。

HTML5 + Native混合，也就是我們通常所說的混合開發。

這種模式的開發主體是HTML5，但整個app的架構是Native架構：通過HTML5快速實現app的UI布局、產品業務邏輯，在開發過程中涉及HTML5無法實現或者體驗不好的功能，則借助Native模塊來實現。

中間語言編譯方向，代表產品為React Native（RN），Xamarin以及Google剛剛發布的Flutter。

如何理解中間語言編譯？

以RN為例，傳統的app開發，要求開發者使用Android和iOS原生技術-Java、Object-C、C/C++等進行開發，而RN的開發過程則要求開發者使用JS進行編碼輸出app，但在app執行過程中，JS又映射回到安卓和iOS原生層面執行。

借助JS快速實現編碼，翻譯為原生代碼執行，這就是中間語言編譯方向。

Xamarin則要求使用微軟自己的語言C#，對于大部分開發者而言，C#的學習成本比較高且Xamarin需要付費使用，因此它目前在國內應用比較少。

Flutter的開發語言為Dart，它是谷歌發明的編程語言，這個語言很有趣，它的語法類似于C語言，又將JS和Java的一些設計思想以及語法規則融合了進去。Dart語言在此前應用比較少，可參考的資料不多，開發者上手需要一個過程。

其實今天，兩個類型中很多的混合開發技術產品都已經完成了平臺化、組件化和生態化的發展過程，例如：APICloud、小程序、React Native等。

? 大規模成功案例出現，成為企業app開發的主流技術

今天占領我們手機桌面的很多app都是采用混合技術開發的，上圖中這些app的開發人員在不同的場合都分享過使用混合技術開發各自產品的經驗。

這里大家可能會有一個疑問，在這些主流產品中混合技術占的比重是多少？是不是只是個別界面使用了？

其實在這些app中HTML5占的比重還是很高的，比如手機QQ、58同城、支付寶、淘寶、攜程、美團等。

此外，一些大型企業也都紛紛采用混合技術開發app。

包括海爾、春秋航空、Intel、中信證券、上汽通用等很多款app都是基于APICloud技術進行開發的，今天使用APICloud技術開發的app在各大應用市場上線的應用已經超過5萬款，在蘋果App Store上線的app超高3萬款。

更多使用混合開發技術的案例可以到APICloud官網(https://www.apicloud.com/cases)查看。

以上，從6個方面對目前的混合開發技術進行了全面的分析，按照Gartner技術成熟度曲線的每個階段的定義，我們可以清晰的看到，今天的混合開發技術正處于“穩步攀升的光明期”，并即將邁入“實質生產的高峰期”。

這一現狀也將為行業未來的技術研發、產品投入和技術選型提供了重要的決策參考。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/11857.html