該模型認(rèn)為一項(xiàng)技術(shù)的發(fā)展可以分為5個階段，并且對每個階段的邊界和特征進(jìn)行了明確的定義。

? 第一個階段－技術(shù)創(chuàng)新的啟動期：技術(shù)概念被提出、相關(guān)產(chǎn)品出現(xiàn)、媒體有報(bào)道、有早期用戶嘗試、行業(yè)應(yīng)用可行性還沒有證明

? 第二個階段－過高期望的高峰期：技術(shù)體系成型、更多相關(guān)產(chǎn)品發(fā)布、媒體大肆報(bào)道、個別成功案例出現(xiàn)、過多、過高的不切實(shí)際的行業(yè)期望

? 第三個階段－泡沫出現(xiàn)的低谷期：技術(shù)局限和缺點(diǎn)暴露、部分產(chǎn)品運(yùn)營艱難甚至死掉、媒體興趣下降、一些用戶驗(yàn)證失敗、行業(yè)前景不明

? 第四個階段－穩(wěn)步攀升的光明期：技術(shù)特征清晰并且被用戶理解、平臺化、組件化和生態(tài)化的產(chǎn)品出現(xiàn)、媒體重新認(rèn)識、大規(guī)模和重量級的成功案例出現(xiàn)、行業(yè)應(yīng)用前景明確

? 第五個階段－實(shí)質(zhì)生產(chǎn)的高峰期：技術(shù)體系完備并且標(biāo)準(zhǔn)化，產(chǎn)品相關(guān)的生態(tài)和產(chǎn)業(yè)鏈蓬勃發(fā)展、媒體一致好評、成為主流技術(shù)并廣泛應(yīng)用、行業(yè)應(yīng)用穩(wěn)定

混合開發(fā)技術(shù)的成熟度曲線

根據(jù)“技術(shù)成熟度曲線模型”的定義，我們可以繪制一條描述混合開發(fā)技術(shù)的成熟度曲線，由此可見證今天的混合開發(fā)技術(shù)正處于第四個階段的后期，并即將從“穩(wěn)步攀升的光明期”邁入“實(shí)質(zhì)生產(chǎn)的高峰期”。

我們來簡單回顧一下混合開發(fā)技術(shù)的發(fā)展歷程：

第一個階段：2009～2012年左右，混合開發(fā)技術(shù)的概念被正式提出，此時已經(jīng)有PhoneGap類似的產(chǎn)品在市場上發(fā)布，并且有一定量的媒體報(bào)道。

第二個階段：2012～2015年左右，混合技術(shù)蓬勃發(fā)展并且被媒體大肆報(bào)道，2014年下半年HTML5標(biāo)準(zhǔn)定稿，同時市場上有更多混合開發(fā)技術(shù)的產(chǎn)品發(fā)布，比如在2014年面世的APICloud，在2015年Facebook推出的ReactNative，此時行業(yè)對混合開發(fā)技術(shù)抱有很高的期望的。

第三個階段：2015～2016年左右，混合開發(fā)技術(shù)進(jìn)入了一個低谷期，至少在行業(yè)用戶的眼中是一個低谷，這有多方面的原因：

? 過高的期望造成在一些不適合的領(lǐng)域內(nèi)應(yīng)用

? 由于不理解技術(shù)特點(diǎn)和原理，所以采用了不合理的開發(fā)方式

? 技術(shù)產(chǎn)品本身不夠成熟，在性能和兼容性方面還存在問題

? 學(xué)習(xí)資源太少和缺乏優(yōu)質(zhì)的社區(qū)，開發(fā)者本身需要一個踩坑和成熟的過程

? 擴(kuò)展模塊太少導(dǎo)致功能受限，這是最主要的原因之一；開發(fā)者用混合技術(shù)開發(fā)一款app，最后發(fā)現(xiàn)大量的功能還需要自己通過Native來擴(kuò)展，最典型的就是各類開放服務(wù)SDK的封裝，常見的例如：支付、地圖、推送、統(tǒng)計(jì)、客服、IM、IoT、AI等等，每一類服務(wù)又分不同的廠商，如果混合開發(fā)技術(shù)平臺本身不提供相應(yīng)的模塊或插件，開發(fā)者就得自己封裝，這里面的工作量和要踩的坑非常之多。

