從事編程那些年經歷的跨平臺開發工具框架演變歷史

前言：不知道是幸運仍是不幸，從職業生涯早期開始就經常在作各類跨平臺開發，從早期的Cordova到如今的ReactNative，從SmartTV到Android、iOS、MacOS以及Windows（還有死去的Windows Phone，我可愛的Lumia 720只能變成老年機了），雖然不敢說所有都融會貫通，但多少也累積了一些心得與想法。趁着記憶力退化忘光光以前，寫篇文章來記錄近年來跨平臺開發的發展史，順便總結一下心得，有些可能年代久遠記憶有誤或用法有更新，還請各位不吝指正。

先送上一首鄧麗君的老歌《往事只能回味》獻給你們。

從事編程那些年經歷的跨平臺開發工具框架演變歷史，你想要的都在這裏。Cordova，Xamarin，Titanium，NativeScript，React Native，Electron，uni-app，Flutter

我作了一個詳細的前因後果的分析以及優缺點對比，花了一個通宵整理的，喜歡的話，點個贊支持一下吧，感謝你們關注。

更多幹貨歡迎關注公衆號【Flutter那些事】，精彩多多，別錯過哦。

---

Cordova & Ionic(底層使用Angular)

說到跨平臺，通常人好像都會先想到這隻小機器人.

Cordova是很早期的跨平臺解決方案，它是從更早期的PhoneGap分支出來的。在我剛開始接觸跨平臺開發的那個年代（大概2012年），它是最熱門的跨平臺解決方案。爲何呢？由於它簡單好上手，並且那時候它的對手是Xamarin跟Titanium，二者都是要付費的（這兩個後面會做介紹）。

下面看看Cordova的架構圖：

Cordova的架構很簡單，就是一個簡單的Activity（爲了不麻煩，底下的架構都用Android的觀點來解釋，絕對不是我iOS不熟喔，只是內容有限，就作一部分解讀了），上面搭載一個CordovaWebView Component，他是一個改造過的WebView，加裝了一些Cordova API，讓你藉此和Native的部分交互。你的App基本上就是一個Mobile Web，只是多了一些跟Native交互的能力。

優勢： 1.好上手：前端工程師（或Web工程師，那個年代還不是你們都聽過前端這個詞）只要知道怎麼作Mobile Web(只要會Web，而後恰好遇到了Cordova，恰好一拍即合)，就能夠無痛的構建出一個跨平臺的App，Ionic入門很容易，用Web寫App簡直就是無腦操做，快得很，寫代碼就是一把梭！聽起來是否是很吸引人呢？

2.Cordova的跨平臺解決方案,尤爲是ionic，已經看起來和大部分原生app同樣了。

3.Cordova有豐富的插件去銜接Native平臺(Android和iOS)，你基本上不多去管Native的交互，社區也比較完善，仍是很不錯的。

4.使用Ionic能夠一套代碼在安卓端、iOS端、網站端、小程序端通吃，作到了「write once, run everywhere」，開發和學習成本極低。

可是事情老是沒有想像中的美好。Cordova這種簡單明瞭的架構是個兩面刃，它也有它的缺點：

Cordova(Ionic)成也WebView，敗也WebView，使用Web性能體驗不好。雖然它開發起來很快，可是終究是個Web，也成不了Native，就比如你再怎麼打扮也成不了吳彥祖，胡歌同樣的道理。那個年代Mobile設備的硬件條件很是有限，還只是1GB RAM的時代，Mobile Web的性能體驗和Native相比起來差距很是大。好比：Android上的Web UI跟Native UI比起來差別很大，好比iOS上的高延遲，掉幀，黑屏等。相同硬體條件下，iOS 上面就沒有那麼明顯的差距，緣由歸結於Android和iOS兩個平臺的底層渲染機制架構不一樣所產生的差別。

後來的改進方案：

