客戶端軟件GUI開發技術漫談：原生與跨平台解決方案分析

原生開發應用開發

Microsoft陣營的

Winform

WinForm是·Net開發平台中對Windows Form的一種稱謂。

如果你想深入的美化UI，需要耗費很大的力氣，對於目前主流的CSS樣式表來講，美化Winform的界面以及自定義控件是需要耗費更多的時間的。

WPF

基於XML+C#+CSS的呈現方式讓它在UI上有了更加靈活的設計寬度

WPF和WinForms是兩種完全不一樣的UI技術，WPF也並不能完全取代WinForms。

WPF不能運行在其他操作系統，並且在XAML中編寫樣式表，通用性還是不如HTML強，從學習應用的范圍來講，還是HTML更好一些。

UWP

微軟為了針對移動端市場開放的開發框架，如果你的APP只需要運行在Windows下，我認為WPF或者UWP是最好的選擇，畢竟在調用系統原生API上微軟的親兒子們有着巨大的優勢。

windows上各種各樣的技術開發的IDE和其他程序

• 性能上：Java最差 -> Electron -> WindowsForms -> 原生 -> WPF

• 占內存：Java最多 -> Electron -> WPF -> WindowsForms -> 原生

Java陣營

Swing

零幾年學Java的老頭子們幾乎都是從Swing開始學起的，Swing謎一般的默認UI審美觀讓我直接放棄了繼續學習下去的動力。

JavaFx

優點在於可以跨平台，缺點在於整個生態環境非常不好，與Winforms一樣，自定義一些控件相對比較困難。

Adobe陣營

Air

Flex程序，它的優點在於可以跨平台，可以基於Flash做出很多超級炫酷的動畫特效，但是缺點主要就是效率實在是太低下了，並且在調用操作系統原生API的時候也非常不方便。隨着Flash在瀏覽器上的節節敗退，Air也悄無聲息的消失在了大眾的視野當中。

Apple

Objective-C（或現在的Swift），跟Winforms一樣，可以非常方便的調用操作系統底層API，劣勢也一樣，不跨平台、自定義控件比較復雜，可用資源太少。現在大多數程序員都是基於C#、Java進行開發，如果不是Apple死忠，根部不會花大力氣研究

跨平台軟件應用開發

直接元素開發肯定是最好的——這樣的性能肯定最有保證，但是跨平台的主要優勢在於代碼邏輯的復用，減少各平台同一邏輯，因人而異的開發成本。對於企業而言，一套業務邏輯可以在多處使用是最理想也是最保險的。

Electron

Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平台桌面應用程序的一個開源庫。 Electron通過將Chromium和Node.js合並到同一個運行時環境中，並將其打包為Mac，Windows和Linux系統下的應用來實現這一目的。通過Node它提供了通常瀏覽器所不能提供的能力。 

electron的特點就是可以復用前端的各種輪子。所以它開發快，招人方便。

可以方便的通過Node.JS調用系統API、可以使用SQLite做本地字典項的緩存處理，可以將復雜的計算邏輯放在客戶端進行，從而減輕服務器端的壓力等等。

electron都成千上萬個成熟項目在桌面里用了，什么flutter，javafx，swiftui，目前還是無法比

electron和node-webkit（現在叫nw.js）的區別：

。從概念上，Electron與nw.js很相似，但是他們有很重要的區別：一個主要的不同點是Electron 通過 Googles Chromium Content Module 來使用 Chromium 的功能，nw.js 則直接使用了 Chromium本身。

electron建立在 Chromium 和 NodeJS 之上的，一個負責界面，一個負責背后的邏輯

 

 

Cordova，PhoneGap

Cordova[ˈkɔːdəbə]是 hybride 類框架，基於HTML，CSS和JavaScript的，創建移動跨平台移動應用程序的快速開發平台

2011年10月4日Adobe公司收購了PhoneGap和PhoneGap Build的新創公司Nitobi Software，隨后將Phonegap的核心代碼剝離並捐給了Apache公司，並改名為了Cordova。

核心的東西就是H5與Native的交互原理、Bridge、定義的解析規則（Engine）

 

Cordova Application是Cordova框架獨立於不同手機操作系統的一個封裝層。具體包括 