其實(shí)任何一門技術(shù)的成熟，一定需要經(jīng)歷平臺化、組件化和生態(tài)化的發(fā)展過程，這個過程需要大量的開發(fā)者參與，并且需要大量的應(yīng)用來驗(yàn)證，使用者一定會遇到問題和挑戰(zhàn)，如果期望過高或者使用方式不正確，負(fù)面的評價(jià)和失望的結(jié)論就難免會出現(xiàn)。

第四個階段：在2016～2018年，混合開發(fā)技術(shù)逐漸成為一項(xiàng)被人熟知的常規(guī)技術(shù)，用戶能夠根據(jù)自身產(chǎn)品的研發(fā)需求自然的選擇和合理的使用。雖然媒體關(guān)注度有所下降，但是卻在實(shí)際應(yīng)用中取得了實(shí)實(shí)在在的發(fā)展和完善，表現(xiàn)為：技術(shù)特點(diǎn)逐漸被掌握、應(yīng)用領(lǐng)域明確、功能覆蓋越來越全面、性能體驗(yàn)顯著提升、一些優(yōu)質(zhì)的混合開發(fā)技術(shù)產(chǎn)品完成了平臺化、組件化和生態(tài)化的發(fā)展過程、大規(guī)模的成功應(yīng)用案例，混合開發(fā)模式已經(jīng)成為一線互聯(lián)網(wǎng)公司App開發(fā)的主流開發(fā)模式，而基于混合開發(fā)技術(shù)的APICloud，在這一時期也大行其道，迄今已有近70萬用戶廣泛學(xué)習(xí)和傳播APICloud平臺技術(shù)。

第五個階段：未來，考慮到開發(fā)效率和成本，同時又要兼顧功能和體驗(yàn)，純原生的開發(fā)模式會越來越少，基于HTML5的混合開發(fā)技術(shù)將成為全行業(yè)移動應(yīng)用開發(fā)的主流技術(shù)?；旌祥_發(fā)的思想會被所有的用戶接受，混合開發(fā)技術(shù)的門檻會越來越低，并且逐漸形成一些標(biāo)準(zhǔn)化的產(chǎn)品。

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

下面就詳細(xì)闡述一下目前混合開發(fā)技術(shù)處于光明期的6大特征

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

今天的開發(fā)人員對混合開發(fā)技術(shù)的特點(diǎn)已經(jīng)有了充分了解，開發(fā)一款A(yù)pp，哪些功能可以使用HTML5，哪些功能必須要用Native模塊擴(kuò)展，詳細(xì)大家已經(jīng)有了清晰的認(rèn)識。怎樣應(yīng)用混合技術(shù)對app開發(fā)非常重要，這里總結(jié)如下幾點(diǎn)：

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

? Layout&Render的機(jī)制：瀏覽器的渲染機(jī)制與原生不同，瀏覽器的渲染需要經(jīng)過Dom Tree－》Layout Tree－》Draw的過程，并且這個Draw的實(shí)現(xiàn)是在瀏覽器內(nèi)部自己完成的，這決定了其渲染速度要比原生慢。特別是在移動app中表現(xiàn)得更明顯，因?yàn)樵谝苿觓pp中，用戶會進(jìn)行頻繁的交互操作，例如：下拉刷新、界面滾動、手勢動畫等，這些操作效果引起的界面變化需要瀏覽器對整個界面進(jìn)行重繪（重新Layout和Draw），瀏覽器本身渲染的效率就不高，頻繁重繪造成的結(jié)果就表現(xiàn)為閃屏、界面卡頓，用戶體驗(yàn)差。所以，在混合開發(fā)一定要盡量避免引起瀏覽器的重繪，要通過原生的機(jī)制（調(diào)用混合開發(fā)平臺的擴(kuò)展API）實(shí)現(xiàn)下拉刷新、界面滾動、手勢動畫等會引起瀏覽器重繪的功能。其實(shí)HTML5界面的第一次渲染的用戶體驗(yàn)并不差，因?yàn)榇蜷_新頁面用戶可以接受有一個短暫的響應(yīng)時間，而且通常界面切換會伴隨轉(zhuǎn)場動畫和加載過程。但是頻繁的瀏覽器重繪就會影響體驗(yàn)。