Web工程師們也意識到了這個問題的嚴重性，在js或是css部分能夠作一些trick來作GPU加速來改善Android上的UI體驗。其中最好的固然就是Inoic了。PS：那個年代我買了第一臺小米手機，體驗一下什麼是：「爲發燒而生」，那個年代小米那個配置確實很牛逼啊（純粹爲了懷舊）。那個年代也是智能手機快速發展的時候，固然隨着而來的就是各類Mobile Web框架了，好比：JQuery Mobile、Bootstrap等等，還有各大廠推出的開源框架和工具，固然還有一些叫不出名字的。Inoic雖然推出的晚一些，不過也算是「長江後浪推前浪」，也算是不錯的了。最新的ionic4控件作的至關完美，爲了一些十分微小的UX細節不斷的改進。另外Ionic4好像有想要解決一些性能問題，推出了一個capacitor的工具，Ionic team是想作一個工具來優化web-based的跨平臺開發體驗。可是Cordova的性能部分（特別是渲染效能）基本上Ionic team這邊應該是不太能作什麼大的改進的，由於框架就是那樣設計的。或許在js或是css部分能夠作一些trick來作加速（他們也確實花了不少工在這上面），可是總體的性能仍是依賴於平臺上的WebView。以前有人提出把Cordova webview替換成Chromium，雖然會形成app體積臃腫，不過也在必定程度上提高了性能。固然功能是知足不了需求的，也能夠經過原生插件來進行修補。

【Phonegap、Ionic、Angular和Cordova的區別和聯繫】：

不少人都搞不清楚的問題，在這裏我也幫你們解答一下：Phonegap、Ionic、Angular和Cordova的究竟有什麼區別和聯繫？

Phonegap本來由Nitobi公司開發的，如今由Adobe擁有，它是一個使用HTML、Javascript、CSS等Web API開發跨平臺的移動應用程序的框架。 2011年，Adobe/Nitobi把PhoneGap的源代碼貢獻給Apache軟件基金會（ASF）託管，後來社區將這份開源的代碼取名位：「Cordova」。PhoneGap是Apache Cordova的一個分支。你能夠這樣想，Apache Cordova是一臺發動機，運行在PhoneGap上，就像WebKit瀏覽器引擎運行在Chrome瀏覽器和Safari瀏覽器上。

Ionic 是一個全堆棧的混合應用開發框架， Ionic = Cordova + Angular + Ionic UI，Ionic主要功能是負責頁面的實現。

Angular 是一個JavaScript的前端框架。

Cordova提供了一組原生設備相關的API，經過這些API可使用JavaScript訪問原生的設備功能，如攝像頭、麥克風等。同時Cordova負責將實現的頁面包裝成原生應用（Android是apk的形式；iOS是ipa的形式）。

簡單的打個比方吧：就像你吃柚子同樣，最內層的柚子瓤是Angular，柚子瓤外面的一層皮就是Ionic，而最外層的厚厚的柚子皮就是Cordova。

在那個年代Cordova風風火火了一陣子，可是在在架構及硬體環境下呈現出來的視覺表現，不太樂觀，遠遠比不上原平生臺的體驗，因此給人一種「跨平臺=效果差勁」的錯覺。後來其餘的跨平臺推出時的時候，不少開發者都會說：「我以前使用Cordova，那個體驗太差了，我寧願原生的作，也不作跨平臺了」，因此說成了WebView，敗也WebView，樹大招風，Cordova招你惹你了，竟然躺槍，看來火起來了在哪裏都被提起，躲都躲不過啊。

---

Xamarin

接下來登場的是C#家族的框架「Xamarin」了。

Xamarin跟Cordova差很少是同一個時期的產物，它在被微軟收購以前，就已是小有名氣的跨平臺框架了，不過跟開源的Cordova不一樣，Xamarin當時是須要收費的，這也多是它的名氣不如Cordova的緣由吧。另外一個Xamarin沒有紅起來的緣由是：它使用C#當主導開發語言。

