深度解析App混合開(kāi)發(fā)技術(shù)的成熟度曲線.jpg

快速導(dǎo)讀：在Gartner“技術(shù)成熟度曲線”的解析過(guò)程中，我們已將混合開(kāi)發(fā)技術(shù)*明確定位于穩(wěn)步攀升的光明期。根據(jù)Gartner的研究，這一時(shí)期具備顯著的6大特征，本文將詳細(xì)闡述混合開(kāi)發(fā)技術(shù)現(xiàn)階段的主要特征，并深入簡(jiǎn)出地講解現(xiàn)階段的混合開(kāi)發(fā)技術(shù)應(yīng)如何正確理解及使用。

混合開(kāi)發(fā)技術(shù)處于光明期的6大特征

? 技術(shù)特點(diǎn)清晰，用戶能夠正確使用混合開(kāi)發(fā)技術(shù)

今天的開(kāi)發(fā)人員對(duì)混合開(kāi)發(fā)技術(shù)的特點(diǎn)已經(jīng)有了充分了解，開(kāi)發(fā)一款app，哪些功能可以使用HTML5，哪些功能必須要用Native模塊擴(kuò)展，相信大家已經(jīng)有了清晰的認(rèn)識(shí)。

怎樣應(yīng)用混合技術(shù)對(duì)app開(kāi)發(fā)非常重要，這里總結(jié)如下幾點(diǎn)：

● HTML&CSS的解析：能用HTML＋CSS來(lái)布局的界面一定要用，HTML和CSS經(jīng)過(guò)了這么多年的發(fā)展，標(biāo)準(zhǔn)已經(jīng)非常完備，布局效率也是最高的。雖然HTML和CSS的解析需要一點(diǎn)時(shí)間，但是移動(dòng)app的頁(yè)面通常都很小，元素也很少。只要我們嚴(yán)格控制每一個(gè)頁(yè)面中HTML和CSS代碼的大小，完全按照產(chǎn)品設(shè)計(jì)來(lái)精細(xì)的編寫(xiě)HTML和CSS代碼，不要引入重型的框架，不要出現(xiàn)無(wú)用的代碼，那么這個(gè)解析過(guò)程對(duì)界面顯示速度的影響其實(shí)很小。

● Layout&Render的機(jī)制：瀏覽器的渲染機(jī)制與原生不同，瀏覽器的渲染需要經(jīng)過(guò)Dom Tree－》Layout Tree－》Draw的過(guò)程，并且這個(gè)Draw的實(shí)現(xiàn)是在瀏覽器內(nèi)部自己完成的，這決定了其渲染速度要比原生慢。

特別是在移動(dòng)app中表現(xiàn)得更明顯，因?yàn)樵谝苿?dòng)app中，用戶會(huì)進(jìn)行頻繁的交互操作，例如：下拉刷新、界面滾動(dòng)、手勢(shì)動(dòng)畫(huà)等，這些操作效果引起的界面變化需要瀏覽器對(duì)整個(gè)界面進(jìn)行重繪（重新Layout和Draw），瀏覽器本身渲染的效率就不高，頻繁重繪造成的結(jié)果就表現(xiàn)為閃屏、界面卡頓，用戶體驗(yàn)差。

所以，混合開(kāi)發(fā)一定要盡量避免引起瀏覽器的重繪，要通過(guò)原生的機(jī)制（調(diào)用混合開(kāi)發(fā)平臺(tái)的擴(kuò)展API）實(shí)現(xiàn)下拉刷新、界面滾動(dòng)、手勢(shì)動(dòng)畫(huà)等會(huì)引起瀏覽器重繪的功能。

其實(shí)HTML5界面第一次渲染的用戶體驗(yàn)并不差，因?yàn)榇蜷_(kāi)新頁(yè)面用戶可以接受有一個(gè)短暫的響應(yīng)時(shí)間，而且通常界面切換會(huì)伴隨轉(zhuǎn)場(chǎng)動(dòng)畫(huà)和加載過(guò)程。但是頻繁的瀏覽器重繪就會(huì)影響體驗(yàn)。

● 界面切換和轉(zhuǎn)場(chǎng)效果：app的界面切換會(huì)伴隨各種轉(zhuǎn)場(chǎng)效果，這樣用戶的操作感好，交互體驗(yàn)也好。HTML5的a標(biāo)簽跳轉(zhuǎn)默認(rèn)沒(méi)有動(dòng)畫(huà)，SPA方式下div切換也沒(méi)有動(dòng)畫(huà)，用HTML5的JS或CSS3來(lái)模擬這些Native窗口的的轉(zhuǎn)場(chǎng)效果體驗(yàn)很差。

