淺述跨平臺(tái)開(kāi)發(fā)的背景

1、使用原生的方式來(lái)開(kāi)發(fā) App，就要求我們必須針對(duì) iOS 和 Android 這兩個(gè)平臺(tái)分別開(kāi)發(fā)，這對(duì)于中小型團(tuán)隊(duì)來(lái)說(shuō)就是隱患和額外的負(fù)擔(dān)。
2、我們不僅需要在不同的項(xiàng)目間嘗試用不同的語(yǔ)言去實(shí)現(xiàn)同樣的功能，還要承擔(dān)由此帶來(lái)的維護(hù)任務(wù)。
3、跨平臺(tái)開(kāi)發(fā)是為了增加業(yè)務(wù)代碼的復(fù)用率，減少因?yàn)橐m配多個(gè)平臺(tái)帶來(lái)的工作量，從而降低開(kāi)發(fā)成本?！?“多快好省”
4、對(duì)于移動(dòng)端開(kāi)發(fā)來(lái)講，如果能實(shí)現(xiàn)“一套代碼，多端運(yùn)行”，這樣的技術(shù)勢(shì)必會(huì)引發(fā)新的生產(chǎn)力變革，在目前多終端時(shí)代的大環(huán)境下，可以為企業(yè)節(jié)省人力資源上，從而帶來(lái)直接的經(jīng)濟(jì)效益。
5、為了滿足人們對(duì)開(kāi)發(fā)效率和用戶體驗(yàn)的不懈追求，各種跨平臺(tái)的開(kāi)發(fā)方案也如雨后春筍般涌現(xiàn)。除了 React Native 和 Flutter 之外，這幾年還出現(xiàn)過(guò)許多其他的解決方案。

跨平臺(tái)開(kāi)發(fā)方案的三個(gè)時(shí)代

Web 容器時(shí)代

基于 Web 相關(guān)技術(shù)通過(guò)瀏覽器組件來(lái)實(shí)現(xiàn)界面及功能，典型的框架包括 Cordova(PhoneGap)、Ionic 和微信小程序。

• 采用的是原生應(yīng)用內(nèi)嵌瀏覽器控件 WebView（iOS 為 UIWebView 或 WKWebView，Android 為 WebView）的方式進(jìn)行 HTML5 頁(yè)面渲染，并定義 HTML5 與原生代碼交互協(xié)議，將部分原生系統(tǒng)能力暴露給 HTML5，從而擴(kuò)展 HTML5 的邊界。這類交互協(xié)議，就是我們通常說(shuō)的 JS Bridge（橋）。

• 一個(gè)完整 HTML5 頁(yè)面的展示要經(jīng)歷瀏覽器控件的加載、解析和渲染三大過(guò)程，性能消耗要比原生開(kāi)發(fā)增加 N 個(gè)數(shù)量級(jí)。

  
  
  image.png
• Web 容器方案具有生態(tài)繁榮、開(kāi)發(fā)體驗(yàn)友好、生產(chǎn)效率高、跨平臺(tái)兼容性強(qiáng)等優(yōu)勢(shì)，但它最大的問(wèn)題在于承載著大量 Web 標(biāo)準(zhǔn)的 Web 容器過(guò)于笨重，以至于性能和體驗(yàn)都達(dá)不到與原生同樣的水準(zhǔn)，在復(fù)雜交互和動(dòng)畫上較難實(shí)現(xiàn)出優(yōu)良的用戶體驗(yàn)。

泛 Web 容器時(shí)代

采用類 Web 標(biāo)準(zhǔn)進(jìn)行開(kāi)發(fā)，但在運(yùn)行時(shí)把繪制和渲染交由原生系統(tǒng)接管的技術(shù)，代表框架有 React Native、Weex 和快應(yīng)用，廣義的還包括天貓的 Virtual View 等。

• 解決方案優(yōu)化了 Web 容器時(shí)代的加載、解析和渲染這三大過(guò)程，把影響它們獨(dú)立運(yùn)行的 Web 標(biāo)準(zhǔn)進(jìn)行了裁剪，以相對(duì)簡(jiǎn)單的方式支持了構(gòu)建移動(dòng)端頁(yè)面必要的 Web 標(biāo)準(zhǔn)（如 Flexbox 等），也保證了便捷的前端開(kāi)發(fā)體驗(yàn)；同時(shí)，這個(gè)時(shí)代的解決方案基本上完全放棄了瀏覽器控件渲染，而是采用原生自帶的 UI 組件實(shí)現(xiàn)代替了核心的渲染引擎，僅保持必要的基本控件渲染能力，從而使得渲染過(guò)程更加簡(jiǎn)化，也保證了良好的渲染性能。

  
  
  image.png
• 使用原生控件承載界面渲染，固然解決了不少性能問(wèn)題，但同時(shí)也帶來(lái)了新的問(wèn)題。拋開(kāi)框架本身需要處理大量平臺(tái)相關(guān)的邏輯外，隨著系統(tǒng)版本變化和 API 的變化，我們還需要處理不同平臺(tái)的原生控件渲染能力差異，修復(fù)各類奇奇怪怪的 Bug。始終需要 Follow Native 的思維方式，就使得泛 Web 容器框架的跨平臺(tái)特性被大打折扣。

自繪引擎時(shí)代

自帶渲染引擎，客戶端僅提供一塊畫布即可獲得從業(yè)務(wù)邏輯到功能呈現(xiàn)的多端高度一致的渲染體驗(yàn)。Flutter，是為數(shù)不多的代表。

• 渲染引擎依靠跨平臺(tái)的 Skia 圖形庫(kù)來(lái)實(shí)現(xiàn)，Skia 引擎會(huì)將使用 Dart 構(gòu)建的抽象的視圖結(jié)構(gòu)數(shù)據(jù)加工成 GPU 數(shù)據(jù)，交由 OpenGL 最終提供給 GPU 渲染，至此完成渲染閉環(huán)，因此可以在最大程度上保證一款應(yīng)用在不同平臺(tái)、不同設(shè)備上的體驗(yàn)一致性。

• 而開(kāi)發(fā)語(yǔ)言選用的是同時(shí)支持 JIT（Just-in-Time，即時(shí)編譯）和 AOT（Ahead-of-Time，預(yù)編譯）的 Dart，不僅保證了開(kāi)發(fā)效率，更提升了執(zhí)行效率（比使用 JavaScript 開(kāi)發(fā)的泛 Web 容器方案要高得多）。

  
  
  image.png

選擇什么跨平臺(tái)開(kāi)發(fā)

• 從不同的角度來(lái)看，三個(gè)時(shí)代的跨平臺(tái)框架代表們?cè)陂_(kāi)發(fā)效率、渲染性能、維護(hù)成本和社區(qū)生態(tài)上各有優(yōu)劣，如下圖所示：

  
  
  image.png