PS：我不是針對C#,不是說它很差，我也用過C#寫過程序，很像Java語言的。當年就是借鑑Java語言出道的（Java：你C#能夠模仿個人臉，你不能模仿個人靈魂）。在.NET Core還沒出現以前,C#家族的產物都是相對的比較封閉的，開源的資源比較少，相比當時的慢慢火起來的Javascript來講，簡直是太少了，這就形成了Xmamrin先天上的劣勢。

Xamarin android端架構圖：

Xamarin iOS端架構圖：

從圖中能夠看出Xamarin比Cordova複雜多了，有一組完整的Android & Java binding，還有一個跨平臺的.NET runtime — Mono。Xamarin大體上分紅幾個部分：Xamarin.Android、Xamarin.iOS、Xamarin.Mac（後來纔出現的）以及Xamarin.Forms。

感興趣的能夠看看官網介紹：dotnet.microsoft.com/apps/xamari…

這裏我又要來順便科普一下，Xamarin和Cordova都出現過更名風波，確定有人會問的Xamarin的幾個框架之間的關係：

【.NET Framework、.NET Core、Mono、Xamarin之間的區別和聯繫】：

.NET Framework:微軟2002年2月發佈第一個版本，只支持在Windows平臺上開發和運行（重點圈起來：閉源，商業化）。

Mono：Mono是一個開源框架，它是第三方公司Ximian發佈的，最先在2004年6月發佈了Mono 1.0版本，支持在Linux、Windows、Unix、Android等平臺。（野生版的.NET Framework開源實現）

.NET Core：微軟在2014年將.NET Core開源，2016年6月發佈其實現.NET Core 1.0。內容包括跨平臺虛擬機CoreCLR、.NET Framework APIs的實現子集以及新增類庫等。（重點：開源，基於.NET Framework新增一些類庫）

Xamarin：Xamarin的前身是Mono，Mono項目幾經轉手，2011年落入Xamarin公司手中，2016年2月，微軟正式收購Xamarin。支持包括Windows、Linux、macOS、iOS、Android在內的各類主流平臺和操做系統。

爲了更好地說明這個問題，借鑑網友的一張圖表示： 此圖片來源於博主：www.cnblogs.com/wer-ltm/p/8…

最後來看看優勢：

1.使用C＃編寫代碼，能夠重複利用多達96％的源代碼加快工程週期。同時Xamarin使維護和更新變得更加簡單。

2.性能接近原生。它的性能損耗比起Cordova少的多。Cordova必須承擔Web Rendering所帶來的巨大損耗，但Xamarin只有跨語言層面的損耗而已，相較起來至關輕微，這也是它在視覺渲染上帶來的優點。好比：使用Xamarin.Forms工具構建，該工具可在應用程序運行時將應用程序UI組件轉換爲平臺特定的界面元素。

3.豐富內置功能。Xamarin組件提供了數千個自定義UI控件，各類圖表，圖形，主題和其餘強大的功能，能夠僅添加到應用程序中點擊次數不多。這包括內置支付處理（如Stripe），信標和可穿戴設備集成，開箱即用推送通知服務，雲存儲解決方案，多媒體串流功能等等

再來看看缺點：

1.與第三方庫和工具的兼容性問題：之前是新的Native API必須等待官方的封裝才能使用，不過如今Xamarin也開源了，可是仍是比較慢。另外，儘管Xamarin擁有本身的組件商店，但您可能須要在您的應用中須要特定的功能或整合，而這些平臺並未提供這些功能或整合，因此這一點就很蛋疼了。有些網友也給我反饋過：android和iOS的一些交互細節也會不太好。

2.對原平生臺的最新更新的支持不會很及時。這徹底取決於Xamarin開發團隊，這些更改和/或引入新的插件等須要一些時間，儘管Xamarin聲稱提供當天的支持，但仍然可能有些延誤。

2.Xamarin開源生態系統問題。Xamarin社區比iOS或Android的小得多。所以，找到一個有經驗的Xamarin開發人員多是一個挑戰。

4.應用程序比較大。Xamarin應用程序一般比Native應用程序大，好比：Android的一個簡單的「hello，world」應用程序最多可能須要16 MB。

