桌面应用技术调查
前端/大前端 跨平台桌面应用开发
- 主流, 趋势 Write once, run anywhere
- 资源: 当前团队内高级开发能胜任
- 优势:
- 跨平台支持: 前端框架通常支持多平台,包括Windows、macOS和Linux等。
- 熟悉的技术栈: 前端开发者可以继续使用熟悉的Web技术,如HTML、CSS和JavaScript。
- 快速迭代: 前端框架提供了丰富的组件和库,可以快速构建出功能丰富的桌面应用。
- 轻量级: 前端框架通常较为轻量级,不会占用太多系统资源。
合适的框架对比
常见技术: NW.js,Electron,Flutter for desktop,Tauri,Wails,
Electron
由GitHub开发的开源框架,它允许使用Web技术(HTML、CSS和JavaScript)来构建跨平台的桌面应用。Electron基于Chromium和Node.js,使得开发者可以使用Web前端技术开发桌面应用,同时可以通过Node.js模块访问底层系统功能; ps: Electron 的本质很简单,就是 Chromium + Node.js 的组合,两者之间透过 IPC 通讯。
GitHub:github.com/electron/el...
语言:Nodejs + 前端任意框架
代表项目:VSCode,百度小程序 IDE,京 ME,Facebook Message
入口是JavaScript文件
社区赋能调查
- 有较多的vue3/vite等搭配方案, 可以最大化复用当前的组件
- 较大的社区及社区活跃度,大量成熟的 npm 功能模块。
Tauri
Tauri 是 2021/2022年 JavaScript 明星项目的最受欢迎项目中排名第5,在 stateofjs 2021 中 满意度和关注度排名第1, 由于 Vite,esbuild,swc,Rome 等工具的大火,让基于 Go、Rust 的高效率构建类工具进入爆发期,加上 Bundleless 的构建体验,让 Rust、Go 成为前端开发者的又一扇门。由于 Tauri 的 Rust 背景,加上构建产物小,内存占用低
官网:tauri.app/
GitHub:github.com/tauri-apps/...
语言:Rust + 前端任意框架
代表项目:Veloren, Tauri Studio, 和少量开源应用
社区中也有Vite + Tauri + Vue 3的方案, 社区模块较少
Rust 前景还是非常不错的,如 Linux内核接纳 Rust,deno采用 Rust,微软拥抱Rust,fuchsia 的 Rust 代码占比超50%,Apple 在底层 all-in rust,连续6年的 stackoverflow 最受欢迎语言。Rust学习门槛稍微有点高
NW.js
NW.js(node-webkit )是一个基于 Chromium 和 Node.js 的 Web 运行环境,可让你直接在 DOM 中调用 Node.js 模块,并可使用任何现有的 Web 技术来编写本地应用。
官网:nwjs.io/ GitHub:github.com/nwjs/nw.js 语言:Nodejs + 前端任意框架 代表项目:微信小程序 IDE,京东小程序 IDE 入口以html文件
Flutter for Desktop
从渲染原理看 Flutter 是 skia 自绘性能优于 Electron,但需要考虑下稳定性和生态和成本。 官网:flutter.dev/multi-platf... GitHub:github.com/flutter/flu... 语言:Dart 代表项目:reqable, Invoiceninja, Rive, Postman
Wails
Wails 是一个可让您使用 Go 和 Web 技术编写桌面应用的项目。 将它看作为 Go 的快并且轻量的 Electron 替代品。 您可以使用 Go 的灵活性和强大功能,结合丰富的现代前端,轻松的构建应用程序。与 Tauri 类似,Windows 上使用的是 Webview2。 官网:wails.io/ GitHub:github.com/wailsapp/wa... 语言:Go + 前端任意框架 代表产品: Novelist, Dusk
重点比较Electron 和 Tauri
- Tauri 拥有较小的打包体积, 内存占用小
- Rust的学习曲线曲折,有一定的学习成本
-
架构差异
在每个进程中暴露了 Native API(Main Native API,Renderer Native API) 引入 Node.js Web 技术实现 UI 对应场景都能找到对应的解决方案
Electron 的进程通信 渲染器进程 -> 主进程 (单向)ipcRenderer.send API 发送消息,然后使用 ipcMain.on API 接收 (双向)ipcRenderer.invoke 与 ipcMain.handle 搭配使用来完成
总结
目前倾向于根据业务场景从 Electron 和 Tauri 生态中进行技术选型, 同时结合Vite + Vue3 + Typescript设计架构;
下一步:
- 和开发同事同步和交流
- 和PM核对桌面端需要的功能和场景