Electron is tegenwoordig een bekend framework om desktopapplicaties te bouwen met web technologie. Denk aan populaire apps zoals Visual Studio Code, Slack en Discord. Het gemak is groot: één codebase (HTML/JS/CSS) die op Windows, MacOS en Linux draait. Toch staan Electron-apps berucht om hun hoge geheugengebruik en enorme installatie-grootte. Tauri is een relatief nieuw alternatief dat belooft dit anders aan te pakken. In deze blogpost bespreken we wat Tauri is, vergelijken we Tauri met Electron, benoemen we de voordelen en nadelen van Tauri, en laten we een codevoorbeeld zien.
Wat is Tauri?
Tauri is een framework voor cross-platform desktopapplicaties met web technologie. In tegenstelling tot Electron, dat een volledige Chromium-browser en een Node.js-runtime bundelt, gebruikt Tauri de ingebouwde WebView van het besturingssysteem (WebView2 op Windows, WKWebView op MacOS, WebKitGTK op Linux). Dit verbetert zowel de veiligheid als de prestaties.
Een Tauri-app bestaat uit twee hoofdcomponenten: een WebView (gebruikersinterface) en een Rust Core (systeemlogica).
– WebView (UI): Dit is de gebruikersinterface van de applicatie, gebouwd met web technologieën zoals React, Vue of Svelte. Het functioneert als een browserpagina en bepaalt hoe de gebruiker met de applicatie interacteert. Om de vergelijking met web development te leggen, dit kan gezien worden als het frontend gedeelte van je project.
– Rust Core (systeemlogica): Dit is een apart proces, geschreven in Rust, dat verantwoordelijk is voor systeeminteracties zoals bestandsbeheer, toegang tot OS API’s en andere functionaliteiten. Dit kan vergeleken worden met een backend in Web-development.
Tauri vs Electron
Hoe verhoudt Tauri zich tot Electron in de praktijk? Hieronder zetten we de belangrijkste verschillen op een rij:
- Architectuur – Electron bundelt een volledige Chromium-browser en Node.js met je app. Dit resulteert in een zware runtime: een Electron-app draait een hoofdproces (Node.js) en voor elk venster een apart rendererproces (Chromium) waarin de UI draait. Tauri daarentegen gebruikt de native WebView van het OS voor de UI.
- Bundle-grootte – Doordat Electron zoveel mee verpakt, zijn Electron-applicaties erg groot op disk. Een simpele “Hello World” Electron-app kan al snel 100+ MB groot zijn. Een vergelijkbare “Hello World” in Tauri blijft rond ~5 MB. Een factor 20 verschil.
- Prestaties & Geheugengebruik – Electron-apps gebruiken veel RAM, omdat elke app zijn eigen browser-engine start. Als je meerdere Electron-apps tegelijk open hebt, draaien ze elk hun eigen Chromium-instantie, wat leidt tot een hoog cumulatief geheugenverbruik. Tauri-applicaties zijn efficiënter: ze maken gebruik van de gedeelde WebView van het besturingssysteem. Hierdoor functioneert de UI als een tabblad binnen de bestaande browser-engine van het OS, wat doorgaans zorgt voor een lager geheugen- en CPU-gebruik vergeleken met Electron.
- Veiligheid – Tauri gebruikt Rust als backend, wat zorgt voor memory safety en een veiliger model waarin expliciet moet worden aangegeven welke functionaliteiten beschikbaar zijn. Updates voor WebView worden bovendien door het OS beheerd.
- Development ervaring – Voor webdevelopers is Electron toegankelijk: je kunt vrijwel al je bestaande kennis van Javascript/Typescript, HTML en CSS hergebruiken, en je hele app (zowel frontend als backend) in één taal bouwen. Debugging is eenvoudig met Chrome DevTools, en er is een rijke set aan NPM-packages om Electron functionaliteit uit te breiden. Tauri vraagt iets nieuws: je frontend blijft vertrouwd (JS/TS), maar voor de backend (Rust Core) moet je Rust gebruiken. Als je nog geen Rust kent is dat een leercurve. Aan de andere kant dwingt Tauri hiermee ook een duidelijke scheiding af tussen UI en logic. De Tauri-tooling wordt steeds beter (hot-reload tijdens development, goede docs) maar je combineert feitelijk twee ecosystemen: Node/NPM voor de frontend (UI), Cargo/crates (de Rust manier van package-management) voor de backend. Veel voorkomende functionaliteiten biedt Tauri standaard of via plugins, zodat je niet altijd zelf Rust hoeft te schrijven – maar je project bevat wel Rust code die je moet beheren.
- Ecosysteem en community – Electron bestaat al sinds 2013 en heeft een enorme community. Er zijn talloze tutorials, plug-ins, Stack Overflow-antwoorden en jaren aan best practices. Vrijwel elke integratie of library die je nodig hebt, bestaat er in de Node/NPM wereld wel een pakketje voor. Tauri is veel jonger (1.0 release in 2022, 2.0 release in 2024) en de community groeit nog. Documentatie is aanwezig en er komen steeds meer voorbeelden maar het ecosysteem is kleiner. Er zijn Tauri plugins (Rust crates die extra functionaliteit toevoegen, zoals het openen van een dialog, OS notificaties, etc.) en de core team en community breiden dit gestaag uit. Toch zul je af en toe tegen features aanlopen die nog niet beschikbaar zijn of waar je zelf iets voor moet schrijven. De verwachting is dat met de populariteit van Tauri het ecosysteem snel groeit, maar op dit moment is het qua volwassenheid (nog) niet op het niveau van Electron.
Samengevat: Tauri en Electron bereiken hetzelfde doel (cross-platform desktopapps bouwen met web technologie), maar Tauri doet dit op een slankere, meer native manier. Electron biedt gevestigde eenvoud en een enorme berg kant-en-klare oplossingen, terwijl Tauri focust op performance, veiligheid en een kleine footprint – met de keerzijde van een nieuwe tech stack (Rust) en een jongere community.
Tauri in de praktijk: codevoorbeeld
Om een nieuwe Tauri-app op te zetten, biedt het team de `create-tauri-app` tool. Hiermee kun je via één command een basisproject genereren.
npx create-tauri-app ✔ Project name · awesome-blog-demo ✔ Identifier · com.awesome-blog-demo.app ✔ Choose which language to use for your frontend · TypeScript / JavaScript ✔ Choose your package manager · npm ✔ Choose your UI template · React - (https://react.dev/) ✔ Choose your UI flavor · TypeScript
Hierna wordt automatisch een projectstructuur gemaakt met een UI-directory (src) en een Rust Core-directory (src-tauri). Draai direct `npm run tauri dev` om te ontwikkelen, of `npm run tauri build` voor een release-build.
Hoe ziet het ontwikkelen met Tauri eruit? We bouwen een simpele app waarbij de frontend (JavaScript) via Tauri commands communiceert met de backend (Rust).
Aan de Rust-kant maak je een command (`greet`) met de macro `#[tauri::command]`. Dit command accepteert een naam en retourneert een begroeting:
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
In bovenstaande code hebben we de functie greet gedefinieerd en gemarkeerd als Tauri-command. Vervolgens registreren we dit in de `invoke_handler` van de Tauri Builder, zodat het aangeroepen kan worden vanuit de frontend. De rest is standaard boilerplate om de Tauri-app op te starten.
Aan de UI-kant kun je nu dit Rust-command aanroepen via Tauri’s JavaScript API. Tauri biedt een npm-package `@tauri-apps/api` waarmee je onder andere de functie kunt gebruiken om een command in Rust aan te roepen.
import { invoke } from '@tauri-apps/api/tauri';
async function sayHello() {
try {
const message = await invoke('greet', { name: 'Cloud Republic' });
console.log(message); // Verwacht: "Hello, Cloud Republic!"
} catch (error) {
console.error('Error calling greet:', error);
}
}
Hier roepen we `invoke(‘greet’, { name: ‘Cloud Republic’ })` aan. Dit zorgt ervoor dat onze Rust-functie `greet` wordt uitgevoerd met de parameter `”Cloud Republic”`. Het resultaat (een `String` “Hello, Cloud Republic!”) wordt automatisch teruggegeven als een Promise in JavaScript. In dit voorbeeld loggen we het resultaat naar de console, maar je zou deze waarde natuurlijk in de UI kunnen tonen.
In Tauri kun je vrijwel alle communicatie tussen UI en Core op deze manier vormgeven. Daarnaast heeft Tauri ook vooraf gebouwde commands (zoals voor het openen van dialoogvensters, lezen van bestanden, etc.), en een plugin-systeem om functionaliteit toe te voegen. Vaak kun je met minimale Rust-code al een heel eind komen.
Bovendien is het mogelijk om met behulp van een package (Spectra) type-safe invoke-commando’s te gebruiken. Dit maakt het mogelijk om automatisch gegenereerde TypeScript-definities te verkrijgen op basis van wat in de Rust-Core staat geregistreerd.
QR-code genereren met typesafety
Hieronder demonstreren we hoe de UI (Javascript/TypeScript) en de Core (Rust) samenwerken via een eenvoudig command dat QR-codes genereert. Voor extra gemak en typesafety gebruiken we hiervoor Spectra, een package die automatisch TypeScript-bindingen genereert vanuit de Rust Core (hiervoor dient wel nog een wijziging in de manier hoe commands worden geregistreerd).
#[derive(Serialize, Deserialize, Type)]
struct QrResponse {
url: String,
base64_image: String,
}
#[tauri::command]
#[specta::specta]
fn qr(url: String) -> QrResponse {
let qrcode = QRBuilder::new(url.clone())
.build()
.unwrap();
let svg_content = SvgBuilder::default()
.shape(Shape::RoundedSquare).image_size(100.0).to_str(&qrcode);
let base64_img = format!(
"data:image/svg+xml;base64,{}",
base64::encode(svg_content)
);
QrResponse {
url,
base64_image: base64_img
}
}
Door Spectra worden automatisch TypeScript-definities gegenereerd:
// bindings.ts (automatisch gegenereerd)
export const commands = {
async qr(url: string): Promise<QrResponse> {
return await TAURI_INVOKE("qr", { url });
}
};
export type QrResponse = { url: string, base64_image: string };
In je frontend kun je nu eenvoudig type-safe QR-codes genereren en tonen:
// Typescript React
function App() {
const [qrImage, setQrImage] = useState("");
const [name, setName] = useState("");
async function GenerateQrCode() {
try {
let qr = await commands.qr(name);
setQrImage(qr.base64_image);
} catch (error) {
console.error('Error calling GenerateQrCode:', error);
}
}
return (
<main className="container">
<h1>Welcome to Tauri + React</h1>
<input
id="greet-input"
onChange={(e) => {
setName(e.currentTarget.value);
setTimeout(() => {
GenerateQrCode();
}, 0);
}} placeholder="Enter a name..."
/>
<br/>
{qrImage !== "" && (
<img style={{height: "50vh"}} src={qrImage} alt="QR code"/>
)}
</main>
);
}
Met Tauri en Spectra bouw je zo eenvoudig krachtige en type-safe desktop-applicaties met webtechnologie en Rust. Mocht je nu interesse hebben om het project lokaal uit te proberen het demo project is ook beschikbaar op Github: https://github.com/CloudRepublic/2025-tauri-demo
Conclusie
Tauri is een veelbelovend framework dat een antwoord biedt op de nadelen van Electron. Met Tauri maak je lichtere, snellere en veiligere desktop applications zonder je web development comfort te verliezen. De inzet van Rust en het gebruik van de ingebouwde OS-webview maken Tauri-apps compact en efficiënt. Voor developers die het maximale uit performance en veiligheid willen halen, of die de omvang van hun app willen beperken, is Tauri een uitstekende keuze.
Toch is Electron niet zonderreden populair gebleven: de volwassenheid en eenvoud van een volledig JavaScript-stack met een enorm ecosysteem is een sterk voordeel. Als je team geen Rust-kennis heeft of je hebt functionaliteit nodig die nu eenmaal al uitgewerkt is in Electron, dan blijft Electron voorlopig een veilige keuze.
Voor veel nieuwe projecten kan Tauri echter een modern alternatief zijn dat beter aansluit bij de wensen van gebruikers (snelle, lichte apps). De voor- en nadelen die we besproken hebben, helpen je hopelijk om een afgewogen keuze te maken. Ben je bereid iets nieuws te leren en wil je een strakke, efficiënte desktopapp? Dan is het zeker de moeite waard om Tauri eens uit te proberen. Wellicht bouw je je volgende cross-platform desktopapplicatie dan niet met een heavyweight (Electron), maar met deze frisse featherweight aanpak! Veel codeerplezier!