? 界面切換和轉(zhuǎn)場效果：App的界面切換會伴隨各種轉(zhuǎn)場效果，這樣用戶的操作感好，交互體驗(yàn)也好。HTML5的a標(biāo)簽跳轉(zhuǎn)默認(rèn)沒有動畫，SPA方式下div切換也沒有動畫，用HTML5的JS或CSS3來模擬這些Native窗口的的轉(zhuǎn)場效果體驗(yàn)很差。在混合開發(fā)中app需要構(gòu)造和原生一樣的多窗口UI結(jié)構(gòu)，這樣就可以使用原生的轉(zhuǎn)場效果，通常每一個混合技術(shù)平臺都有自己的一套UI結(jié)構(gòu)，諸如Widget、Layout、Window、Frame和UIModules組件。一款A(yù)pp如果有50個界面，那么就需要構(gòu)建50個Window，每一個界面都是一個獨(dú)立的Window（Window是一個標(biāo)準(zhǔn)Native的窗口，可以使用Native的界面切換和轉(zhuǎn)場效果），在每一個Window內(nèi)部加載HTML5頁面。

? 網(wǎng)絡(luò)請求和數(shù)據(jù)存儲：標(biāo)準(zhǔn)HTML5在跨域異步請求、Socket通信、異步和結(jié)構(gòu)化的本地?cái)?shù)據(jù)存儲、存儲容量、圖片和數(shù)據(jù)緩存等方面相比Native在功能和性能上還存在很大差距?；旌祥_發(fā)中我們需要通過原生方式實(shí)現(xiàn)這些功能，目前標(biāo)準(zhǔn)的混合開發(fā)技術(shù)平臺都會為這些功能提供了封裝好的API，方便開發(fā)者調(diào)用。

? JavaScript的執(zhí)行和橋接：很多開發(fā)者認(rèn)為由于JavaScript是在瀏覽器主線程中執(zhí)行，耗時的JavaScript操作會阻塞主線程，從而影響界面的渲染。其實(shí)任何耗時的操作，放在主線程中都會阻塞UI，在Native開發(fā)中也是一樣，在Native開發(fā)中，遇到耗時的操作我們也要新起一個線程，不能將這部分代碼放到的UI線程中執(zhí)行，否則一樣阻塞UI。耗時的JavaScript操作，例如：復(fù)雜的數(shù)據(jù)解析、數(shù)據(jù)加解密、復(fù)雜的運(yùn)算等等，在混合開發(fā)的中，我們需要將這些耗時的操作放到Native擴(kuò)展模塊中來完成，在Native代碼中新起一個線程來執(zhí)行。同樣，今天的混合開發(fā)技術(shù)平臺也都會為這些耗時的功能提供標(biāo)準(zhǔn)化的擴(kuò)展模塊。另外就是JavaScript與Native的橋接成本，其實(shí)無論這種橋接是通過映射還是命令隊(duì)列來實(shí)現(xiàn)，相比于功能調(diào)用本事的執(zhí)行成本，這部分的成本可以忽略不計(jì)。

? 開放服務(wù)的集成和封裝：App中會用到很多的開放服務(wù)，常用的例如：支付、地圖、客服、統(tǒng)計(jì)、推送、IM、IoT通信、各類AI識別等等。通常服務(wù)廠商都會提供Native版本的SDK，這些Native的SDK在HTML5無法直接調(diào)用，JS版本的SDK要么沒有，要么功能不全。所以，混合開發(fā)中我們需要通過原生的方式分別封裝不同廠商的Android和iOS版本的SDK，才能在自己的app中集成使用這些服務(wù)。而在有些混合開發(fā)平臺，已經(jīng)已經(jīng)封裝好了大部分主流開放服務(wù)的API，開發(fā)者可以直接調(diào)用，下圖是APICloud的模塊Store中聚合的相關(guān)模塊。

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

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

