Xây dựng ứng dụng Desktop đa nền tảng với Tauri 2.0 và React: Đã đến lúc chia tay Electron? - ITFROMZERO - Share tobe shared! Electron ngốn RAM và phình to dung lượng cài đặt luôn là bài toán đau đầu với lập trình viên. Tauri 2.0 kết hợp sức mạnh của Rust và React mang lại bộ cài dưới 15MB, phản hồi tức thì và tiết kiệm tài nguyên vượt bậc.

Table of Contents

Nỗi khổ ngốn RAM của Electron và lối thoát mới

Mở đồng thời Slack, Discord và VS Code, thanh Task Manager lập tức báo đỏ với hơn 3GB RAM bốc hơi. Thủ phạm không đâu khác ngoài kiến trúc của Electron: mỗi app đều ôm trọn một nhân Chromium và runtime Node.js riêng biệt. Ngay cả một app ghi chú đơn giản như Notion hay Obsidian cũng ngốn từ 150MB dung lượng bộ cài và chiếm tối thiểu 200MB RAM khi chạy nền.

Tại sao phải nhúng cả trình duyệt khi hệ điều hành nào cũng có sẵn webview? Đó là lý do Tauri ra đời. Bằng cách kết hợp webview hệ thống với backend Rust tối ưu, Tauri 2.0 mang lại hiệu năng vượt bậc mà vẫn giữ nguyên trải nghiệm code frontend bằng React.

Đặt lên bàn cân: 3 hướng làm ứng dụng Desktop hiện nay

Hiện tại, lập trình viên desktop thường cân nhắc giữa ba con đường:

Native UI thuần (C++, C#, Swift): Xây dựng bằng WinUI cho Windows, Swift cho macOS, GTK cho Linux. Ứng dụng phản hồi tức thì, mượt mà và cực nhẹ. Bù lại, bạn phải duy trì ba codebase song song. Chi phí nhân sự và thời gian phát triển vì thế tăng vọt.
Web Wrapper toàn phần (Electron): Dùng HTML, CSS, JavaScript bọc trong Chromium và Node.js. Điểm cộng là code một lần chạy khắp nơi, tận dụng toàn bộ hệ sinh thái npm. Nhược điểm chí mạng nằm ở dung lượng file cồng kềnh (thường trên 100MB) và mức ngốn RAM không hồi kết.
Native Webview kết hợp System Backend (Tauri 2.0): Tận dụng WebView2 trên Windows, WebKit trên macOS và WebKitGTK trên Linux, kết hợp backend viết bằng Rust. Giao diện vẫn là React hay Vue quen thuộc. Kích thước bộ cài giảm ngoạn mục xuống còn 5MB – 15MB. Mức chiếm dụng RAM chỉ dao động khoảng 30MB – 60MB.

Đánh giá thực tế: Ưu và nhược điểm của Tauri 2.0

Tauri 2.0 sở hữu nhiều nâng cấp đắt giá nhưng vẫn tồn tại những rào cản bạn cần lường trước.

Điểm cộng đáng giá

Bộ cài siêu nhẹ: File setup (.msi hoặc .dmg) thường nhẹ hơn Electron gấp 10 đến 20 lần vì không phải đính kèm nhân Chromium.
Khởi động tức thì, tối ưu RAM: Rust quản lý bộ nhớ trực tiếp không qua Garbage Collector (GC). Nhờ đó, ứng dụng bật lên gần như không có độ trễ và giải phóng bộ nhớ rất triệt để.
Kiến trúc bảo mật chặt chẽ: Tauri 2.0 phân quyền theo mô hình capabilities granular. Giao diện frontend bị cô lập hoàn toàn, không thể tự tiện đọc ổ cứng hay gửi request nếu backend chưa cấp quyền rõ ràng.
Mở rộng sang Mobile: Bước nhảy vọt của phiên bản 2.0 là hỗ trợ build trực tiếp ra Android và iOS bên cạnh ba hệ điều hành desktop truyền thống.

Thách thức cần lưu ý

Sai lệch hiển thị giữa các Webview: Windows dùng Edge WebView2 (Blink), macOS chạy WebKit (Safari). CSS hiển thị trên Mac đôi khi lệch vài pixel so với Windows. Vì vậy, bạn bắt buộc phải test kỹ giao diện trên cả hai môi trường.
Đòi hỏi nền tảng Rust: Khi cần can thiệp hệ thống như ghi file dung lượng lớn, quét cổng mạng hay gọi Win32 API, bạn buộc phải tự tay viết code Rust thay vì chỉ dựa vào thư viện JavaScript.

Khi nào nên chọn Tauri, khi nào nên ở lại với Electron?

Hãy cân nhắc chuyển sang Tauri 2.0 khi:

Bạn phát triển các tiện ích desktop, app nghe nhạc, dashboard quản trị hoặc công cụ năng suất cần chạy thường trực ở khay hệ thống (tray icon).
Ứng dụng hướng đến người dùng văn phòng hoặc máy tính cấu hình khiêm tốn (4GB – 8GB RAM).
Dự án đòi hỏi tính bảo mật IPC cao và ưu tiên tốc độ bật app nhanh nhất có thể.

Ngược lại, Electron vẫn là giải pháp an toàn nếu dự án của bạn phụ thuộc nặng vào các native C++ addon của Node.js chưa có crate Rust tương đương. Electron cũng phù hợp hơn khi bạn cần sự đồng nhất tuyệt đối 100% từng pixel hiển thị của Chromium trên mọi máy khách hàng.

Hướng dẫn thực hành: Tạo app Desktop với Tauri 2.0 và React

Quy trình sau đây sẽ dẫn bạn từ khâu chuẩn bị môi trường đến khi đóng gói bộ cài hoàn chỉnh.

Bước 1: Cài đặt công cụ nền tảng

Đầu tiên, máy của bạn cần có Node.js (từ v18 trở lên) và Rust toolchain. Với Ubuntu/Debian, mở terminal và chạy lệnh cài đặt thư viện hệ thống:

sudo apt update && sudo apt install -y libwebkit2gtk-4.1-dev build-essential curl wget file libssl-dev libayatana-appindicator3-dev librsvg2-dev
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env

Trên Windows, bạn chỉ cần tải Visual Studio C++ Build Tools và đảm bảo máy đã có WebView2 Runtime (mặc định đã tích hợp sẵn từ Windows 10 trở lên).

Bước 2: Khởi tạo dự án

Dùng lệnh scaffold chính thức từ đội ngũ Tauri:

npm create tauri-app@latest

Thiết lập các tùy chọn tương tác như sau:

Project name: my-tauri-app
Frontend language: TypeScript / JavaScript
Package manager: npm (hoặc pnpm)
UI template: React
UI flavor: TypeScript

Chuyển vào thư mục vừa tạo rồi cài dependencies:

cd my-tauri-app
npm install

Bước 3: Xử lý logic tại Rust backend

Dự án gồm hai phần tách biệt: code React ở thư mục gốc và logic Rust nằm trong src-tauri. Mở file src-tauri/src/lib.rs, viết một hàm command nhận tham số và trả về dữ liệu:

#[tauri::command]
fn analyze_system_info(name: &str) -> String {
    format!("Xin chào {}, ứng dụng Tauri 2.0 đang hoạt động ổn định!", name)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![analyze_system_info])
        .run(tauri::generate_context!())
        .expect("Lỗi khởi chạy ứng dụng Tauri");
}

