Why Tauri Beats Electron: Build Faster, Smaller Desktop Apps with Rust

Tauri是什么

Tauri is a cross‑platform GUI framework similar in concept to Electron. Its front‑end is built with web technologies while the back‑end uses Rust, allowing developers to create smaller, faster, and more secure desktop applications.

为什么选择 Rust？

Rust provides high performance, reliability, and productivity. It has no runtime or garbage collector, offers excellent memory safety through its ownership model, and integrates well with other languages, making it ideal for performance‑critical services and embedded devices.

Tauri VS Electron

Key differences include:

Installer size (Linux): Tauri 3.1 MB vs Electron 52.1 MB

Memory consumption (Linux): Tauri 180 MB vs Electron 462 MB

Launch time (Linux): Tauri 0.39 s vs Electron 0.80 s

Interface service provider: Tauri uses WRY, Electron uses Chromium

Backend binding: Tauri uses Rust, Electron uses Node.js (ECMAScript)

Underlying engine: Rust vs V8 (C/C++)

FLOSS: Yes vs No

Multithreading: Yes for both

Bytecode delivery: Yes vs No

Auto updater: Yes for both

Custom app icon, multiple windows, sidecar binaries: supported by both

iOS/Android binaries: Tauri "Soon", Electron "No"

环境安装

macOS

1. Ensure Xcode is installed: xcode-select --install 2. Install Node.js (recommended via nvm):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

nvm install node --latest-npm
nvm use node

3. (Optional) Install Yarn to replace npm.

4. Install the Rust toolchain:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Verify the installation: rustc --version After these steps the Tauri development environment is ready.

项目搭建

1. Create a new Tauri project:

yarn create tauri-app

Choose the web framework (e.g., create‑vite) and the language (Vue‑TS) as shown in the screenshots.

Run yarn tauri info to verify the setup.

项目目录介绍

├── README.md
├── dist            # compiled web assets
│   ├── assets
│   ├── favicon.ico
│   └── index.html
├── index.html
├── node_modules
├── package.json
├── public
│   └── favicon.ico
├── src             # Vue source files
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── env.d.ts
│   └── main.ts
├── src-tauri       # Rust side
│   ├── Cargo.lock
│   ├── Cargo.toml
│   ├── build.rs
│   ├── icons
│   ├── src
│   ├── target
│   └── tauri.conf.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

运行

Start the application:

cd tauri-demo1
yarn tauri dev

The app runs with Vue 3 + TypeScript + Vite as the front‑end.

API 调用及功能配置

Splashscreen（启动画面）

Create splashscreen.html and configure tauri.conf.json to hide the main window initially and show the splash screen. Add a Rust command close_splashscreen that closes the splash view and shows the main view, then invoke it from JavaScript after the DOM is loaded.

use tauri::Manager;

#[tauri::command]
fn close_splashscreen(window: tauri::Window) {
    if let Some(splashscreen) = window.get_window("splashscreen") {
        splashscreen.close().unwrap();
    }
    window.get_window("main").unwrap().show().unwrap();
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![close_splashscreen])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

In src/App.vue add:

import { invoke } from '@tauri-apps/api/tauri';

document.addEventListener('DOMContentLoaded', () => {
  invoke('close_splashscreen');
});

Window Menu（应用菜单）

Define menus using Menu, Submenu, MenuItem, and CustomMenuItem in src-tauri/main.rs. Register a menu‑event handler to implement actions such as “Quit” and “Close”. Note that some native menu items are not yet supported on Windows, Android, or iOS.

use tauri::{Menu, Submenu, MenuItem, CustomMenuItem};

fn main() {
    let submenu_gear = Submenu::new(
        "Gear",
        Menu::new()
            .add_native_item(MenuItem::Copy)
            .add_native_item(MenuItem::Paste)
            .add_native_item(MenuItem::Separator)
            .add_native_item(MenuItem::Zoom)
            .add_native_item(MenuItem::Separator)
            .add_native_item(MenuItem::Hide)
            .add_native_item(MenuItem::CloseWindow)
            .add_native_item(MenuItem::Quit),
    );
    let close = CustomMenuItem::new("close".to_string(), "Close");
    let quit = CustomMenuItem::new("quit".to_string(), "Quit");
    let submenu_customer = Submenu::new(
        "Customer",
        Menu::new()
            .add_item(close)
            .add_item(quit),
    );
    let menus = Menu::new()
        .add_submenu(submenu_gear)
        .add_submenu(submenu_customer);

    tauri::Builder::default()
        .menu(menus)
        .on_menu_event(|event| match event.menu_item_id() {
            "quit" => { std::process::exit(0); }
            "close" => { event.window().close().unwrap(); }
            _ => {}
        })
        .invoke_handler(tauri::generate_handler![close_splashscreen])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

调试

Rust Console

Use println! to output debug information to the terminal.

let msg = String::from("Debug Infos.");
println!("Hello Tauri! {}", msg);

WebView JS Console

Open the WebView inspector (right‑click → Inspect Element) to view JavaScript console output.

应用打包

Build a debug package: yarn tauri build --debug Build a release package: yarn tauri build The binaries are placed under src-tauri/target/debug/bundle (debug) or src-tauri/target/release/bundle (release).

Roadmap

Tauri aims to release a stable version in Q1 2022, add Deno support, and eventually target mobile platforms.

总结

Tauri offers smaller, faster, and more secure desktop applications compared with Electron, especially when combined with Rust. Although it is still pre‑release and some features lack cross‑platform compatibility, it is a promising framework for future desktop development.