任何應(yīng)用都可以使用混合技術(shù)開發(fā)，關(guān)鍵還是要根據(jù)自身需求來選擇。如果一款應(yīng)用核心功能和大部分的界面都必須要原生實(shí)現(xiàn)，那么就沒必須使用混合，例如游戲、美圖等。如果只有個別界面需要原生實(shí)現(xiàn)，其他界面用HTML5沒問題，那就可以采用混合，例如電商類app，商品分類、商品列表、商品詳情、購物車、訂單等界面用HTML5實(shí)現(xiàn)沒有問題而且效率更高，今天幾乎所有主流電商app（淘寶、京東、天貓等）都采用混合開發(fā)，混合開發(fā)技術(shù)已經(jīng)是電商app面向運(yùn)營快速迭代的技術(shù)支撐。

（3） 功能覆蓋全面，用戶無需再花精力自己擴(kuò)展

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

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

今天，開發(fā)者已經(jīng)非常清楚HTML5會存在哪些性能問題，在混合開發(fā)模式中，如果使用HTML5會產(chǎn)生性能問題，我們就會通過原生擴(kuò)展的方式來代替，我們可以合理的使用HTML5技術(shù)。所以如今使用混合技術(shù)開發(fā)的app，擁有和Naive一樣的UI結(jié)構(gòu)和功能擴(kuò)展，性能方面已經(jīng)可以達(dá)到Native的標(biāo)準(zhǔn)。

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

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

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

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

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

? 調(diào)用開放服務(wù)速度：點(diǎn)擊語音按鈕，打開語音識別界面，測試調(diào)用開放服務(wù)的時間

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

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

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

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

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

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

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

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

如何理解中間語言編譯？

以RN為例，傳統(tǒng)的app開發(fā)，要求開發(fā)者使用Android和iOS原生技術(shù)-Java、Object-C、C/C++等進(jìn)行開發(fā)，而RN的開發(fā)過程則要求開發(fā)者使用JS進(jìn)行編碼輸出app，但在app執(zhí)行過程中，JS又映射回到安卓和iOS原生層面執(zhí)行。借助JS快速實(shí)現(xiàn)編碼，翻譯為原生代碼執(zhí)行，這就是中間語言編譯方向。

Xamarin則要求使用微軟自己的語言C#，對于大部分開發(fā)者而言，C#的學(xué)習(xí)成本比較高且Xamarin需要付費(fèi)使用，因此它目前在國內(nèi)應(yīng)用比較少。Flutter的開發(fā)語言為Dart，它是谷歌發(fā)明的編程語言，這個語言很有趣，它的語法類似于C語言，又將JS和Java的一些設(shè)計(jì)思想以及語法規(guī)則融合了進(jìn)去。Dart語言在此前應(yīng)用比較少，可參考的資料不多，開發(fā)者上手需要一個過程。

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

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

今天占領(lǐng)我們手機(jī)桌面的很多app都是采用混合技術(shù)開發(fā)的，上圖中這些app的開發(fā)人員在不同的場合都分享過使用混合技術(shù)開發(fā)各自產(chǎn)品的經(jīng)驗(yàn)。這里大家可能會有一個疑問，在這些主流產(chǎn)品中混合技術(shù)占的比重是多少？是不是只是個別界面使用了，其實(shí)在這些app中HTML5占的比重還是很高的，包括我們平時非常熟悉的手機(jī)QQ、58同城、支付寶、淘寶、美團(tuán)等生活類app都采用混合開發(fā)技術(shù)。

現(xiàn)在，一些大型企業(yè)也都紛紛采用混合技術(shù)開發(fā)app，包括海爾、春秋航空、Intel、中信證券、上汽通用等很多款app都是基于APICloud技術(shù)進(jìn)行開發(fā)的，今天使用APICloud平臺開發(fā)的app在各大應(yīng)用市場上線的應(yīng)用已經(jīng)超過五萬款。

以上，從6個方面對目前的混合開發(fā)技術(shù)進(jìn)行了全面的分析，按照Gartner技術(shù)成熟度曲線的每個階段的定義，我們可以清晰的看到，今天的混合開發(fā)技術(shù)正處于“穩(wěn)步攀升的光明期”的后期，并即將邁入“實(shí)質(zhì)生產(chǎn)的高峰期”。這一現(xiàn)狀也將為行業(yè)未來的技術(shù)研發(fā)、產(chǎn)品投入和技術(shù)選型提供了重要的決策參考。

xiesc