1.1 移動跨端開發技術

Android與iOS是目前市場上最常見的手機操作系統，它們各自維護了一套技術棧與設計規范，采用完全不兼容的開發技術。因此，如果想開發一款能在兩種系統上同時運行的應用，目前最普遍的辦法是開發兩遍。這會導致代碼冗余問題，同時也導致人力成本翻倍。

移動跨端技術旨在解決這一問題，其理想目標是“一次編寫，處處運行”，從而實現人效大幅提升，研發人力成本降低的目標。當然，雙端無法達到100%復用，對于實際應用，能做到大部分代碼邏輯復用，少部分代碼差異化實現，就能取得上述收益。

在下面的小節中，先介紹原生開發與跨端開發兩個概念，之后介紹移動跨端領域的發展歷程與難點。

1.1.1 移動端應用開發的一般流程

現實生活中有很多優秀的移動應用，給人們的生活增添了許多色彩。它們是如何被一步步開發出來的？移動互聯網經過多年的發展，已形成了一套完整的研發方法論。

一款移動端應用從開發到上線，通常需要經過以下流程。

1 構思產品需求

對于一款移動應用，首先要思考該應用能夠解決人們生活中的什么問題。發現問題后，再進一步思考如何解決，進而拆解出應用功能。最終確定整體產品形態，以產品文檔的形式產出。

2 設計視覺界面

產品文檔梳理完成后，需要轉化為可在手機上操作的用戶界面。設計師通過界面設計，確定應用包含的頁面樣式，并以設計圖、交互圖等文檔的形式產出。

3 制定技術方案

有了產品文檔和設計文檔，接下來進入開發階段。研發人員根據產品、設計文檔構思技術實現方案，其中可進一步拆解為后端技術方案、前端技術方案，并最終以技術方案文檔的形式產出。

4 編程開發實現

確定了技術方案之后，可正式進入編程開發。研發工程師基于技術方案和產品、設計文檔，進行分工合作，通過編程實現功能，將原本記錄于紙面的產品文檔、設計圖最終變為可運行的應用程序。移動端開發者在其中主要負責前端移動端部分，后端開發者負責為后端服務開發程序，以及為移動端提供API接口。

5 測試回歸驗收

功能開發完成后，并不意味著功能就可以上線了。由于編程是一項復雜的工作，極易留下疏漏，即通常所說的bug。對于商業應用來說，bug是不可接受的，輕則影響用戶使用體驗，重則給公司業務帶來經濟損失。

為了確保功能質量，在互聯網團隊中通常會配備測試團隊，會有專業的測試工程師對功能進行測試驗收。測試工程師會將測試過程中發現的bug提交給研發人員，由后者進行修復，并交回給測試工程師進行再次驗收。

6 版本發布上線

當測試驗收通過后，說明質量已具備上線要求，接下來會進行發版上線操作。對于移動端來說，則構建出應用的正式版本，將其發布到應用市場。應用發布后，用戶便能夠通過下載升級，享受到新版本的功能了。

7 版本迭代更新

在實際開發中，通常會采取迭代開發的方式，即對應用的功能進行拆解，安排到一系列版本中，每個版本根據優先級開發一部分功能。

迭代開發是目前互聯網產品常用的開發方式，通過迭代開發，產品能夠盡快上線，搶占市場先機。同時也能夠針對功能的有效性進行快速試錯。

迭代過程如同“滾雪球”一般，很多移動互聯網的商業神話就是從一個功能尚不完善的“小雪球”，逐步變大、變強，最終走向成功。

快速試錯對于互聯網產品是非常重要的，通常采用最小化可行產品（Minimum Viable Product，MVP）的思想，先以最低的成本快速上線一個功能，觀察上線后用戶的反饋效果，如果效果與預期一致，則通過后續版本持續完善。而如果未達到預期，說明方案有問題，需要重新思考產品需求。

1.1.2 原生開發與跨端開發

在移動端跨端領域經常見到原生開發與跨端開發這兩個概念，對于沒有移動端開發經驗的學習者來說有些陌生。在本節中介紹原生開發與跨端開發的概念、特點。

1 原生開發

