Belajar Tauri untuk Pemula - Membangun Desktop App dengan HTML CSS dan JavaScript

Kemarin saya butuh bikin aplikasi desktop untuk export data dari database ke CSV. Pertama kepikiran pakai Electron, tapi pas lihat ukuran instalasinya yang 150MB+ buat app sederhana, saya langsung cancel rencana itu. Terus inget pernah dengar Tauri dari obrolan di grup Telegram komunitas Rust Indonesia. "Bisa bikin desktop app pakai HTML, CSS, JavaScript, tapi binary-nya cuma 3MB katanya." Saya coba, dan ternyata memang beneran.

Kalau kamu perah pakai Electron dan ngerasa app-nya berat, atau pengen bikin desktop app tapi nggak mau belajar Qt atau GTK dari nol, Tauri adalah jawaban yang cukup menarik. Saya akan jabarkan pengalamannya dari nol sampai app-nya jadi.

Apa Itu Tauri?

Tauri adalah framework untuk membangun aplikasi desktop (dan mobile) dengan frontend web. Tapi bedanya dengan Electron, Tauri nggak nge-bundle Chromium ke dalam app kamu. Dia pakai webview bawaan sistem operasi. Di Windows pakai WebView2 (berbasis Edge), di macOS pakai WKWebView (Safari), dan di Linux pakai WebKitGTK.

Backend-nya ditulis dalam Rust, yang dikenal super cepat dan memory-safe. Jadi kamu bisa nulis UI pakai React, Vue, atau bahkan vanilla HTML+CSS, lalu logic berat di backend pakai Rust. Komunikasi antara frontend dan backend dilakukan lewat IPC (Inter-Process Communication).

Hasilnya? Binary yang jauh lebih kecil. App Tauri rata-rata 3-10MB, dibanding Electron yang 100-200MB. Memory usage juga jauh lebih hemat biasanya 30-50MB vs Electron yang gampang tembus 200MB+.

Prasyarat: Yang Harus Kamu Install Dulu

Sebelum mulai, pastikan sistem kamu siap. Berikut yang dibutuhkan:

1. Rust dan Cargo Tauri butuh Rust toolchain. Install dengan rustup:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
rustc --version # pastikan muncul version number

2. Node.js untuk scaffold project dan frontend tooling. Versi 18+ recommended:

# Pakai nvm untuk manajemen versi
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
node --version

3. System dependencies (Linux) di Ubuntu/Debian, butuh beberapa library WebKit:

sudo apt update
sudo apt install -y libwebkit2gtk-4.1-dev \
 build-essential curl wget file \
 libxdo-dev libssl-dev libayatana-appindicator3-dev \
 librsvg2-dev

Di Windows, install Microsoft Visual Studio C++ Build Tools dan WebView2 (sudah bundling di Windows 11). Di macOS, install Xcode Command Line Tools dengan xcode-select --install.

Membuat Project Tauri Pertama Kamu

Tauri punya CLI tool yang bikin scaffolding gampang. Pakai create-tauri-app:

# Bikin project baru
npm create tauri-app@latest

# Pilih opsi berikut:
# - Project name: my-first-tauri
# - Identifier: com.example.myfirsttauri
# - Frontend language: JavaScript / TypeScript
# - UI template: Vanilla (atau React, Vue, Svelte)
# - Package manager: npm

Setelah selesai, masuk ke direktori project dan install dependencies:

cd my-first-tauri
npm install

Struktur project-nya kira-kira gini:

