简介
随着Web技术的发展,越来越多的跨端应用选择了WebView作为基础解决方案。诚然WebView让跨端应用开发变得简单了很多,极大的提高了开发效率,但是,WebView也存在着一些广为诟病的缺点,比如内存占用大,包体积大,系统调用不方便等。所以,Deft诞生了。
Deft是一个高性能跨平台开源UI框架,底层使用Rust开发,支持使用JS/React开发界面,目前支持Linux,Windows,MacOS和Android等系统。为了提高性能,Deft提供了便捷高效的方式使用Rust开发API和UI组件。
快速开始
开始前,系统需要先安装nodejs,Rust,clang14+,如果未安装,直接去官网下载安装即可。
执行下面命令,快速创建新工程,demo为新工程名称。
npm create deft@latest demo
根据自己的喜好选择语言和框架,这里,以TypeScript+React为例。
命令执行完后,会在当前目录下创建一个demo
项目,执行下面命令启动项目。
cd demo
npm install
npm run dev
启动成功后,会得到如下输出:
...
webpack 5.91.0 compiled successfully in 1995 ms
==============================================
Press r to run on this device
Press a to run on connected android device
Press q to quit
==============================================
按r
,即可开始构建预览应用。首次构建,需要下载依赖,所以耗时可能会比较长,可以配置cargo镜像提高下载速度。
构建成功后,就能看到预览窗口了,可以直接修改ui目录下的JS/TS文件实时预览效果。
资源占用
内存 63M,应用体积包31.5M
目录结构
├── android -- 安卓工程相关文件
├── build.rs -- Cargo构建脚本
├── Cargo.lock
├── Cargo.toml -- Cargo项目配置文件
├── dev-hack.js
├── package.json -- JS项目配置文件
├── package-lock.json
├── src -- Rust源代码
│ └── main.rs
├── tsconfig.json -- TypeScript配置文件
├── ui -- JS/TS源代码
│ ├── app.tsx
│ ├── deft-env.d.ts
│ └── main.ts
└── webpack.config.js -- Webpack配置文件
打包
执行下面命令即可打包
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/ 查看。