Migrating a Desktop Application from Electron to Tauri: Architecture, Implementation, and Lessons Learned

This article documents the migration of the "得物商家客服" desktop client from Electron to Tauri, covering background, technical research, core module comparison, implementation details, and post‑migration results.

Background

The original client was built with Electron because it allowed rapid development using JavaScript and provided a familiar Chromium‑based rendering layer. Over time, the app grew in user count and feature set, exposing performance, memory, security, and package‑size issues.

Technical Research

Two frameworks were evaluated:

Electron (Chromium family)

Tauri (Webview + Rust)

Tauri offers a much smaller binary (no bundled Chromium) and leverages the OS‑native WebView (WebKit on macOS, WebView2 on Windows). Rust provides memory safety, zero‑cost abstractions, and strong concurrency support.

Core Module Comparison

Both frameworks separate a main (backend) process and a renderer (frontend) process . Key modules compared:

Electron : Main process (Node.js), Renderer (Chromium), built‑in APIs (Notification, IPC, auto‑updater).

Tauri : Main process written in Rust (WRY, TAO, JS API), Renderer uses system WebView, custom plugin system.

Example of Electron’s main window creation:

const { BrowserWindow } = require('electron');
const win = new BrowserWindow({ frame: false });

Equivalent Tauri window creation (Rust):

let window = WindowBuilder::new(&app, "main", WindowUrl::App("/src/index.html".into()))
    .inner_size(400., 300.)
    .decorations(false)
    .build()
    .unwrap();

Implementation Steps

Render‑process migration – copy existing HTML/JS/CSS into src directory; adjust build scripts (e.g., yarn tauri build ).

Backend migration – rewrite main process logic in Rust, using Tauri’s tauri::Builder and plugins (e.g., single‑instance, custom signing).

Custom window UI – replace Electron’s native frame with a frameless Tauri window and implement a draggable title bar using data-tauri-drag-region .

Cross‑origin requests – replace Electron’s webSecurity: false hack with Tauri’s http API or an Axios adapter that forwards requests to the Rust backend.

Notification handling – extend Tauri’s notification module to support click callbacks on macOS, Windows 10, and Windows 7 (see code snippets below).

Sample Rust code for a Windows 10 toast notification with click handling:

fn show_win_action(window: tauri::Window, app_id: String, notification: Notification, action_id: String, action_name: String, handle: CallbackFn, sid: String) {
    // Build XML toast, register TypedEventHandler, invoke JS callback on click
    // ... (omitted for brevity)
}

Sample macOS notification with action handling:

fn show_mac_action(window: tauri::Window, app_id: String, notification: Notification, action_id: String, action_name: String, handle: CallbackFn, sid: String) {
    // Use mac_notification_sys to send notification and invoke JS callback on click
    // ... (omitted for brevity)
}

Packaging and signing were updated to use Tauri’s signCommand hook, allowing the company’s USB‑key signing service to sign the final binary.

Build & Distribution

Cross‑platform builds now require separate Rust targets (e.g., i686-pc-windows-msvc for 32‑bit Windows, universal-apple-darwin for macOS universal binaries). The Tauri CLI handles bundling, NSIS/WiX installers, and auto‑updater configuration.

Results & Summary

Binary size reduced from ~80 MB (Electron) to ~7 MB (Tauri), a 91 % reduction.

Memory usage dropped from ~497 MB to ~249 MB (≈50 %).

CPU usage fell from ~63 % to ~20 % (≈63 % reduction).

Improved startup time and lower network overhead.

Challenges encountered include:

WebView2 installation failures on some Windows machines.

Missing notification click callbacks in Tauri (solved via custom Rust extensions).

Limited community documentation for advanced features, requiring direct source‑code investigation.

During the migration, the team contributed seven PRs to the Tauri ecosystem (e.g., fixing window focus, adding custom signing, improving Windows 7 notification stability).

Overall, the migration demonstrates that a well‑engineered Rust + WebView stack can replace Electron for performance‑critical desktop applications, while highlighting current gaps in Tauri’s feature set and the need for deeper Rust expertise.