在混合開(kāi)發(fā)中app需要構(gòu)造和原生一樣的多窗口UI結(jié)構(gòu)，這樣就可以使用原生的轉(zhuǎn)場(chǎng)效果，通常每一個(gè)混合技術(shù)平臺(tái)都有自己的一套UI結(jié)構(gòu)，以APICloud為例，APICloud界面布局使用Widget、Layout、Window、Frame和UIModules 5大組件。

一款app如果有50個(gè)界面，那么就需要構(gòu)建50個(gè)Window，每一個(gè)界面都是一個(gè)獨(dú)立的Window（Window是一個(gè)標(biāo)準(zhǔn)Native的窗口，可以使用Native的界面切換和轉(zhuǎn)場(chǎng)效果），在每一個(gè)Window內(nèi)部加載HTML5頁(yè)面。

● 網(wǎng)絡(luò)請(qǐng)求和數(shù)據(jù)存儲(chǔ)：標(biāo)準(zhǔn)HTML5在跨域異步請(qǐng)求、Socket通信、異步和結(jié)構(gòu)化的本地?cái)?shù)據(jù)存儲(chǔ)、存儲(chǔ)容量、圖片和數(shù)據(jù)緩存等方面相比Native在功能和性能上還存在很大差距。

混合開(kāi)發(fā)中我們需要通過(guò)原生方式實(shí)現(xiàn)這些功能，目前標(biāo)準(zhǔn)的混合開(kāi)發(fā)技術(shù)平臺(tái)都會(huì)為這些功能提供了封裝好的API，方便開(kāi)發(fā)者調(diào)用。

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

耗時(shí)的JavaScript操作，例如：復(fù)雜的數(shù)據(jù)解析、數(shù)據(jù)加解密、復(fù)雜的運(yùn)算等等，在混合開(kāi)發(fā)中，我們需要將這些耗時(shí)的操作放到Native擴(kuò)展模塊中來(lái)完成，在Native代碼中新起一個(gè)線程來(lái)執(zhí)行。

同樣，今天的混合開(kāi)發(fā)技術(shù)平臺(tái)也都會(huì)為這些耗時(shí)的功能提供標(biāo)準(zhǔn)化的擴(kuò)展模塊。

另外就是JavaScript與Native的橋接成本，其實(shí)無(wú)論這種橋接是通過(guò)映射還是命令隊(duì)列來(lái)實(shí)現(xiàn)，相比于功能調(diào)用本事的執(zhí)行成本，這部分的成本可以忽略不計(jì)。

● 開(kāi)放服務(wù)的集成和封裝：app中會(huì)用到很多的開(kāi)放服務(wù)，常用的例如：支付、地圖、客服、統(tǒng)計(jì)、推送、IM、IoT通信、各類(lèi)AI識(shí)別等等。通常服務(wù)廠商都會(huì)提供Native版本的SDK，這些Native的SDK在HTML5無(wú)法直接調(diào)用，JS版本的SDK要么沒(méi)有，要么功能不全。

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

其實(shí)，今天在APICloud平臺(tái)上，已經(jīng)封裝好了所有主流開(kāi)放服務(wù)的API，開(kāi)發(fā)者可以直接調(diào)用。

其實(shí)，混合開(kāi)發(fā)技術(shù)的本質(zhì)就是要用Native技術(shù)來(lái)解決HTML5功能和性能的問(wèn)題，哪些方面需要混合？如何進(jìn)行混合？**掌握混合技術(shù)的特點(diǎn)并正確使用非常關(guān)鍵。

? 應(yīng)用領(lǐng)域清晰，用戶根據(jù)自身需求正確選擇

任何應(yīng)用都可以使用混合技術(shù)開(kāi)發(fā)，關(guān)鍵還是要根據(jù)自身需求來(lái)選擇。

如果一款應(yīng)用核心功能和大部分的界面都必須要原生實(shí)現(xiàn)，那么就沒(méi)必須使用混合，例如游戲、美圖等。

