桌面应用技术调查

前端/大前端跨平台桌面应用开发

主流, 趋势 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 通讯。

官网：www.electronjs.org/

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核对桌面端需要的功能和场景

前端开发桌面应用技术调查