3.6 移動App開發

3.6.1 Native App

Native App（原生App）開發模式是指使用操作系統本地支持的語言進行開發，直接對接本地操作系統。Android系統開發基于Java語言，底層調用Android的API，iOS系統開發基于Objective-C或者Swift語言，底層調用iOS提供的API。

優點：

■ 直接依托于操作系統，交互性最強，性能最好，體驗最優。

■ 直接調用本地資源接口，功能最為強大。

■ 經過應用商店審核把關，安全性較高。

缺點：

■ 開發與維護成本高，無法跨平臺，不同平臺Android和iOS上都要各自獨立開發維護。

■ 版本更新煩瑣不及時。Android中可以選擇直接下載整個APK進行更新，但是也會有更新提示。iOS中，必須通過AppStore更新并審核。

■ 原生應用內容，不支持搜索引擎。

3.6.2 Hybrid App

Hybrid App（混合開發）模式是指使用JS等網頁語言開發實現出類似原生效果的系統，開發框架中混合了業務領域語言（DSL）與原生語言。混合模式的App也要通過應用商店分發給用戶安裝。Hybrid App兼具了Native App功能體驗好與Web App使用HTML5跨平臺開發低成本的優勢。

優點：

■ 開發與維護成本較低。Hybrid模式下，由原生語言提供統一的API給JS調用，實際的主要邏輯由H5來完成，只需要一套代碼，多端適用，可以有效利用Web開發資源。

■ 功能更加完善，性能和體驗比Web網站好。可以調用原生API實現原生App的功能，另外性能也更接近原生App。

缺點：

■ 整體處于原生開發與H5 Web站之間，相比原生功能體驗和性能仍有差距。

■ 開發框架中混合了DSL與原生語言，架構較復雜，具有一定的侵入性。

混合模式開發可以分為四類模式。

（1）原生為主內嵌網頁的模式

原生語言作為架構基礎，實現頁面框架、首頁、設備調用等功能，而H5頁面實現主要業務。交互強、性能要求高的界面用原生開發，業務變化較頻繁的界面用H5開發。在人員配備上需要最少的原生開發人員，大量人員進行H5開發。這種模式因為侵入性較小所以系統最為穩定，可根據情況選擇使用原生還是使用網頁開發，所以較為靈活，同時此種模式可以復用前端開發人員，是主流的開發模式。

（2）JavaScript橋接與WebView渲染模式

如圖3-10所示，PhoneGap、Cordova、Ionic等平臺基于WebView進行UI渲染，使用JaveScript橋接原生服務，WebView是一個瀏覽器內核。在開發時使用Web方式處理實際的邏輯，UI通過內嵌WebView瀏覽器來顯示HTML代碼。同時為獲取原生能力，通過JavaScriptCore橋接到原生系統，獲取服務。

（3）完全JavaScript橋接模式

ReactNative與Week等平臺舍棄使用WebView，使用JavaScriptCore調用系統UI控件和系統服務，UI最終會渲染成原生的控件。如圖3-11所示。

ReactNative與Week在前端分別采用React和Vue作為DSL，這兩種DSL都會生成Virtual DOM。React和Vue中虛擬DOM最終會映射為瀏覽器DOM樹，而ReactNative與Week中的虛擬DOM會通過JavaScriptCore映射為原生控件樹。JavaScriptCore是一個JavaScript解釋器，為JavaScript提供運行環境，也是JavaScript與原生服務之間通信的橋梁，UI顯示也要通過這個橋梁調用原生OEM widgets。通常情況下，訪問widgets的頻率非常高，尤其是在動畫與滑動操作場景，通過JS橋接可能會導致性能問題。

（4）原生編譯模式

Google出品的Flutter不使用原生的OEM Widgets（或DOM WebViews），而是使用自己的Engine來繪制Widgets，Flutter Engine直接對接系統層的畫布和事件，定制自己的Widget，如圖3-12所示。

Flutter使用Dart語言開發，Dart可以被編譯（AOT，預先編譯）成不同平臺的本地代碼，讓Flutter可以直接和平臺通信而不需要一個中間的橋接過程，從而提高了性能。