my-first-tauri/
|-- src/ # Frontend code (HTML, CSS, JS)
|-- src-tauri/
| |-- src/
| | |-- main.rs # Backend Rust code
| |-- Cargo.toml # Rust dependencies
| |-- tauri.conf.json # Tauri config
|-- package.json
`-- index.html

Yang menarik dari struktur ini: frontend kamu terpisah dari backend. Kamu bisa pakai framework apa aja untuk frontend, dan Rust untuk logic yang butuh performance.

Menjalankan App Pertama

Cukup satu command untuk run app dalam mode development:

npm run tauri dev

Perintah ini akan compile Rust code, start dev server untuk frontend, dan buka window app-nya. Kalau development, hot reload berfungsi untuk perubahan frontend. Kalau ada error Rust, terminal akan kasih pesan error yang cukup informatif.

Beberapa hal yang saya perhatiin saat pertama kali jalan: startup-nya cepat banget. Window kebuka dalam 1-2 detik, dibanding Electron yang butuh 5-10 detik untuk warm start. Memory usage di System Monitor cuma 45MB untuk app hello world. Lumayan beda dengan Electron hello world yang gampang di atas 150MB.

Komunikasi Frontend-Backend dengan Commands

Ini bagian inti dari Tauri. Kamu nulis function di Rust, lalu panggil dari JavaScript. Tauri namain ini "commands".

Contoh: bikin command yang baca file dari sistem.

// src-tauri/src/main.rs
use std::fs;
use tauri::command;

#[command]
fn read_file(path: String) -> Result<String, String> {
 fs::read_to_string(&path)
 .map_err(|e| format!("Gagal baca file: {}", e))
}

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

Lalu di frontend, panggil dengan invoke:

// src/main.js
import { invoke } from '@tauri-apps/api/core';

async function loadFile() {
 try {
 const content = await invoke('read_file', {
 path: '/home/user/data.txt'
 });
 document.getElementById('output').textContent = content;
 } catch (error) {
 console.error('Error:', error);
 }
}

Pattern-nya straightforward. Bikin command di Rust, register di handler, panggil dari JS. Type-safe karena Rust akan validate input dan return type-nya. Kalau ada error, Rust return Err(String) yang otomatis jadi rejected Promise di sisi JS.

State Management Antar-Command

Sering kali kamu butuh share state antar command. Misalnya, simpan koneksi database yang dipakai multiple commands. Tauri punya built-in state management:

use std::sync::Mutex;
use tauri::State;

struct AppState {
 counter: Mutex<i32>,
}

#[command]
fn increment(state: State<AppState>) -> i32 {
 let mut num = state.counter.lock().unwrap();
 *num += 1;
 *num
}

#[command]
fn get_count(state: State<AppState>) -> i32 {
 *state.counter.lock().unwrap()
}

fn main() {
 tauri::Builder::default()
 .manage(AppState { counter: Mutex::new(0) })
 .invoke_handler(tauri::generate_handler![increment, get_count])
 .run(tauri::generate_context!())
 .expect("error");
}

Pakai Mutex karena Tauri bisa run commands secara concurrent. Thread safety di-handle oleh Rust compiler kalau code kamu nggak thread-safe, compiler nolak. Ini salah satu keunggulan pakai Rust sebagai backend.

Membangun Production Build

Saat app siap dirilis, build dengan:

npm run tauri build

Tauri akan compile Rust dalam release mode, minify frontend, dan package jadi installer. Output-nya tergantung OS:

• Windows: .msi dan .exe (NSIS installer)
• macOS: .dmg dan .app bundle
• Linux: .deb, .rpm, dan .AppImage

Hasil build app sederhana biasanya 3-8MB. Bandingkan dengan Electron yang minimal 60-80MB. Kalau kamu pernah build Electron, kamu tahu rasa sakitnya ngirim file 200MB ke user. Dengan Tauri, distribusi jadi jauh lebih ringan.

Untuk konfigurasi build, edit tauri.conf.json:

{
 "productName": "Data Exporter",
 "version": "1.0.0",
 "identifier": "com.kinara.dataexporter",
 "build": {
 "frontendDist": "../dist"
 },
 "app": {
 "windows": [{
 "title": "Data Exporter",
 "width": 800,
 "height": 600,
 "resizable": true,
 "fullscreen": false
 }],
 "security": {
 "csp": "default-src 'self'"
 }
 }
}

Field identifier penting untuk macOS app bundle dan Windows installer harus unik dan reverse-DNS format. csp adalah Content Security Policy yang di-enforce di webview, jadi app kamu aman dari injection attack secara default.

Tauri vs Electron: Perbandingan Jujur

Saya udah pakai keduanya, dan ini pengalaman saya:

• Binary size: Tauri 3-10MB vs Electron 80-200MB. Pemenang jelas Tauri.
• Memory: Tauri 30-80MB vs Electron 150-400MB. Beda 3-5x.
• Startup time: Tauri 1-2 detik vs Electron 5-10 detik untuk cold start.
• Webview konsistensi: Electron bundle Chromium versi spesifik, jadi behavior-nya sama di semua OS. Tauri pakai system webview, jadi bisa beda antara Windows (WebView2), macOS (WKWebView), dan Linux (WebKitGTK). Ini bisa cause rendering beda di edge cases.
• Backend language: Electron pakai Node.js (JavaScript), Tauri pakai Rust. Kalau kamu udah familiar JS, Electron lebih cepat dipelajari. Kalau kamu open belajar Rust, Tauri worth it.
• Ecosystem: Electron lebih matang. Banyak library, plugin, dan community support. Tauri masih growing tapi plugin resmi udah cukup lengkap (clipboard, dialog, notification, file system, http, dll).
• Cross-platform mobile: Tauri 2.0 support Android dan iOS. Electron nggak.

Untuk app yang butuh performance, small footprint, dan cross-platform (termasuk mobile), Tauri menang. Untuk app yang butuh library Node.js spesifik atau tim yang cuma ngerti JavaScript, Electron masih oke.

Tips dan Pitfalls yang Saya Alami

1. Webview beda-beda antar OS. CSS flexbox gap di WebKitGTK (Linux) bisa beda sama WebView2 (Windows). Selalu test di target OS. Jangan cuma dev di Linux lalu assume tampilan sama di Windows.

2. Rust learning curve. Kalau kamu belum pernah pakai Rust, persiapkan diri. Borrow checker dan lifetime bisa bikin frustasi di awal. Tapi setelah 1-2 minggu, kamu akan appreciate keamanan dan performance-nya. Mulai dengan command sederhana dulu, jangan langsung bikin logic kompleks.

3. Tauri plugin system. Tauri 2.0 punya plugin API yang lebih clean. Untuk akses clipboard, notification, dialog, dsb, install plugin resmi:

cd src-tauri
cargo add tauri-plugin-clipboard-manager
cargo add tauri-plugin-dialog
cargo add tauri-plugin-notification

Lalu register di main.rs:

fn main() {
 tauri::Builder::default()
 .plugin(tauri_plugin_clipboard_manager::init())
 .plugin(tauri_plugin_dialog::init())
 .plugin(tauri_plugin_notification::init())
 .run(tauri::generate_context!())
 .expect("error");
}

4. Auto-updater. Tauri punya built-in auto-updater. Tapi butuh server untuk host update files. Kalau project kecil, pakai GitHub Releases sebagai hosting. Setup di tauri.conf.json dengan endpoint JSON yang describe update info.

5. Jangan lupa code signing. Tanpa code signing, Windows akan show SmartScreen warning dan macOS akan bilang app "cannot be opened because the developer cannot be verified." Untuk Windows, beli code signing certificate. Untuk macOS, butuh Apple Developer account ($99/tahun). Ini biaya yang harus di-include di planning project.

Deployment dan Distribusi

Untuk distribusi, Tauri punya beberapa opsi:

GitHub Releases paling gampang untuk open source project. Upload binary ke setiap release tag. Tauri bisa auto-generate updater JSON untuk auto-update.

Website sendiri kalau app kamu berbayar atau internal, host installer di website sendiri. Pakai Nginx dengan try_files untuk serve file binary.

location /downloads/ {
 try_files $uri =404;
 add_header Content-Disposition "attachment";
}

App Store Tauri 2.0 support publishing ke Microsoft Store dan Mac App Store. Butuh extra config di tauri.conf.json untuk store-specific metadata.

Kesimpulan

Setelah pakai Tauri beberapa minggu, saya cukup impressed. App yang saya bikin (data exporter sederhana) ukurannya 4.2MB dan startup-nya 1.5 detik. Yang sama pakai Electron dulu ukurannya 127MB dan startup 8 detik. Performance gain-nya nyata, bukan hype.

Tapi jujur, Rust learning curve itu real. Kalau kamu cuma butuh app sederhana dan sudah familiar JavaScript, Electron mungkin masih lebih produktif. Tapi kalau kamu care tentang performance, binary size, atau butuh mobile support, Tauri adalah pilihan yang sangat solid.

Soalnya: udah pernah coba Tauri atau Electron? Atau masih ragu mau pakai yang mana? Cerita di kolom komentar ya, saya penasaran pengalaman kamu.