July 25, 2023·ElectronTauri
Tauri vs Electron: The best Electron alternative created yet
We compare the pros, cons, strengths, weaknesses and advantages of Electron vs Tauri, two technologies for cross-platform development
Developed by GitHub in 2013, Electron has grown in popularity as a framework for creating desktop applications using web technologies. Its adoption by leading tech companies such as Notion, Figma and Slack speaks volumes about its capabilities and widespread use in the industry.
Tauri, a newcomer on the scene, has been generating buzz for its lightweight and performant approach to writing desktop apps using web technologies. Its development is attributed to a talented open-source community and it was officially launched in 2019. The graph below gives a glimpse of the impressive growth Tauri has had in such a short span of time.
But the question is, how do these two compare? And more importantly, when should you choose one over the other? We're going to compare Electron and Tauri to help you make the best decision for your particular needs.
Comparison
Bundle Size
In terms of bundle size, Tauri shines through with its remarkably compact ~3MB binaries. It dynamically links the web-view of the underlying OS instead of bundling the entire chromium runtime.
In stark contrast, Electron's typical bundle size starts at around ~80-120 MB.
Backend Language
Electron uses Node.js as its backend. Node.js's popularity and ease of use makes it a perfect choice for many developers, with many already well-versed or able to become proficient in little time.
Having Node.js as the backend opens the possibility of bundling a local web server that can be written in express, whereas for Rust you’d have to spawn a child process or write the server in Rust.
A very simple Electron app with an Exprerss server looks like this:
// main.js const { app, BrowserWindow } = require('electron') const express = require('express'); const server = express(); const port = 3000; function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, } }) win.loadFile('index.html') } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) server.get('/hello', (req, res) => { res.send('Hello, Electron!'); }); server.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); });
As you can see, it’s good ol’ javascript that we all know.
Tauri, on the other hand, uses Rust as its backend. Rust can be more challenging to understand and become proficient with. You might be wondering, how much of your code needs to be in Rust? If you're using the backend for file system operations, interacting with the OS, handling local databases, performing background tasks, using native features like dialogs and context menus, or even running a custom server locally, then Rust is something you'll need to grapple with if you go with Tauri.
// src-tauri/src/main.rs /* Tauri app that provides a function to write to a file */ #![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] mod cmd; use tauri::CustomMenuItem; use tauri::Manager; #[tauri::command] fn write_to_file(message: String) -> Result<(), String> { use std::fs::File; use std::io::Write; let mut file = File::create("example_output.txt").map_err(|e| e.to_string())?; file .write_all(message.as_bytes()) .map_err(|e| e.to_string())?; Ok(()) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![write_to_file]) .run(tauri::generate_context!()) .expect("error while running tauri application"); }
However, if your desktop app is primarily a webapp with limited interaction with the underlying environment, you may not need to write much Rust code at all. But in that case, why even bother making a desktop app if you don't need any interaction with the underlying environment? Maybe you're better off with just a web app. We wrote a detailed blog comparing desktop and web apps that you can check here.
Development Time
When it comes to rapid development and time to market, Electron is the clear winner. It offers more flexibility and ease of development. This advantage is particularly pronounced if you're still exploring the right solution and need to iterate quickly.
Rendering
Electron provides consistency by bundling Chromium alongside your application code, ensuring it renders identically across different operating systems.
On the other side, Tauri uses the system's webview: Chromium on Windows, WebKitGTK on Linux, and Webkit on MacOS. This could mean more legwork as you will have to keep an eye out for UI bugs and compatibility issues across different systems. For instance, using webkit- prefixes with your app is a must-do.
Using CSS frameworks like TailwindCSS is a good strategy as it takes care of adding vendor prefixes for you.
Developer Experience
Tauri has its own set of advantages and challenges when it comes to the developer experience. On the positive side, it provides several built-in features such as hot reloading, cross-platform bundling, and generating app icons. However, the usage of Rust might pose difficulties for developers who are not familiar with low-level languages.
With Electron, some functionalities like hot reloading and packaging your code as a desktop application need to be set up manually, as they are not built into the framework.
Who’s the Winner?
In my opinion, the choice between Electron and Tauri boils down to three primary scenarios.
Firstly, if your application requires very little backend code, Tauri might seem like a good option. However, in this case, it might be worth reconsidering if a web application would serve your purpose better.
Second, it might be the case that you have the engineering budget to invest time and resources into writing Rust and exploring newer technologies. If you’re trying to optimize RAM usage and performance for millions of users, then by all means go with Tauri.
But if none of that is the case, then Electron is the better choice. Despite Rust's strengths, you will be able to develop faster with TypeScript, no matter how experienced a Rust developer you are. Electron is a battle tested solution and has a ton of documentation. And you can always later rewrite your backend logic in Rust if you found PMF and one of the top user pains is RAM usage and performance of your desktop application.