5.不適用於重圖形應用程序。在Xamarin中構建遊戲，豐富的自定義用戶界面或複雜的動畫變有很大的限制。

6.使用MvvmCross(www.mvvmcross.com/)，須要作兩套界面，android性能有所提升，但佔用資源少，第三方的庫轉換麻煩。MvvmCross是專門爲Xamarin和移動生態系統開發的框架。它支持Xamarin.iOS，Xamarin.Android，Xamarin.Mac，Xamarin.Forms，通用Windows平臺（UWP）和Windows Presentation Framework（WPF）。

---

Titanium

Titanium的logo就是下面這個：

對不起，我跟這個不熟，只記得當初也是要收費的，而後走的是JS to Native Binding的形式，但是據說雷超級多，就沒有去踩了，若是有曾經用過的朋友們，能夠來聊聊你的體驗。我之外的發現了github有開源代碼，難道如今開始開源了？github代碼以下所示： github.com/appcelerato…

如下優缺點總結來源於博客： devblog.axway.com/mobile-apps…

優勢：

1.直接調用原平生臺特性和功能，無需其餘的工具。Titanium的目的是爲跨平臺的原生移動開發提供一種更高級的API，因此你能夠直接訪問一系列普遍的原生特性和功能，從用戶界面組件、插座接口到通知系統集成。Titanium的目的是，將Titanium應用程序和純原生應用程序之間在功能方面的差別縮小到幾乎爲零。

2.集成和擴展很方便。因爲Titanium能夠用插入到與應用程序其他部分同樣的視圖層次體系的可視組件來擴展，你最終可以在底層原平生臺上實現任何可能的用戶界面。須要使用特殊的原生代碼，讓表格視圖（TableView）以60fps的速度滾動？你能作到這一點。想無縫地集成遊戲的OpenGL繪製曲面，同時用JavaScript保留運行循環的邏輯？你能作到這一點。你能夠把這些用戶界面擴展直接集成到用核心Titanium API編寫的應用程序中。

3.接近原生體驗。使用經常使用的用戶界面窗口組件時，Titanium應用程序的外觀和感受也是這種平臺的一個優勢。不用進行可視仿真（或經過應用CSS，或者使用OpenGL或Flash渲染用戶界面窗口組件）。當你建立NavigationGroup時，它獲得iOS上的實際UINavigationController的支持。動畫和行爲與原生應用程序用戶預期的相一致，由於你使用一樣的用戶界面控件。

4.入手門檻低。因爲Titanium經過JavaScript提供了一種高級的原生編程API，爲用過基於ECMAScript的語言的任何人大大下降了原生編程方面的准入門檻。

缺點：

1.Titanium API的範圍使得添加新平臺有難度。在一種新的原平生臺上實現Titanium API是項艱鉅任務。正因爲如此，Titanium平臺只出如今目前被認爲最重要的移動平臺上：iOS、Android和Web。

2.移動Web瀏覽器支持尚未達到能夠投放市場的質量。Titanium在繼續致力於改進咱們的用戶界面窗口組件集的性能和感受上，同時完善核心Titanium API的實現。

3.因爲Titanium提供的抽象層很龐大Titanium的內部框架仍存在API實現未達到最佳標準的問題。在一些狀況下，一些用戶界面組件還沒法作到性能與原生用戶界面組件同樣好，好比佈局高度定製化的很是龐大的表格視圖。優化核心的用戶界面組件對Titanium團隊來講還是首要的技術任務。

4.另外因爲Titanium平臺的宏偉目標，擴展Titanium並不是易事。想有效地集成一種新的原生控件或API，深刻了解Titanium的架構和環境必不可少。開發者體驗、API文檔和麪向模塊開發者的整體指南。

---

NativeScript(三個方向：js/ts或Angular或Vue)

網友對 NativeScript 的評價：

若是自己是走Angular陣營的話，NativeScript是一個至關值得嘗試的東西。

【待完成】

---

Election

Electron：PC跨平臺。

【待完成】