Dữ liệu gửi qua lại giữa Rust và frontend được serialize tự động dưới dạng JSON qua cầu nối IPC nội bộ.

Khi debug dữ liệu qua lại giữa hai tầng Rust và React, các chuỗi JSON payload thường khá dài. Để kiểm tra nhanh cấu trúc hay đối soát regex, bạn có thể tận dụng các tiện ích trực tuyến như bộ JSON Formatter tại toolcraft.app (cụ thể: toolcraft.app/vi/tools/developer/json-formatter) để đỡ tốn công cài thêm extension nặng máy.

Bước 4: Gọi Rust Command từ React

Mở file src/App.tsx. Dùng hàm invoke từ package @tauri-apps/api/core để tương tác với backend:

import { useState } from "react";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";

export default function App() {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");

  async function handleGreet() {
    if (!name.trim()) return;
    try {
      const res = await invoke<string>("analyze_system_info", { name });
      setMessage(res);
    } catch (error) {
      console.error("Lỗi gọi command:", error);
    }
  }

  return (
    <main className="container">
      <h1>Desktop App với Tauri 2.0 & React</h1>
      <div className="row">
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Nhập tên của bạn..."
        />
        <button onClick={handleGreet}>Gửi đến Rust Backend</button>
      </div>
      {message && <p className="result-text">{message}</p>}
    </main>
  );
}

Bước 5: Chạy thử nghiệm và đóng gói

Khởi động môi trường phát triển cục bộ với tính năng hot-reload:

npm run tauri dev

Lần chạy đầu tiên mất tầm 1 – 2 phút để Cargo tải và biên dịch các crate Rust. Những lần sau, ứng dụng sẽ xuất hiện gần như ngay tức thì. Mức chiếm RAM đo được lúc này thường chỉ rơi vào khoảng 35MB đến 45MB.

Khi hoàn thiện tính năng, tiến hành build bộ cài đặt phân phối:

npm run tauri build

Bộ đóng gói sẽ tạo các file cài đặt native (.exe/.msi trên Windows, .dmg trên macOS, .deb/.AppImage trên Linux) trong thư mục src-tauri/target/release/bundle/.

Kinh nghiệm thực chiến giúp bạn tránh bẫy hiệu năng

Dưới đây là ba bài học xương máu khi đưa Tauri vào dự án thực tế:

Tránh encode Base64 cho file nhị phân lớn qua IPC: JSON IPC rất nhanh với các đoạn text ngắn. Tuy nhiên, nếu bạn truyền file vài chục MB dạng Base64, app sẽ bị giật khung hình. Giải pháp đúng đắn là xử lý luồng nhị phân trực tiếp dưới tầng Rust.
Cấu hình phân quyền chuẩn xác theo cơ chế Capabilities: Tauri 2.0 quản lý quyền trong thư mục src-tauri/capabilities/. Chỉ khai báo những permission thực sự cần thiết như file-system hay dialog. Thu hẹp quyền hạn vừa giúp phần mềm bảo mật, vừa cắt giảm kích thước binary đầu ra.
Học vừa đủ ngữ pháp Rust: Bạn không cần phải trở thành bậc thầy hệ thống ngay từ ngày đầu. Chỉ cần nắm vững cách xử lý lỗi với Result<T, E>, giá trị tùy chọn Option<T> và thư viện serde để ép kiểu dữ liệu là bạn đã làm chủ được 90% logic backend cho app desktop.