APP跨平臺開發技術分析

時間 2019-11-07

標籤 app 跨平臺開發技術分析简体版

原文原文鏈接

這篇文章將嘗試從技術商用的角度，對目前流行的幾大 APP 跨平臺開發技術進行分析對比，讓你們在學習選擇時多一個參考對象。javascript

背景

APP 跨平臺開發是目前比較熱門的方向，採用 web 框架開發，以 web 的開發體驗快速構建應用，提升了迭代的效率。同時 web 開發方式大多使用動態語言，可以繞過原生開發限制動態加載，所以具有熱加載、熱更新的能力。用跨平臺技術開發的應用不管性能仍是用戶體驗都很接近原生應用。css

Flutter 是 Google 新推出的一款幫助開發者開發高質量原生應用的全新APP跨平臺 UI 框架，它的目標是解決了移動開發中跨平臺、高性能問題，一經推出就受到開發者的普遍關注。html

下面將介紹幾大流行的跨平臺開發技術，並從使用成本、開發效率、一致性、動態性和性能等方面做更深刻的分析，提供更具體的參考。前端

如下是本文目錄java

幾種技術方案

webview

利用安卓和 iOS 上的 webview 容器，APP 可以執行 html、css 和 js 腳本，展現 web 頁面。若是須要原生功能就添加 bridge 供 javascript 調用。具備開發效率高、跨平臺、支持動態發佈等特色，它是目前應用最普遍最成熟的一種方案。react

React Native/Weex

React Native 和 Weex 這類方案，使用 javascript 來構建界面，在運行時翻譯成原生組件展現出來，實際上全部界面都是用原生組件。支持跨平臺，性能和用戶體驗高於 webview，接近原生應用，是當前熱門的跨平臺開發技術。android

Flutter

Flutter 使用了一種全新的方式，本身重寫了一個平臺無關的渲染引擎，它只提供畫布，全部的 UI 組件、渲染邏輯都是在這個引擎上處理的。最大程度上保證了各平臺下的一致性，同時也擁有媲美原生的高性能體驗。ios

注：基於 webview 的框架目前已普遍在 APP 開發中應用，各類利弊都已獲得充分驗證，這個技術具備開發效率、跨平臺、動態發佈等方面的優勢，但缺點也明顯，性能和用戶體驗上都很糟糕。接下來，咱們重點對 React Native 和 Flutter 進行分析對比。git

使用成本

學習曲線

React Native 採用 js 語言，基於 React，對於前端工程師比較友好，上手成本低。github

Flutter 使用 Dart 做爲它的開發語言，Dart 跟 Java 有點像，比較簡單，上手也容易。但畢竟是門新語言，多少會有些障礙。

接入成本

若是是全新的項目，接入 React Native/Flutter 成本較低，但對於混合開發，接入到現有項目，將是一個巨大的工程。

咱們須要考慮如何集成 SDK 到現有項目，原生頁面與 React Native/Flutter 頁面如何跳轉傳值，如何封裝原生模塊供與 React Native/Flutter 調用，如何打包 React Native/Flutter 與 bundle 集成，如何部署發佈，如何跨端聯調等。

成熟度

React Native 是在 2015 年發佈的，通過 3 年多的發展，已經比較成熟。React Native 社區發展也很活躍，貢獻了大量的開源代碼。

而 Flutter 是在今年 6 月份才推出發佈預覽版，社區也剛剛發展。因此，Flutter 還須要時間。

以 Github 上打開的 issue 的數量來看，截止到 2018-10-28，React Native 有 689 個，Flutter 有 4097，這也說明了 Flutter 目前尚不穩定。

行業採用

在安卓系統中，經過分析 apk 使用的庫，統計到前 100 的 APP 使用了哪些跨平臺開發技術，以下圖：

去除遊戲和系統應用，使用 React Native/weex 的應用共 79 款，行業使用率 18.9%。

開發效率

社區

選擇一個技術時，社區生態是一個重要的考量。一個繁榮的社區，有不少成熟的工具、庫、工程體系、最佳實踐能夠供咱們使用和借鑑。

那麼如何衡量一個開源社區的活躍度？

爲簡單起見，咱們以開發者數量和變化趨勢做爲指標來衡量社區生態是否繁榮？在 github 上統計各個技術的倉庫數量（2018-10-16），以此分析背後的開發者數量，這裏加入了另外兩種技術做爲參照物，以便更好地對比分析社區活躍度，其中 Weex 做爲不活躍社區的基準，Objective-C 做爲原生社區的基準。

注：Objective-C 倉庫數量爲 396,668，因數量太大沒放到下圖中。