原生開發指使用Android、iOS原生技術棧進行移動端應用開發。移動端設備屬于移動嵌入式設備，最大的制約因素是電池和運算性能，由于電池容量是固定的，同時功率也限制了性能，在軟硬件設計上都圍繞省電進行。

因此，對于Android、iOS系統而言，傳統Linux系統的進程調度、電源管理是無法滿足的，必須要進行更細粒度劃分。于是在Android中拆分出四大組件、建立生命周期概念，采用多種省電策略，比如應用切后臺后會被系統掛起等。這些概念和框架的引入導致開發變得復雜，提高了入門難度。

Android系統由Google公司推出，是一款基于Linux內核的開源手機操作系統。在Android系統上，應用開發者使用Java、Kotlin語言進行應用開發，兩者都運行在JVM虛擬機中，開發工具使用An-droid Studio。Android Framework提供了一系列Java框架與概念，比如著名的四大組件，Activity負責界面，Service負責后臺邏輯，BroadcastReceiver負責事件廣播，Content Provider負責數據共享。開發者基于這些API進行應用開發，整體架構如圖1-1所示。

iOS由蘋果公司推出，是一款基于Darwin內核的閉源手機操作系統，僅用于蘋果品牌的移動設備。iOS使用Objective-C、Swift語言進行應用開發，開發工具為XCode，僅能在macOS下運行。iOS的整體架構與Android差異很大，定義了另一套概念體系，整體架構如圖1-2所示。

通過對比可以看出，Android與iOS兩個系統的內核、系統組件、開發語言及開發環境均完全不同。對于傳統移動端團隊而言，通常由Android開發團隊和iOS開發團隊組成，對同一個應用需要開發兩遍。

重復開發的弊端前文已提到，會降低效率，并造成人力成本倍增。其實問題不僅如此，從編程角度來看，一個功能由不同的人開發兩遍，由于各自對需求理解不同，以及兩個平臺的差異性，會導致最終實現出現不一致的問題。這是實際工作中一個比較棘手的問題，許多bug都滋生于此，甚至造成線上問題。

由此可見，傳統原生開發存在低效、重復勞動及人力消耗問題。但在可靠的跨端技術出現之前，沒有別的路可走，只能不得已而為之。

2 跨端開發

跨端開發指用一套技術棧抹平不同系統之間的差異，基于跨端框架，開發者可以實現一套代碼在不同系統上運行。

跨端開發并非全新概念，其歷史非常悠久。如著名的桌面程序開發框架Qt，1.0版本發布于1995年。通過Qt能夠實現程序在Windows、macOS、Linux下多端運行。

Qt的架構設計思想是首先設計一套獨立于操作系統的上層框架Qt Framework，其中包含了Qt的各個核心模塊，如QApplication、QWidget、QThread等。這些模塊都是操作系統無關的，Qt的UI層選擇獨立繪制，沒有使用操作系統提供的控件庫。這種設計思想具備良好的可移植性，各種操作系統只需要提供底層能力進行適配即可。Qt的整體架構如圖1-3所示。

需要強調的是，與上一節中給出的操作系統架構圖不同，跨端框架運行在操作系統之上。

Qt取得了巨大的成功，至今已發展成為一套完善、成熟的桌面跨端技術方案，成為跨端開發框架典范。

除了Qt之外，Web技術也是一種跨端技術。不論使用哪種操作系統，只要安裝瀏覽器就能夠訪問網站。一個基于Webkit內核的瀏覽器的架構如圖1-4所示。

瀏覽器架構與Qt存在一定的相似性，都是通過封裝一套統一框架，在框架之上運行應用。但Qt應用通過C++開發，用戶需要先安裝軟件才能使用，而瀏覽器使用Web技術開發，即HTML、CSS和JavaScript，它們都具備動態性，可以隨網絡下發運行，用戶只要輸入一個網址就能訪問網站，強大的動態性促成了互聯網時代的繁榮。

1.1.3 移動跨端開發技術的發展歷程

隨著移動互聯網時代的到來，Android和iOS成為市場上最流行的兩種操作系統，在前文中講到，由于兩種系統采用不同的開發技術，開發成本較高，因此出現了移動端跨端開發這一技術領域，并誕生了多種跨端方案。

