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


原生開發應用開發

Microsoft陣營的

Winform

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

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

WPF

基於XML+C#+CSS的呈現方式讓它在UI上有了更加靈活的設計寬度。具體看官方:https://github.com/dotnet/wpf

WPF技術架構

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的特點就是可以復用前端的各種輪子。所以它開發快,招人方便。還有.net :https://github.com/ElectronNET/Electron.NET

可以方便的通過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 之上的,一個負責界面,一個負責背后的邏輯

Electron的運行原理

 

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架構設計

 

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篇)》,這里關於原理這是簡介。

 

React-Native

 React-Native厲害在於它能打通JS和Native Code, 讓JS能夠調用豐富的原生接口,充分發揮硬件的能力, 實現非常復雜的效果,同時能保證效率和跨平台性。

在一定程度上,React Native和NodeJS有異曲同工之妙。它們都是通過擴展JavaScript Engine, 使它具備強大的本地資源和原生接口調用能力,然后結合JavaScript豐富的庫和社區和及其穩定的跨平台能力,把javascript的魔力在瀏覽器之外的地方充分發揮出來

React Native 架構

React Native 渲染 在 React 框架中,JSX 源碼通過 React 框架最終渲染到了瀏覽器的真實 DOM 中

React 可以渲染到多平台上

在 React Native 框架中,JSX 源碼通過 React Native 框架編譯后,通過對應平台的 Bridge 實現了與原生框架的通信。如果我們在程序中調用了 React Native 提供的 API,那么 React Native 框架就通過 Bridge 調用原生框架中的方法。 因為 React Native 的底層為 React 框架,所以如果是 UI 層的變更,那么就映射為虛擬 DOM 后進行 diff 算法,diff 算法計算出變動后的 JSON 映射文件,最終由 Native 層將此 JSON 文件映射渲染到原生 App 的頁面元素上,最終實現了在項目中只需要控制 state 以及 props 的變更來引起 iOS 與 Android 平台的 UI 變更。 編寫的 React Native代碼最終會打包生成一個 main.bundle.js 文件供 App 加載,此文件可以在 App 設備本地,也可以存放於服務器上供 App 下載更新

大多數組件都類似HTML,例如View組件跟div標簽就很類似,Text組件類似於p標簽。

React Native 框架構成A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.

具體參看《ReactJS到React-Native 零碎筆記 》

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 體系結構示意圖

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 也都需要依賴原生開發來支撐。

Flutter的原理 Flutter是如何設計

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

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

Avalonia

知乎有道友留言,提到Avalonia,個人之前確實沒有聽說過。看官方資料:https://github.com/AvaloniaUI/Avalonia,Examples of UIs built with Avalonia,確實蠻漂亮的。

Avalonia是一個基於WPFXAML的跨平台UI框架,並支持多種操作系統:Windows(.NETFramework,.NETCore),Linux(GTK),MacOS,Android和iOS。

不過個人對微軟的 .net 都是過敏狀態。2014 微軟向Open SDK 投懷送抱后,微軟向Java 環境貢獻越來越多。微軟現在越來越開放。

NET 5 是 .NET Core 的下一步。該項目旨在通過以下幾個關鍵方式改進 .NET:

  • 制造一個可在任何地方使用的 .NET 運行時和框架,並具有統一的運行時行為和開發人員體驗。

  • 通過充分利用 .NET Core、.NET Framework、Xamarin 和 Mono 來擴展 .NET 的功能。

  • 從單個代碼庫構建該產品,開發人員( Microsoft 和社區)可以一起工作並一起擴展,從而改進所有方案。

目前沒有選擇.net 技術棧的打算。過幾年拼不動了,在去學下.net,去個壓力小點的公司,或許是比送外賣好的結局把

 

參考文章:

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

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

https://zhuanlan.zhihu.com/p/65010663

 

原文地址:https://www.zhoulujun.cn/html/webfront/engineer/Architecture/8468.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM