丢掉WebView,使用JS+Rust开发跨端桌面应用-Deft

简介

随着Web技术的发展，越来越多的跨端应用选择了WebView作为基础解决方案。诚然WebView让跨端应用开发变得简单了很多，极大的提高了开发效率，但是，WebView也存在着一些广为诟病的缺点，比如内存占用大，包体积大，系统调用不方便等。所以，Deft诞生了。
Deft是一个高性能跨平台开源UI框架，底层使用Rust开发，支持使用JS/React开发界面，目前支持Linux,Windows,MacOS和Android等系统。为了提高性能，Deft提供了便捷高效的方式使用Rust开发API和UI组件。
快速开始

开始前，系统需要先安装nodejs,Rust,clang14+，如果未安装，直接去官网下载安装即可。
执行下面命令，快速创建新工程，demo为新工程名称。

1. npm create deft@latest demo

复制代码

根据自己的喜好选择语言和框架，这里，以TypeScript+React为例。
命令执行完后，会在当前目录下创建一个demo项目，执行下面命令启动项目。

1. cd demo
2. npm install
3. npm run dev

复制代码

启动成功后，会得到如下输出：

1. ...
2. webpack 5.91.0 compiled successfully in 1995 ms
4. ==============================================
5. Press r to run on this device
6. Press a to run on connected android device
7. Press q to quit
8. ==============================================

复制代码

按r，即可开始构建预览应用。首次构建，需要下载依赖，所以耗时可能会比较长，可以配置cargo镜像提高下载速度。
构建成功后，就能看到预览窗口了，可以直接修改ui目录下的JS/TS文件实时预览效果。

资源占用

内存63M，应用体积包31.5M
目录结构

1. ├── android               -- 安卓工程相关文件
2. ├── build.rs              -- Cargo构建脚本
3. ├── Cargo.lock
4. ├── Cargo.toml            -- Cargo项目配置文件
5. ├── dev-hack.js
6. ├── package.json          -- JS项目配置文件
7. ├── package-lock.json
8. ├── src                   -- Rust源代码
9. │     └── main.rs
10. ├── tsconfig.json         -- TypeScript配置文件
11. ├── ui                    -- JS/TS源代码
12. │     ├── app.tsx
13. │     ├── deft-env.d.ts
14. │     └── main.ts
15. └── webpack.config.js     -- Webpack配置文件

复制代码

打包

执行下面命令即可打包

1. npm run build

复制代码

打包完成后，会在target/你的系统架构/release/目录下生成一个单独的可执行二进制文件（包含编译后的JS代码），将其拷贝出来即可。
文档 & Demo参考

Github：https://github.com/deft-ui/deft
文档：https://deft-ui.github.io/guides/what-is-deft/
官方同时提供贪吃蛇,视频播放器,视频格式转换器,SPICE远程桌面客户端等多个Demo，可直接前往 https://deft-ui.github.io/demos/ 查看。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！