1 基于網頁的跨端方案

Android和iOS均提供WebView容器，它允許在應用內嵌網頁。瀏覽器本身是一種非常優秀的跨端方案，因此移動應用通過使用WebView便能夠具備跨端能力。

這種移動跨端方案是最早采用，也是目前最廣泛采用的一種方案，絕大多數移動應用都會集成這一能力。由前端開發者進行網頁開發，移動端通過WebView展示。由于前端開發本身效率高于原生，并且雙端只需開發一遍，因此大大降低了研發成本。

這是不是意味著，只要Android、iOS兩端提供一個WebView殼，整個應用都是用前端網頁開發，就完全解決跨端問題了？答案并不全是，這種方案的主要限制在于性能與體驗。

瀏覽器的執行效率是遠低于原生應用的，尤其在性能較低的手機上，這導致一些復雜的交互效果不夠流暢，或出現卡頓掉幀的情況。同時，由于瀏覽器是一個沙箱環境，無法訪問到所有系統原生能力，因此一些與系統深度交互的功能是難以實現的。還有一點，打開網頁需要聯網，存在加載等待時間，無法像原生頁面那樣立刻展示視圖。

如果想打造一款效果豐富、體驗流暢的移動應用，通過網頁套殼方案往往無法滿足，此時需要原生實現。但是如果是開發一些對體驗要求不高的應用，如商務流程表單類應用，這個方案是比較適用的。

在實際的移動應用開發中，通常采用兩者混合的方式，對交互復雜、體驗要求高的頁面使用原生開發，對一些對體驗要求不高的頁面使用網頁開發，在體驗與成本之間實現一個平衡。

同時，由于網頁天生的動態性，對于一些經常發生變動的頁面，比如活動運營頁也通常選用網頁方案進行實現。

2 React Native

React Native是一款由Facebook推出的著名移動跨端方案，與Flutter一樣，也是目前最熱門的方案之一。React Native的特點是以前端的開發方式開發移動端，它基于前端React框架，用JavaScript或TypeScript語言進行開發，最終渲染成原生移動端組件進行展示。

與網頁方案對比，同樣是前端開發，React Native不依賴瀏覽器，而是橋接到原生渲染，因此執行效率大大提升。同時它也允許通過NativeModule方式將系統原生能力導入到React Native中，還允許通過UIManager的方式將原生的視圖進行包裝，導入React Native中使用。

React Native一經推出迅速走熱，成為最近幾年移動端跨端的主流方案。通過多年發展，React Native不斷完善，形成了龐大的開源社區，擁有眾多高質量開源庫，成為一套完備的跨端解決方案。

React Native采用JavaScript語言，在iOS上使用系統內置的JavaScriptCore引擎，在Android上由于系統沒有內置JavaScript引擎，因此React Native會在應用包中自帶一個JavaScriptCore，這會導致Android安裝包變大的問題。

雖然React Native性能較網頁方案有很大提升，但運行效率仍低于原生開發。首先JavaS-cript是一門腳本語言，執行效率比原生慢，同時從JavaScript橋接原生也存在性能開銷。另外JavaScript引擎運行也需要占用內存，因此React Native應用的內存開銷也要高于原生。

值得一提的是，React Native目前也處在快速發展中，并且吸引了微軟等巨頭參與。針對上面提到的缺點，React Native新版本完成了多項改進，比如換用自研的Hermes引擎提升運行效率、降低內存，以及正在進行中的新架構重構，包含多項重大改進（如JSI對象映射機制、Fabric視圖層重構，以及TurboModule更加高效且可同步、可異步的原生能力調用）。

1.1.4 跨端技術難點

經過前面的介紹與對比，可以總結出跨端方法存在以下技術難點。

1 雙端一致性

一套代碼在多端得到一致的展示效果是跨端方案的基本要求?；诰W頁的方案通過成熟的瀏覽器技術，能夠保證較好的一致性。

對于渲染到原生視圖的方案來說，難以做到完美的一致性。原因在于這些方案最終渲染出來的還是Android、iOS的原生視圖，由于雙端原生視圖的實現原理不同，因此總有一些細微之處是難以對齊的。加上Android、iOS系統會不斷升級，原生視圖的代碼實現也會有變動，需要額外的工作量進行對齊。