---

uni-app(底層使用Vue)

後來朋友推薦使用HBuilder工具（後來升級爲HBuilderX），開發很方便，而後我就去HBuilder工具官網搜索了一下，發現了一個叫作uni-app的框架，uni-app是一個使用Vue.js開發全部前端應用的框架，開發者編寫一套代碼，可發佈到iOS，Android，H5，以及各類小程序（微信/支付寶/百度/頭條/ QQ /釘釘）等多個平臺，簡直就是Web極致跨端口的工具（算不上真正意義的跨平臺，可是比前面的Cordova感受要厲害一些，畢竟多吃了紀幾年飯，研究出來的東西就是不同啊。。。O(∩_∩)O哈哈~）。能夠說uni-app是懶人必備吧，它使用Vue.js編寫你的業務代碼。

先來講說它的優勢：

1.使用HBuilderX工具開發，一鍵建立項目模板，快捷方便，HBuilderX和uni-app都是同一家公司推出的，該公司還有其餘一些框架，均可以使用HBuilderX建立你要的項目類型以及編寫你的代碼。

2.uni-app對前端開發人員比較友好，封裝的組件和微信小程序的組件一毛同樣，熟悉小程序的朋友應該會以爲很不錯。

3.uni-app拓展能力強，封裝了H5+,支持nvue，也支持原生Android，ios開發。能夠將原有的移動應用和H5應用改爲uni-app應用。uni-app的App端，內置一個完整小程序引擎，並補充了可選的weex引擎給對性能要求更高的開發者。這也是uni-app在App端可以正常運行微信小程序代碼的緣由。其餘Web跨平臺框架作不到這點。

再說說它的缺點：

1.使用Vue開發，你必需要熟悉h5，vue，小程序，學習成本很高。若是不熟悉這些話，須要花時間學習新框架，好比小程序、Vue都要學習。

2.uni-app問世的時間還比較短，移動端平臺的兼容性有不少地方還不是完善，坑不少，在Android平臺上表現較微信小程序和iOS上差，須要完善。

3.性能仍是一個問題。畢竟uni-app底層使用的js，就算可以編譯成原生程序，那個性能和兼容性方面也是個問題，若是隻是作Web還行，小程序什麼的還算出色。

---

React Native(底層使用React)

React Native：手機端跨平臺。

網友對 React Native 的評價：

React Native,要和原生相結合，沒辦法本身寫pugin，要依賴第三方的特性。不過做爲一個跨平臺的過渡框架，能夠說應有盡有了。雖然還不夠完美，可是高擴展性以及廣大的社羣支撐，這也成了一個好框架很大的優點所在。

【待完成】

---

Weex(底層使用Vue)

【待完成】

---

Flutter

網友對 Flutter 的評價：

Flutter是Google的親兒子，目前最火爆的跨平臺框架，也是跨平臺框架中最接近原生的一種框架，也是效率最高的。目前應用在移動端(安卓端，iOS端)，Web也發佈了預覽版，可是還沒法真正放在小程序或者Web項目中實戰。目前來看，Web上面仍是沒法真正的替代ionic框架。雖然脫離了JS強大的社區,可是這一年多以來Dart語言社區也在逐漸長大，pub.dev上面各類Flutter和Dart的開源庫和工具都有，開發項目起來仍是不錯的，只是Flutter Web發展還不夠完善，不少Web的一些包一級瀏覽器的功能還不完善。

網友對 Flutter 的評價：

我是作前端的，我朋友是移動端的，他走的Flutter路線，他是作安卓開發的，用的java，他說Flutter接近原生體驗，很是好。而咱們公司須要快速上線，仍是走的是WebView的路線，我和他同時作一個小Demo出來對比了一下，發現App的性能體驗真的很大，排序以下：原生 >= Flutter > WebView。

【待完成】

---

最後來提幾個問題？

1.跨平臺最難的就是各平臺之間的差別性這個問題如何解決？

2.Cordova 和 RN, NativeScript 有什麼不一樣呢?