• Web App層是開發人員編寫代碼的主要地方，應用程序以網頁的形式呈現，在一個index.html的本地頁面文件中引用所需要的各種Web資源，如CSS、JavaScript、圖像、影音文件等。應用程序的配置保存在config.xml文件中。

  對於使用cordova cli初始化的web app 在主目錄下會存在一個config.xml，其中包含了整個app的一些基本信息：比如appName、app入口文件、白名單、webview初始化的一些配置、plugin信息、圖標資源信息

• WebView層用來呈現用戶界面，即web頁面的展現。例如，在Android平台是通過WebView控件實現web頁面的呈現。

• Plugins主要用於在JavaScript代碼中調用各平台native的功能。Cordova項目已經包含一些核心的plugin，如電池、攝像頭、通訊錄等。開發人員也可以開發自定義的plugin，來實現所需要的功能。 

Mobile OS就是具體的手機操作系統層

Cordova預先幫我們預先封裝了各種mobile os上最常用的本地api調用，然后以統一的JavaScript api形式提供給webapp開發者調用。

對於webapp的開發者來說，無需關注系統底層調用實現細節，也就實現了所謂的“跨平台”。實際上，各平台涉及到本地能力的調用，以插件形式被封裝了。（每個插件的實現實際上還是Native模式）。

JS和Native是如何實現互調的，這里先研究安卓的

Cordova-Android是通過addJavascriptInterface（Android Webview的API）和JS Prompt這兩種方式來實現JS對於Native API的調用。

我們先來看一個Cordova-Android框架中的一個關鍵類： CordovaActivity.java。

該類繼承了Android Activty類，實際上是Cordova-Android的Launcher Activity，也就是啟動入口activity。

應用啟動后，核心干了兩件事：讀取config.xml和loadUrl。這個loadUrl實際上就是加載webapp的啟動頁（默認是index.html）。

IOS具體參看《Cordova 工作原理(IOS篇)》，這里關於原理這是簡介。

Xamarin