2 運行效率

運行效率也是跨端方案的一個重要考量因素?；诰W頁的跨端方案由于效率不夠高，無法用在注重使用體驗的核心頁面上。React Native這類框架舍棄了瀏覽器，僅保留JavaScript引擎并渲染到原生，相較于網頁跨端運行效率大大提高。但是因為JavaScript是腳本語言，本身運行效率低于原生，加之從JavaScript渲染到原生需要進行橋接，在Android上需要經歷從JavaS-cript到C，再通過JNI到Java的連續跨層，存在一定的性能開銷，因此運行效率還是大幅慢于原生。

3 開發效率

許多人會將運行效率與開發效率混淆，兩者實則是不同的概念。運行效率高指的是這個框架“跑得快”，從而能夠勝任更多復雜頁面。開發效率高指的是“開發速度快”，決定了研發效率的高低。

眾所周知，不論Android還是iOS原生開發的效率都是比較低的。引入一套新的跨端框架，開發效率就一定比原生開發要高嗎？答案是不一定。

首先，跨端框架能夠以一套代碼在多端執行，從而避免開發兩遍，從這一點上來看，開發效率一定是提升的。

但還有一個問題，跨端方案同時也帶來了其獨有的開發方式。對于一個跨端框架來說，如何保證新的開發方式比原生開發效率要高，這也是一個重要問題。

開發效率體現在多個方面，在開發階段包括開發框架的易用度、開發語言的學習曲線；在調試階段包括調試工具鏈的完善程度；在構建階段包括應用打包構建的難度、與原生工程結合的難度。除此之外，開源生態及開發社區的完善度都對開發效率有影響。

回顧成功的跨端框架，它們都是具備了極高的開發效率。Web開發使用的CSS/HTML/JavaScript，俗稱“三劍客”，開發效率極高。React Native則基于React框架，同時復用部分Web技術，也實現了較高的開發效率。

4 原生能力導出

對于跨端框架來說，如何對兩個系統能力做整合也是一個難點。Android和iOS兩個系統的原理有差異性，同一種原生能力在兩端有著不同的實現。因此跨端框架需要提供一種機制，能夠分別對兩端進行封裝，并向上提供一套統一的接口。

對于網頁跨端來說，通常使用JSBridge的方式進行導出，功能較弱。React Native通過NativeModule/TurboModule的方式，導出的能力更加強大，并且能夠以庫的形式復用，在React Native龐大的開源生態中，提供了多種多樣的擴展庫，供開發者快速接入。

5 動態性

原生開發采用應用商店發版升級的模式，必須經過應用商店審核、用戶下載的發布流程，導致無法隨時更新。這一點比Web發版要慢很多，Web可以實現隨時發版，用戶再次打開網址即可訪問新版本網頁。

網頁跨端方案為原生開發帶來了動態性，在業界流行的開發實踐中，通常將應用中如運營活動這種頻繁變更的頁面用網頁實現，保證營銷活動快速上線。React Native也支持動態化，它的構建產物是JavaScript Bundle，可以實現Bundle聯網更新，從而實現動態化。

動態化其實并不是跨端方案必須支持的特性，但是由于網頁跨端和React Native等主流方案都支持動態化，并且動態化是移動開發中的一個核心痛點，因此在移動跨端領域一般也將動態性作為考量的一個方面。

6 包體積

用戶對應用的安裝包體積也是比較敏感的。如果安裝包較小，用戶在使用流量上網時也更愿意下載安裝，從而有利于積累用戶。同時，用戶的手機容量往往有限，當手機空間出現不足時，用戶通常會刪除那些占用空間較大的應用，一旦刪除很可能會流失此用戶。

對于網頁跨端方案來說，由于WebView在Android、iOS中都是系統自帶控件，并且內容動態下發不會增加安裝包體積。對于React Native，在iOS下復用系統的JavaScriptCore引擎，因此安裝包不會有明顯增大，但在Android上需要將引擎內置到安裝包中，會導致包體積增大。React Native新版本中換用了Hermes引擎，這個問題得到了一定的緩解。