|
而作為國(guó)內(nèi)老字號(hào)的移動(dòng)應(yīng)用開發(fā)平臺(tái)，同樣支持開發(fā)原生APP 以及輕應(yīng)用的ExMobi經(jīng)過(guò)7年不斷演進(jìn)之后，在技術(shù)架構(gòu)上又有怎樣的突破呢？ 這里，筆者就通過(guò)親身體驗(yàn)來(lái)剖析React Native與ExMobi在技術(shù)架構(gòu)、開發(fā)者受眾、成熟度等多維度的異同，從中探索更多移動(dòng)應(yīng)用開發(fā)技術(shù)上的可能與創(chuàng)新，以饗讀者。 產(chǎn)品背景 對(duì)產(chǎn)品背景的了解，有助于我們對(duì)產(chǎn)品的原理、發(fā)展等多方面有基礎(chǔ)的認(rèn)識(shí)。 React Native官網(wǎng)上的博客不僅很有技術(shù)含量，而且還很有情懷，所以我們就從這里入手。下面就是其中一段摘抄： 可以看出由于WEB在移動(dòng)端差強(qiáng)人意的表現(xiàn)，使得Facebook要尋求兩其其美的辦法： 所以React Native誕生了： 而ExMobi則不同，ExMobi完全是為移動(dòng)設(shè)備誕生，從早期的非智能機(jī)時(shí)代、早期智能機(jī)時(shí)代的Java、Symbian、Windows Mobile、Brew、Black Berry平臺(tái)到現(xiàn)在的后智能機(jī)時(shí)代Android、iOS系統(tǒng)盛行，ExMobi的架構(gòu)也發(fā)生了翻天覆地的變化。這里特指的是ExMobi第五代產(chǎn)品。 經(jīng)過(guò)前四代產(chǎn)品的技術(shù)積累，并與現(xiàn)在Android和iOS兩大主流系統(tǒng)的特性結(jié)合，ExMobi產(chǎn)品也是做了很大調(diào)整，但始終不變的是堅(jiān)持Native原生APP為主線，通過(guò)技術(shù)難關(guān)的攻克不斷提高開發(fā)者的開發(fā)效率，又不影響APP的性能和體驗(yàn)，同時(shí)也支持HTML5的webapp模式開發(fā)，提倡Native Component+Web Plus的主流開發(fā)模式，讓開發(fā)者可以充分利用原生組件和HTML5混合布局，完全標(biāo)簽化寫法，并通過(guò)JS將本地能力無(wú)縫對(duì)接，開發(fā)方式靈活。 ExMobi也致力于提供優(yōu)良的開發(fā)工具M(jìn)Builder，幫助開發(fā)者能夠快速開發(fā)ExMobi應(yīng)用。 從React Native和ExMobi的產(chǎn)品背景中，我們可以看到兩者的共同點(diǎn)都是為了提高移動(dòng)應(yīng)用開發(fā)效率，降低開發(fā)成本，并都盡可能的結(jié)合Native和HTML5的優(yōu)點(diǎn)，提出了各自的創(chuàng)新開發(fā)模式。 原生組件通信原理 React Native通過(guò)JavaScript編寫APP的方式，乍看以為是以webview提供的現(xiàn)成的JS與原生語(yǔ)言之間的互調(diào)，但是如果當(dāng)我們調(diào)試一個(gè)React Native程序的時(shí)候，在debug視圖中是不會(huì)看到任何webview被調(diào)用的痕跡。所以，實(shí)際上React Native并沒(méi)有使用現(xiàn)成的與webview的通信方法，而是使用了更直接的JS運(yùn)行環(huán)境，比如在iOS中為系統(tǒng)自帶的JavaScriptCore。這與Phonegap這類以webview為主的界面展現(xiàn)與本地能力調(diào)用的模式有本質(zhì)上的區(qū)別，也是確保React Native高性能和高效率的基礎(chǔ)。 有了這個(gè)核心基礎(chǔ)，我們?cè)賮?lái)看看React Native是如何通過(guò)JS來(lái)掛鉤到原生UI和本地能力的。 從上圖很容易可以看到，開發(fā)者通過(guò)JS去調(diào)用一個(gè)React Native提供的方法，實(shí)際需要先經(jīng)過(guò)兩個(gè)橋接封裝類，一個(gè)JS的橋接，另一個(gè)是原生的橋接。兩個(gè)橋接類之間就是通過(guò)前面提到的JS運(yùn)行環(huán)境來(lái)通信。JS橋接類的作用是將開發(fā)者的調(diào)用行為加入到React Native的模塊調(diào)用隊(duì)列，同時(shí)生成一個(gè)回調(diào)的ID。Native橋接類的作用是將隊(duì)列里的調(diào)用行為取出來(lái)根據(jù)模塊找到對(duì)應(yīng)的原生UI或者本地能力的函數(shù)來(lái)執(zhí)行，并將執(zhí)行的結(jié)果通過(guò)回調(diào)的ID逐步傳遞到開發(fā)者的JS回調(diào)函數(shù)中。也就是經(jīng)過(guò)這兩個(gè)橋接類的相互作用，建立起了JS函數(shù)與原生能力的調(diào)用序列。 其中不得不提的是React Native進(jìn)行了虛擬DOM的封裝，所有的視圖的更新都是虛擬DOM做了一個(gè)校驗(yàn)（diff）后最小更新，用內(nèi)存計(jì)算換取UI渲染效率。而開發(fā)者可以（不是必須）使用一種叫JSX的語(yǔ)法即可達(dá)到像web開發(fā)一樣使用標(biāo)簽和CSS樣式表來(lái)開發(fā)React Native應(yīng)用，React Native會(huì)將JSX轉(zhuǎn)化為JS語(yǔ)法通過(guò)上述通信流程完成原生UI的渲染和本地能力的調(diào)用。
上面的代碼段就是一個(gè)React Native的例子。它定義了兩個(gè)組件，一個(gè)是HelloWorld，一個(gè)是Main，其中HelloWorld組件作為Main組件的一部分進(jìn)行展示。我們可以看到Main組件里有一段XML的標(biāo)簽，這個(gè)語(yǔ)法就是JSX語(yǔ)法，當(dāng)然，如果不習(xí)慣這種語(yǔ)法，也可以完全按照HelloWorld組件的定義，全是使用JS來(lái)定義。 ExMobi則是通過(guò)解析一種叫UIXML的標(biāo)簽并映射到原生組件的方式渲染窗口和界面，這個(gè)解析引擎稱為UIXML引擎，在UIXML中也是支持CSS樣式表和JS語(yǔ)法。 下面的代碼就是一個(gè)UIXML代碼文件：
從上面的代碼可以看到很多熟悉的身影——HTML、CSS、JS，所以使用ExMobi開發(fā)移動(dòng)應(yīng)用跟web開發(fā)基本相差無(wú)異，而這種開發(fā)方式也容易被開發(fā)者認(rèn)為是采用了webview的引擎來(lái)實(shí)現(xiàn)，實(shí)際上并非如此。在ExMobi的原生應(yīng)用中完全可以一個(gè)html文件都不需要?jiǎng)?chuàng)建，也不會(huì)產(chǎn)生對(duì)webview的調(diào)用。 那ExMobi又是如何做到的呢？ 真機(jī)調(diào)試等功能，并能在創(chuàng)建應(yīng)用的時(shí)候使用現(xiàn)有模板。 ExMobi應(yīng)用都是從一個(gè)UIXML描述文件開始的，此文件中的內(nèi)容為類似HTML的標(biāo)簽，支持CSS和JS語(yǔ)法，但是并不是標(biāo)準(zhǔn)的HTML。從1至4步驟中，我們可以看到UIXML引擎將UIXML文件解析并渲染為原生組件的過(guò)程。這個(gè)過(guò)程中，會(huì)為每一個(gè)UIXML組件都生成一個(gè)ID，對(duì)于部分有生命周期事件（加載完畢、處于激活狀態(tài)、處于非激活狀態(tài)、銷毀等）的組件會(huì)進(jìn)行JS事件的觸發(fā)。 第5步就是將UIXML界面中的組件的JS事件和開發(fā)者的自定義函數(shù)綁定到UIXML的JS運(yùn)行環(huán)境中。 第6-13步跟React Native類似，也是先經(jīng)過(guò)一個(gè)JS橋接類的序列化要執(zhí)行的函數(shù)，然后再映射到原生的函數(shù)中來(lái)執(zhí)行。 與React Native不同的是，ExMobi沒(méi)有虛擬DOM的概念，UIXML描述是直接映射到Native View中的。這種實(shí)現(xiàn)方式在操作DOM時(shí)，如果不產(chǎn)生容器的變化一般是對(duì)性能和效率影響不大的。但是為了保證效率與性能的提高，UIXML提供了原生UI批處理的JS橋接類（window.beignPreferenceChange()與window.endPreferenceChange()），當(dāng)開發(fā)者遇到DOM大量及多次改動(dòng)，或者無(wú)法判斷是否會(huì)產(chǎn)生較大改動(dòng)時(shí)，可以按需將DOM操作包含在此批處理類中，UIXML引擎會(huì)從內(nèi)存中通過(guò)組件的ID來(lái)判斷組件的狀態(tài)，使一組在批處理內(nèi)的DOM結(jié)構(gòu)改變只需一次刷新，從而提高原生UI的渲染效率。 從React Native和ExMobi在原生組件的通信原理中可以看出，這類以原生UI組件為展示基礎(chǔ)的開發(fā)框架的核心就是對(duì)原生組件的封裝和橋接技術(shù)的使用。但是React Native是從JS文件開始，在JS中可以渲染UI標(biāo)簽，而ExMobi則是從UI標(biāo)簽（UIXML）文件開始，在UIXML中可以綁定JS函數(shù)和事件。 且兩者的實(shí)現(xiàn)都是以Run Time技術(shù)為核心理念的，所有的原生組件都是運(yùn)行中創(chuàng)建的，而不是在一開始就編譯好，這與交叉編譯的實(shí)現(xiàn)方式有本質(zhì)的不同。Run Time的好處就在于業(yè)務(wù)邏輯的代碼可以實(shí)時(shí)的載入，不需要重新編譯客戶端，無(wú)須重新打包發(fā)布，面對(duì)審核嚴(yán)厲的AppStore來(lái)說(shuō)，對(duì)開發(fā)者無(wú)疑是一個(gè)很大的利好。 當(dāng)然，對(duì)于原生組件封裝的顆粒度和使用的原生組件分類，甚至Android和iOS的封裝是否需要一致也是開發(fā)者熱衷于討論的話題?；蛘呦麓慰梢杂行以俑魑环窒怼?/p> 開發(fā)與調(diào)試 不同的開發(fā)者對(duì)開發(fā)工具的使用習(xí)慣各不相同，正所謂工欲善其事，必先利其器，選準(zhǔn)了工具才能提高開發(fā)效率。那React Native和ExMobi各自使用什么工具進(jìn)行開發(fā)和調(diào)試的呢？形式又是怎樣的呢？ React Native并沒(méi)有自主的開發(fā)工具。其開發(fā)方式是先到官網(wǎng)上下載React Native的安裝包，然后使用npm（NodeJS的包管理工具）來(lái)安裝并下載相關(guān)依賴模塊。創(chuàng)建工程也是通過(guò)npm來(lái)完成。創(chuàng)建完的工程包含了Android和iOS的子工程，分別需要各自搭建原生的開發(fā)環(huán)境方能運(yùn)行。所以React Native對(duì)開發(fā)者的要求是需要有一些原生開發(fā)的基礎(chǔ)的。并且，如果你是要做iOS應(yīng)用的開發(fā)，則需要有一臺(tái)MAC電腦。 搭建好原生開發(fā)環(huán)境之后，開發(fā)者就可以使用HTML編輯器來(lái)通過(guò)編寫JS文件完成開發(fā)，效果查看需要啟動(dòng)相應(yīng)的編譯工具和模擬器，比如：iOS需要通過(guò)XCode來(lái)編譯應(yīng)用到模擬器中，代碼中可以使用Console類來(lái)打印日志到XCode的控制臺(tái)中查看，但是無(wú)法進(jìn)行debug調(diào)試。有一點(diǎn)比較好的是，當(dāng)JS有改動(dòng)的時(shí)候，無(wú)需重新編譯就看到修改后的效果，非常方便，這也是有賴于React Native的Run Time機(jī)制。 特別的，如果開發(fā)者想要在真機(jī)上調(diào)試那就有些麻煩了。React Native開發(fā)時(shí)加載JS的方式是通過(guò)啟動(dòng)HTTP接口來(lái)動(dòng)態(tài)刷新的，而默認(rèn)是本機(jī)調(diào)試的接口地址對(duì)應(yīng)的IP和端口為127.0.0.1：8081，在真機(jī)上調(diào)試顯然是無(wú)法連接到此接口的，這就需要開發(fā)者自己通過(guò)命令來(lái)修改，然后編譯一個(gè)React Native的原生安裝包給真機(jī)安裝好才能連接到想要調(diào)試的開發(fā)環(huán)境中。這個(gè)過(guò)程比較復(fù)雜，無(wú)論是對(duì)原生開發(fā)者還是web開發(fā)者來(lái)接觸React Native開發(fā)都需要一定的過(guò)渡時(shí)間。 并且，由于React Native的原生組件在不同平臺(tái)上的寫法不同，Android有自己的組件，iOS也有自己的組件。當(dāng)開發(fā)者開發(fā)完某個(gè)平臺(tái)的應(yīng)用的時(shí)候，想要在另一個(gè)平臺(tái)上運(yùn)行，還需要修改代碼符合目標(biāo)平臺(tái)的規(guī)范。 這也是為什么說(shuō)React Native是Learn Once , Write Anywhere的原因——使用React Native開發(fā)Android和iOS的應(yīng)用，開發(fā)方式是一樣的，只是寫法稍有不同，可以做到技術(shù)經(jīng)驗(yàn)的積累。 由于React Native的開發(fā)和調(diào)試方式跟原生類似，此處省略N張截圖。 ExMobi具有自主的開發(fā)工具叫MBuilder，無(wú)論是開發(fā)Android還是iOS應(yīng)用都可以在這里面完成。開發(fā)者只需要下載MBuilder安裝包進(jìn)行一鍵安裝即可進(jìn)行ExMobi應(yīng)用的創(chuàng)建、開發(fā)、模擬器調(diào)試、真機(jī)調(diào)試等一系列簡(jiǎn)單方便的操作。這主要也是有賴于ExMobi的UIXML引擎在多個(gè)平臺(tái)上的定義和實(shí)現(xiàn)是一致的，也就是說(shuō)寫好一套代碼就可以在多個(gè)平臺(tái)上運(yùn)行，無(wú)須對(duì)代碼進(jìn)行區(qū)分修改。 下圖為MBuilder的界面，它是基于eclipse的一個(gè)插件，自定義了很多內(nèi)置編輯器，組件拖拽， 特別的是，ExMobi有個(gè)基座的概念的，結(jié)合前面介紹Run Time模式，與React Native相似，UIXML、JS和CSS等代碼也是要通過(guò)HTTP接口加載到基座中就可以運(yùn)行出原生的界面，為了開發(fā)調(diào)試方便，基座上可以直接配置IP和端口，所以任何機(jī)器上的ExMobi代碼可以很方便的同步到模擬器或者真機(jī)上調(diào)試。 下圖即為PC版基座模擬器的截圖： 更強(qiáng)大的是， 開發(fā)者可以在PC版的ExMobi模擬器中對(duì)UIXML的JS代碼進(jìn)行調(diào)試，并綜合Console控制臺(tái)日志進(jìn)行錯(cuò)誤分析，開發(fā)調(diào)試跟在Chrom/Firefox中調(diào)試JS一樣，非常方便。 同時(shí)，MBuilder支持一鍵生成安裝包，并安裝到真機(jī)中運(yùn)行查看效果，在開發(fā)個(gè)階段都能幫助開發(fā)者提高開發(fā)效率。 所以，ExMobi提倡的是Write Once , Run Anywhere，在Android和iOS中使用相同的用戶體驗(yàn)。當(dāng)然，ExMobi提供了區(qū)分Android和iOS的函數(shù)，開發(fā)者也可以根據(jù)需要做平臺(tái)差異化展示。 組件的數(shù)量和擴(kuò)展方式 對(duì)于開發(fā)者來(lái)說(shuō)成熟的組件以及靈活的擴(kuò)展無(wú)疑是對(duì)高質(zhì)量應(yīng)用的最佳保障。 從React Native官網(wǎng)上大概可以看到其有30個(gè)左右的組件，有的僅支持Android，有的僅支持iOS，但是其中的View組件是可以比較靈活的通過(guò)組合來(lái)形成新的組件。
而且React Native支持組件的擴(kuò)展，通過(guò)原生開發(fā)就可以開發(fā)出符合自己要求的UI組件。目前市面上也有一些不錯(cuò)的React Native UI組件，比如：表單處理組件、照相/攝像組件、視頻播放組件、輪播組件等等，基于Facebook的影響力，未來(lái)應(yīng)該還會(huì)涌現(xiàn)出很多優(yōu)秀的組件插件庫(kù)。 下面就來(lái)親眼目睹一下：
ExMobi的原生UI組件從官網(wǎng)提供的開發(fā)手冊(cè)中可以看到90+個(gè)組件，并且在其公開的原生插件也有30多款，除了基本的UI布局組件，比如：九宮格、列表、下拉刷新、輪播、通訊錄、拍照攝像、日期時(shí)間選擇組件等等。 當(dāng)然，ExMobi也支持對(duì)原生UI和能力的擴(kuò)展，開發(fā)者也可以通過(guò)原生開發(fā)擴(kuò)展ExMobi的能力。所以也有很多跟國(guó)內(nèi)廣泛使用的SDK結(jié)合的原生插件，比如：百度地圖、訊飛語(yǔ)音、支付寶、微信/微博分享/登錄、漢王名片識(shí)別、百度影音播放等等，以及一些專業(yè)的企業(yè)級(jí)SDK集成，比如：深信服VPN、企業(yè)版WPS文檔編輯、藍(lán)牙打印、身份證識(shí)別、CA認(rèn)證等等。 所以，從本地化的角度看，ExMobi扎根國(guó)內(nèi)，需求比較接地氣，更容易滿足開發(fā)者的需要。而對(duì)于React Native想要適應(yīng)目前的開發(fā)環(huán)境，還需要不斷的定制出更多的符合要求的組件。 下面是從ExMobi論壇上的一些截圖：
第一個(gè)真不是格瓦拉上截的圖哦，ExMobi官網(wǎng)上還有很多比較成熟的UI界面分享，基本可以滿足大部分的開發(fā)需要。 面向的開發(fā)者 從前面的了解， React Native和ExMobi的開發(fā)語(yǔ)言都是以類web的標(biāo)簽化+JS開發(fā)為主，并且都支持原生組件和能力的擴(kuò)展，所以，無(wú)論是web開發(fā)者還是原生程序開發(fā)者要使用這兩個(gè)工具都不是非常難的事情。 這里主要是從React Native和ExMobi的一些宣講和推廣等渠道了解的信息作為判斷。 React Native從開發(fā)環(huán)境的搭建到開發(fā)方式上其實(shí)都是偏向于原生的，純粹的web開發(fā)者要想很快能夠熟練使用React Native甚至說(shuō)是搭建開發(fā)環(huán)境似乎還是要多花一些心思的。并且在React Native的宣講中，仍然是建議原生開發(fā)者能夠嘗試接納React Native這種新的開發(fā)模式，以提高自己的開發(fā)效率。或許可以推斷，React Native在設(shè)計(jì)之初所考慮面向的開發(fā)者為原生開發(fā)者。 ExMobi則把移動(dòng)應(yīng)用開發(fā)的各個(gè)環(huán)節(jié)都通過(guò)MBuilder這個(gè)IDE來(lái)緊密集合。一鍵安裝的跨平臺(tái)開發(fā)工具和更接近的web開發(fā)模式對(duì)于傳統(tǒng)web開發(fā)人員來(lái)說(shuō)不可謂無(wú)故意而為之的“嫌疑”，而從官方提供三類開發(fā)者，UIXML開發(fā)者、HTML5開發(fā)者和原生插件開發(fā)者來(lái)看，如果單純使用ExMobi來(lái)開發(fā)，不考慮原生插件，那么其面向的開發(fā)者必定的是web開發(fā)者。當(dāng)然 當(dāng)然，現(xiàn)在全棧式開發(fā)越來(lái)越多的走進(jìn)人們的視野，單一的技術(shù)已經(jīng)無(wú)法滿足開發(fā)的需要，或許對(duì)不同技術(shù)的巧妙應(yīng)用才能帶來(lái)下一波的技術(shù)創(chuàng)新。這里我們討論的只是從入門和使用的角度的受眾，對(duì)技術(shù)的不斷探索對(duì)于程序員來(lái)說(shuō)是不遺余力的。 與HTML5的結(jié)合 Native與HTML5從來(lái)都不是競(jìng)爭(zhēng)關(guān)系，而更多的是合作關(guān)系，只是不同的開發(fā)者使用的比例不同罷了。但是如何結(jié)合，React Native與ExMobi也都提出了各自的思路。 React Native使用的JSX其實(shí)就是一個(gè)JS框架，這個(gè)框架在Facebook的另一個(gè)產(chǎn)品React JS中也是一個(gè)基礎(chǔ)，應(yīng)該是屬于一個(gè)體系中的產(chǎn)品。所以，這一體系中的產(chǎn)品無(wú)論Android、iOS還是Web，開發(fā)方式都是一樣的，只是各自的UI組件不同，每一種平臺(tái)都要渲染自己的UI組件。 而React JS本身也沒(méi)有對(duì)H5的組件做過(guò)多的封裝，而是提出了一種全新的UI組件的封裝與渲染模式，它與MVV*概念不應(yīng)相提并論，而是可以跟jQuery、BootStrap等優(yōu)秀的前端框架一起來(lái)使用。 除此之外，React Native也支持webview組件來(lái)使用HTML5。所以，從Web到Native，React的整個(gè)體系還是相對(duì)比較完整的。 ExMobi也有一個(gè)HTML5的開發(fā)框架伴侶——Agile Lite移動(dòng)應(yīng)用前端框架，此框架是一個(gè)完整的MVC的框架，而且封裝的UI組件與ExMobi的UI組件基本一致，并支持組件的擴(kuò)展。同時(shí)可以在ExMobi的webview組件和微信中智能調(diào)用各自的本地能力，而在普通瀏覽器中則調(diào)用瀏覽器能力。開發(fā)者可以很方便的使用框架進(jìn)行完整webapp的開發(fā)而不需要再借助其他的前端框架（當(dāng)然也可以結(jié)合Bootstrap、Ratchet等框架）。而其對(duì)微信API的封裝也可以提升微信應(yīng)用的開發(fā)效率，基于ExMobi支持的webview組件，使用Agile Lite開發(fā)的微信應(yīng)用也可以方便移植到ExMobi開發(fā)的原生app中。 總結(jié) 對(duì)于開發(fā)者來(lái)說(shuō)現(xiàn)在有越來(lái)越多的技術(shù)方向可以選擇，移動(dòng)應(yīng)用開發(fā)也不例外。React Native以其敏銳的技術(shù)眼光與ExMobi多年的市場(chǎng)檢驗(yàn)結(jié)果不謀而合，都堅(jiān)定的選擇了移動(dòng)應(yīng)用原生開發(fā)的技術(shù)路線，并通過(guò)各自的技術(shù)特點(diǎn)將原生開發(fā)的思路擴(kuò)展到web開發(fā)的領(lǐng)域，通過(guò)web開發(fā)的技巧使開發(fā)的APP完全具備原生應(yīng)用的所有高效、流暢、無(wú)限接近系統(tǒng)效果的用戶體驗(yàn)。雖然在技術(shù)路線上稍有不同，但也給開發(fā)者更多的思考空間，相信隨著移動(dòng)物聯(lián)時(shí)代的不斷進(jìn)步，還會(huì)涌現(xiàn)出更多新的思維和模式，請(qǐng)讓我們一起翹首期待。 |
|
|
來(lái)自： ThinkTank_引擎 > 《APP》
隨著Facebook陸續(xù)開源React Native的iOS和Android版本，這種以JavaScript來(lái)開發(fā)原生APP的方式在移動(dòng)應(yīng)用開發(fā)圈里得到廣泛關(guān)注，雖然React Native并不是第一個(gè)采用JavaScript編寫原生APP的產(chǎn)品，但是其獨(dú)特的設(shè)計(jì)思想和實(shí)現(xiàn)方式是非常值得借鑒的。