Xamarin ['zæmərɪn]是一個開放源代碼平台，用於通過 .NET 構建適用於 iOS、Android 和 Windows 的新式高性能應用程序。

Xamarin主要有這么幾項技術，Xamarin.Android、Xamarin.iOS和Xamarin.Forms，此外還有Xamarin.UWP、Xamarin.Windows、Xamarin.WinPhone等。本質都是對原生API做了一層C#的封裝，因此在使用上與原生API會十分相似。這種封裝會結合一些C#的語法特性，讓開發者可以享受C#的語法糖。Xamarin.iOS是直接編譯成ARM的二進制代碼，因此執行效率肯定是非常高的。

Xamarin.Android被編譯成中間語言，Xamarin在APK安裝包中會包含一個mono（跨平台的.NET運行環境），代碼是在mono運行時和安卓本地的運行時上完成工作的。

Mono [ˈmɒnəʊ] 虛擬機包含一個實時編譯引擎，該引擎可用於如下處理器：x86，SPARC，PowerPC，ARM，S390（32位模式和64位模式），x86-64，IA64 和64位模式的 SPARC。該虛擬機可以將代碼實時編譯或者預先編譯到原生代碼。對於那些沒有列出來的系統，則使用的是代碼解釋器。

Xamarin 是一個抽象層，可管理共享代碼與基礎平台代碼的通信。 Xamarin 在提供便利（如內存分配和垃圾回收）的托管環境中運行。

Xamarin始創於2011年，旨在使移動開發變得難以置信地迅捷和簡單。

Xamarin 適用於具有以下目標的開發人員：

• 跨平台共享代碼、測試和業務邏輯。

• 使用 Visual Studio 在 C# 中編寫跨平台應用程序。

 Xamarin 允許在每個平台上創建本機 UI，並在 C# 中編寫跨平台共享的業務邏輯。 在大多數情況下，80% 的應用程序代碼可使用 Xamarin 進行共享。

Xamarin最為關鍵的技術Xamarin.Forms，把IOS、android、UWP等平台的GUI進行了一統地抽象，開發者只需要寫一套代碼，編譯器會在編譯時將界面映射到原先控件上，從而獲得原生平台的外觀和性能。

Xamarin 在 .NET 的基礎之上進行構建，它自動處理諸如內存分配、垃圾回收以及與基礎平台的互操作性等任務。

Xamarin之前是收費的，而且據說收費不菲，所以使用的人數比較少，在國內幾乎無人問津。后來Xamarin被微軟收購，現已免費開放，但是從白學.net開始，就對微軟的東西不感冒了。微軟的東西雖好，但是叫好不叫座。

Flutter

flutter 其實就是一套谷歌開源的跨平台 UI 開發框架，支持 Android 和 iOS ，並且目前開始支持 Web 和 MacOS，未來還會繼續支持 Win和 Linux 平台的一套 UI 框架。

Dart UI是一個 C++實現的 dart:ui庫的 Native Binding，並且 UI Lib也是 Dart GUI程序的應用主要入口。

Dart UI向上層提供了 window、text、canvas、geometry等通用的繪圖能力， Runtime在調用 Dart UI時，Dart UI根據傳遞的 main entrypoint 來執行並且向 window渲染圖像。

react-native 、weex 和 flutter 都只是 UI 框架，它解決的其實是跨平台上的 UI 實現，讓界面布局或者實現的業務邏輯可以在多端統一。但是它也僅僅只是 UI 框架，比如 react-native 本身就是依賴於原生控件，而 flutter 的 webview 、mapview 也都需要依賴原生開發來支撐。

Dart這門語言最初就是一幫Java程序員為了方便寫UI搞出來的。如果你們團隊Java/Swift程序員比較多，那Flutter從上手方面來說更快。

為什么選擇Dart

• Dart 的性能更好。Dart在 JIT模式下，速度與 JavaScript基本持平。但是 Dart支持 AOT，當以 AOT模式運行時，JavaScript便遠遠追不上了。

• Native Binding。在 Android上，v8的 Native Binding可以很好地實現，但是 iOS上的 JavaScriptCore不可以，所以如果使用 JavaScript，Flutter 基礎框架的代碼模式就很難統一了。而 Dart的 Native Binding可以很好地通過 Dart Lib實現。

• Fuchsia [ˈfjuːʃə] OS內置的應用瀏覽器就是使用 Dart語言作為 App的開發語言。而且實際上，Flutter是 Fuchisa OS的應用框架概念上的一個子集。

• Dart是類型安全的語言，擁有完善的包管理和諸多特性。Google召集了如此多個編程語言界的設計專家開發出這樣一門語言，旨在取代 JavaScript，所以 Fuchsia OS內置了 Dart。Dart可以作為 embedded lib嵌入應用，而不用只能隨着系統升級才能獲得更新，這也是優勢之一。

Skia是什么？

Skia是一個 2D的繪圖引擎庫，其前身是一個向量繪圖軟件，Chrome和 Android均采用 Skia作為繪圖引擎。Skia提供了非常友好的 API，並且在圖形轉換、文字渲染、位圖渲染方面都提供了友好、高效的表現。Skia是跨平台的，所以可以被嵌入到 Flutter的 iOS SDK中，而不用去研究 iOS閉源的 Core Graphics / Core Animation。因為Android自帶了 Skia，所以 Flutter Android SDK要比 iOS SDK小很多。

QT C++

QT最大的優勢就是跨平台！高效率！但是與Objective-C一樣，CPP如同一座小山橫在了眾多server side程序員的面前，如果沒有CPP這道小山橫貫在前，我認為QT是最好的Desktop Application特別是嵌入式終端的UI開發框架。

QT另外有一個優勢在於，它在UI上似乎要比之前幾位要方便一些，在它的QML中甚至可以直接使用JavaScript（當然，Java也內置了JS引擎），同時QT中也包含了大量的標准CSS樣式表可以使用

如果希望自己從事真正意義上的Desktop Application development，QT絕對值得你去學習。

QT有可視化編輯器，但是相比較而言，可能略強於NetBeans的Swing，但是跟VS比起來還是差太遠了，不過大多是實際開發都是基於代碼的

x-platform

這玩意，個人覺得沒有啥奔頭。

 

 

參考文章：

快速了解Electron：新一代基於Web的跨平台桌面技術 https://www.cnblogs.com/imstudy/p/11022315.html

Flutter原理簡解 https://zhuanlan.zhihu.com/p/36861174

 

 

轉載本站文章《客戶端軟件GUI開發技術漫談：原生與跨平台解決方案分析》,
請注明出處：https://www.zhoulujun.cn/html/webfront/engineer/Architecture/8468.html