如果只有個(gè)別界面需要原生實(shí)現(xiàn)，其他界面用HTML5沒(méi)問(wèn)題，那就可以采用混合，例如電商類(lèi)app，商品分類(lèi)、商品列表、商品詳情、購(gòu)物車(chē)、訂單等界面用HTML5實(shí)現(xiàn)沒(méi)有問(wèn)題而且效率更高。

今天幾乎所有主流電商app（淘寶、京東、天貓等）都采用混合開(kāi)發(fā)，混合開(kāi)發(fā)技術(shù)已經(jīng)是電商app面向運(yùn)營(yíng)快速迭代的技術(shù)支撐。

? 功能覆蓋全面，用戶無(wú)需再花精力自己擴(kuò)展

混合開(kāi)發(fā)技術(shù)平臺(tái)經(jīng)過(guò)這么多年的發(fā)展和完善，功能已經(jīng)非常全面，基本可以覆蓋app開(kāi)發(fā)需要的所有功能。

以APICloud平臺(tái)為例，從2014年9月15日上線，4年來(lái)一直堅(jiān)持每月更新一個(gè)版本，通過(guò)APICloud模塊Store不斷擴(kuò)展API，目前已經(jīng)擁有超過(guò)600款模塊，10000個(gè)API，功能包括：界面布局、設(shè)備訪問(wèn)、功能擴(kuò)展、開(kāi)放服務(wù)、直播、物聯(lián)網(wǎng)、AI等。

? 性能體驗(yàn)優(yōu)化，已經(jīng)基本達(dá)到原生的標(biāo)準(zhǔn)

今天，開(kāi)發(fā)者已經(jīng)非常清楚HTML5會(huì)存在哪些性能問(wèn)題，在混合開(kāi)發(fā)模式中，如果使用HTML5會(huì)產(chǎn)生性能問(wèn)題，我們就會(huì)通過(guò)原生擴(kuò)展的方式來(lái)代替，我們可以合理的使用HTML5技術(shù)。

所以如今使用混合技術(shù)開(kāi)發(fā)的app，擁有和Naive一樣的UI結(jié)構(gòu)和功能擴(kuò)展，性能方面已經(jīng)可以達(dá)到Native的標(biāo)準(zhǔn)。

我們對(duì)比分析了一款使用APICloud技術(shù)開(kāi)發(fā)的電商app，分別與淘寶和京東兩款app在5個(gè)方面進(jìn)行對(duì)比，測(cè)試覆蓋了所有主流機(jī)型，測(cè)試時(shí)間以秒為單位，測(cè)試結(jié)果性能基本無(wú)差別。

? 應(yīng)用啟動(dòng)速度：測(cè)試從點(diǎn)擊應(yīng)用圖標(biāo)開(kāi)始，到進(jìn)入首頁(yè)的時(shí)間*

? 導(dǎo)航切換速度：三款應(yīng)用都是底部導(dǎo)航，切換底部菜單，測(cè)試切換的時(shí)間*

? 打開(kāi)新頁(yè)面速度：點(diǎn)擊商品列表，打開(kāi)商品詳情界面，測(cè)試打開(kāi)新頁(yè)面的時(shí)間*

? 調(diào)用擴(kuò)展模塊速度：點(diǎn)擊二維碼按鈕，打開(kāi)掃描界面，測(cè)試調(diào)用Native模塊的時(shí)間*

? 調(diào)用開(kāi)放服務(wù)速度：點(diǎn)擊語(yǔ)音按鈕，打開(kāi)語(yǔ)音識(shí)別界面，測(cè)試調(diào)用開(kāi)放服務(wù)的時(shí)間*

? 完成了平臺(tái)化、組件化和生態(tài)化發(fā)展

目前跨平臺(tái)技術(shù)領(lǐng)域分為兩個(gè)發(fā)展方向：

第一個(gè)是HTML5 + Native混合方向；

第二個(gè)是中間語(yǔ)言編譯方向；

其中APICloud和小程序都屬于前者（雖然微信小程序開(kāi)發(fā)使用自己定義的標(biāo)簽和樣式，但是執(zhí)行前還是要轉(zhuǎn)化為標(biāo)準(zhǔn)HTML5）。

HTML5 + Native混合，也就是我們通常所說(shuō)的混合開(kāi)發(fā)。

