客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析

摘要:
本机开发应用程序开发Microsoft阵营的WinformWinForm是网络开发平台中WindowsForm的一个术语。WPF基于XML+C#+CSS的表示模式使其在UI上具有更灵活的设计宽度。WPF和WinForms是两种完全不同的UI技术,WPF不能完全取代WinForms。ElectronElectron是由Github开发的开源库,它使用HTML、CSS和JavaScript构建跨平台桌面应用程序。因此,发展速度快,招聘人员方便。应用程序的配置保存在配置中。xml文件。对于webapp的开发者来说,所谓的“跨平台”是在不关注系统底层调用的实现细节的情况下实现的。应用程序启动后,核心执行两件事:读取配置。xml和loadUrl。

原生开发应用开发

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 之上的,一个负责界面,一个负责背后的逻辑

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篇)》,这里关于原理这是简介。

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

这玩意,个人觉得没有啥奔头。

参考文章:

快速了解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

免责声明:文章转载自《客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Numpy入门学习之(二)linalg库----向量范数、矩阵范数、行列式、矩阵逆、幂Visual Studio Code 必备插件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

android 系统重启与关机:java 代码实现

在应用层如何通过代码实现 android 系统的重启,分享给大家。 这篇博客是在 android 系统开发的基础之上进行实践的,所以如果你是纯粹的 app 开发,可能要让你失望了。 该代码在真机上测试成功,在模拟器上面测试失败。 在 linux 下面,重启 pc,非 root 用户需要执行 sudo reboot,所以在 android 下重启机器也需...

记录 vue新建项目+electron打包桌面软件

1.node.js 安装好的情况下 安装脚手架vue-cli npm install -g @vue/cli (安装失败的话给"@vue/cli" 加上引号试试) 2.创建项目    vue create 项目名 (然后是一堆英文选项是否生成router之类的。参考下面博客) 3.进入项目根目录(electron-vue-helloworld),然后执行...

高分屏显示模糊修复工具

高分屏显示模糊修复工具下载 此现象是由于系统自带的放大功能导致,由于笔记本屏幕较小,高分屏会出现图标、应用等整体显示比较小的情况,所以系统会默认设置为150%的放大显示,如果部分应用的显示界面分辨率不高,放大后就会模糊,这是正常的现象,笔记本高分屏使用windows系统都会有类似情况。 可使用以下工具调整缩放比例为100%或125%或者禁用软件的DPI缩放...

COLA 4.0:应用架构的最佳实践

应用架构的本质 什么是架构?十个人可能有十个回答,架构在技术的语境下,就和架构师一样魔幻。我曾经看过一本技术书,用了一章的篇幅讨论架构的定义,最终也没有说明白。 实际上,定义架构也没那么难,如下图所示,架构的本质,简单来说,就是要素结构。所谓的要素(Components)是指架构中的主要元素,结构是指要素之间的相互关系(Relationship)。 例如组...

Android如何查看应用签名信息

转自http://www.trinea.cn/android/android-view-signatures/comment-page-1/ 介绍Android如何查看自己的应用签名及三方APK或系统APK签名信息,包含其中的MD5、SHA1、SHA256值和签名算法等信息。1、查看自己的应用签名可以通过两种方式查看(1) debug的apk通过Eclip...

使用电脑模拟微信内置浏览器

最近在弄微信开发,需要微信请求,其实很好改 只要把请求头改了就好了。 浏览器呢 就使用 chrome我在这使用360极速浏览器了。 首先进入开发者模式(F12或者右键审查元素) 如图: 然后 点击 更多 选 More tools 打开Network conditions 最后设置请求为微信请求: 最后那个请求是自...