這種模式的開(kāi)發(fā)主體是HTML5，但整個(gè)app的架構(gòu)是Native架構(gòu)：通過(guò)HTML5快速實(shí)現(xiàn)app的UI布局、產(chǎn)品業(yè)務(wù)邏輯，在開(kāi)發(fā)過(guò)程中涉及HTML5無(wú)法實(shí)現(xiàn)或者體驗(yàn)不好的功能，則借助Native模塊來(lái)實(shí)現(xiàn)。

中間語(yǔ)言編譯方向，代表產(chǎn)品為React Native（RN），Xamarin以及Google剛剛發(fā)布的Flutter。

如何理解中間語(yǔ)言編譯？

以RN為例，傳統(tǒng)的app開(kāi)發(fā)，要求開(kāi)發(fā)者使用Android和iOS原生技術(shù)-Java、Object-C、C/C++等進(jìn)行開(kāi)發(fā)，而RN的開(kāi)發(fā)過(guò)程則要求開(kāi)發(fā)者使用JS進(jìn)行編碼輸出app，但在app執(zhí)行過(guò)程中，JS又映射回到安卓和iOS原生層面執(zhí)行。

借助JS快速實(shí)現(xiàn)編碼，翻譯為原生代碼執(zhí)行，這就是中間語(yǔ)言編譯方向。

Xamarin則要求使用微軟自己的語(yǔ)言C#，對(duì)于大部分開(kāi)發(fā)者而言，C#的學(xué)習(xí)成本比較高且Xamarin需要付費(fèi)使用，因此它目前在國(guó)內(nèi)應(yīng)用比較少。

Flutter的開(kāi)發(fā)語(yǔ)言為Dart，它是谷歌發(fā)明的編程語(yǔ)言，這個(gè)語(yǔ)言很有趣，它的語(yǔ)法類(lèi)似于C語(yǔ)言，又將JS和Java的一些設(shè)計(jì)思想以及語(yǔ)法規(guī)則融合了進(jìn)去。Dart語(yǔ)言在此前應(yīng)用比較少，可參考的資料不多，開(kāi)發(fā)者上手需要一個(gè)過(guò)程。

其實(shí)今天，兩個(gè)類(lèi)型中很多的混合開(kāi)發(fā)技術(shù)產(chǎn)品都已經(jīng)完成了平臺(tái)化、組件化和生態(tài)化的發(fā)展過(guò)程，例如：APICloud、小程序、React Native等。

? 大規(guī)模成功案例出現(xiàn)，成為企業(yè)app開(kāi)發(fā)的主流技術(shù)

今天占領(lǐng)我們手機(jī)桌面的很多app都是采用混合技術(shù)開(kāi)發(fā)的，上圖中這些app的開(kāi)發(fā)人員在不同的場(chǎng)合都分享過(guò)使用混合技術(shù)開(kāi)發(fā)各自產(chǎn)品的經(jīng)驗(yàn)。

這里大家可能會(huì)有一個(gè)疑問(wèn)，在這些主流產(chǎn)品中混合技術(shù)占的比重是多少？是不是只是個(gè)別界面使用了？

其實(shí)在這些app中HTML5占的比重還是很高的，比如手機(jī)QQ、58同城、支付寶、淘寶、攜程、美團(tuán)等。

此外，一些大型企業(yè)也都紛紛采用混合技術(shù)開(kāi)發(fā)app。

包括海爾、春秋航空、Intel、中信證券、上汽通用等很多款app都是基于APICloud技術(shù)進(jìn)行開(kāi)發(fā)的，今天使用APICloud技術(shù)開(kāi)發(fā)的app在各大應(yīng)用市場(chǎng)上線的應(yīng)用已經(jīng)超過(guò)5萬(wàn)款，在蘋(píng)果App Store上線的app超高3萬(wàn)款。

更多使用混合開(kāi)發(fā)技術(shù)的案例可以到APICloud官網(wǎng)(https://www.apicloud.com/cases)查看。

以上，從6個(gè)方面對(duì)目前的混合開(kāi)發(fā)技術(shù)進(jìn)行了全面的分析，按照Gartner技術(shù)成熟度曲線的每個(gè)階段的定義，我們可以清晰的看到，今天的混合開(kāi)發(fā)技術(shù)正處于“穩(wěn)步攀升的光明期”，并即將邁入“實(shí)質(zhì)生產(chǎn)的高峰期”。

這一現(xiàn)狀也將為行業(yè)未來(lái)的技術(shù)研發(fā)、產(chǎn)品投入和技術(shù)選型提供了重要的決策參考。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/11857.html