Arlen Chereshnikov

The Problem with Electron

I love Electron. It democratized desktop app development and powers amazing applications like VS Code, Slack, and Discord. But when building DashFlow—a personal productivity dashboard—I ran into problems:

Initial Electron build:

Bundle size: 52MB (unpacked: 180MB)
RAM usage: 200-300MB at idle
Cold start: 2-3 seconds
Update size: 50MB+ per version

For a simple dashboard app, this felt excessive. Users on older laptops complained about performance, and the download size was a barrier to adoption.

Discovering Tauri

Tauri is a newer framework that uses:

Rust for the backend/system APIs
WebView (system's native browser) for the UI
Your favorite web framework (React, Vue, Svelte) for the frontend

Key difference: Instead of bundling Chromium (like Electron), Tauri uses the operating system's built-in WebView.

The Decision: Performance Comparison

Bundle Size

| Metric | Electron | Tauri | Improvement | |--------|----------|-------|-------------| | Windows installer | 52MB | 4.8MB | 90% smaller | | macOS app | 95MB | 8.2MB | 91% smaller | | Linux AppImage | 85MB | 6.1MB | 93% smaller |

Runtime Performance

| Metric | Electron | Tauri | Improvement | |--------|----------|-------|-------------| | RAM (idle) | 200-300MB | 40-60MB | 75% less | | RAM (10 widgets) | 350-450MB | 80-120MB | 70% less | | Cold start | 2-3s | 0.5-0.8s | 73% faster | | CPU (idle) | 2-3% | <1% | 66% less |

The numbers were clear. Tauri delivered similar functionality with a fraction of the resources.

Building DashFlow with Tauri

Project Setup

# Install Tauri CLI
npm install -g @tauri-apps/cli

# Create new project
npm create tauri-app

# My stack choice:
# - React + TypeScript
# - Vite for fast dev builds
# - Zustand for state management

Frontend: React + TypeScript

DashFlow's frontend is standard React:

// src/App.tsx
import { useState, useEffect } from 'react'
import { invoke } from '@tauri-apps/api/tauri'
import { WeatherWidget } from './widgets/Weather'
import { TasksWidget } from './widgets/Tasks'
import { SystemStatsWidget } from './widgets/SystemStats'

function App() {
  const [widgets, setWidgets] = useState([])
  
  useEffect(() => {
    loadWidgets()
  }, [])
  
  async function loadWidgets() {
    const data = await invoke('get_widgets')
    setWidgets(data)
  }
  
  return (
    <div className="dashboard">
      <WeatherWidget />
      <TasksWidget />
      <SystemStatsWidget />
    </div>
  )
}

Backend: Rust + Tauri Commands

The magic happens in Rust. Tauri "commands" are Rust functions exposed to JavaScript:

// src-tauri/src/main.rs
use tauri::State;
use sysinfo::{System, SystemExt};

#[tauri::command]
fn get_system_stats() -> SystemStats {
    let mut sys = System::new_all();
    sys.refresh_all();
    
    SystemStats {
        cpu_usage: sys.global_cpu_info().cpu_usage(),
        memory_used: sys.used_memory(),
        memory_total: sys.total_memory(),
        processes: sys.processes().len(),
    }
}

#[tauri::command]
async fn fetch_weather(city: String) -> Result<Weather, String> {
    let api_key = std::env::var("WEATHER_API_KEY")
        .map_err(|_| "API key not found".to_string())?;
    
    let url = format!(
        "https://api.openweathermap.org/data/2.5/weather?q={}&appid={}",
        city, api_key
    );
    
    let response = reqwest::get(&url)
        .await
        .map_err(|e| e.to_string())?
        .json::<Weather>()
        .await
        .map_err(|e| e.to_string())?;
    
    Ok(response)
}

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

Calling Rust from JavaScript

TypeScript provides type safety for Tauri commands:

// src/types/tauri.ts
export interface SystemStats {
  cpu_usage: number
  memory_used: number
  memory_total: number
  processes: number
}

export interface Weather {
  temp: number
  description: string
  humidity: number
}

// src/widgets/SystemStats.tsx
import { invoke } from '@tauri-apps/api/tauri'
import { useEffect, useState } from 'react'
import type { SystemStats } from '../types/tauri'

export function SystemStatsWidget() {
  const [stats, setStats] = useState<SystemStats | null>(null)
  
  useEffect(() => {
    const interval = setInterval(async () => {
      const data = await invoke<SystemStats>('get_system_stats')
      setStats(data)
    }, 1000)
    
    return () => clearInterval(interval)
  }, [])
  
  if (!stats) return <div>Loading...</div>
  
  return (
    <div className="widget">
      <h3>System Stats</h3>
      <p>CPU: {stats.cpu_usage.toFixed(1)}%</p>
      <p>Memory: {(stats.memory_used / stats.memory_total * 100).toFixed(1)}%</p>
      <p>Processes: {stats.processes}</p>
    </div>
  )
}

Challenges & Solutions

Challenge 1: Learning Rust

Problem: I had minimal Rust experience.

Solution:

Started with simple commands (read/write files)
Used ChatGPT to translate JavaScript logic to Rust
Leveraged Rust's excellent error messages
Tauri's documentation has great examples

Takeaway: You don't need to be a Rust expert. Basic understanding is enough for most Tauri apps.

Challenge 2: IPC Communication Overhead

Problem: Frequent JavaScript ↔ Rust communication can be slow.

Solution: Batch operations:

// ❌ Bad: Multiple IPC calls
for (const task of tasks) {
  await invoke('save_task', { task })
}

// ✅ Good: Single batched call
await invoke('save_tasks', { tasks })

Result: 10 task updates: 200ms → 20ms

Challenge 3: Cross-Platform File Paths

Problem: Windows uses C:\Users, macOS uses /Users/, Linux uses /home/.

Solution: Use Tauri's path API:

use tauri::api::path::data_dir;

#[tauri::command]
fn get_data_path() -> Result<String, String> {
    data_dir()
        .ok_or("Could not find data directory".to_string())
        .map(|p| p.to_string_lossy().to_string())
}

import { dataDir } from '@tauri-apps/api/path'

const path = await dataDir()
// Returns correct path for each OS

Challenge 4: State Management

Problem: React state doesn't persist between app restarts.

Solution: Store state in SQLite via Rust:

use rusqlite::{Connection, Result};

#[tauri::command]
fn save_widget_layout(layout: String) -> Result<(), String> {
    let conn = Connection::open("dashflow.db")
        .map_err(|e| e.to_string())?;
    
    conn.execute(
        "INSERT OR REPLACE INTO settings (key, value) VALUES (?1, ?2)",
        &["layout", &layout],
    ).map_err(|e| e.to_string())?;
    
    Ok(())
}

#[tauri::command]
fn load_widget_layout() -> Result<String, String> {
    let conn = Connection::open("dashflow.db")
        .map_err(|e| e.to_string())?;
    
    let layout: String = conn.query_row(
        "SELECT value FROM settings WHERE key = ?1",
        &["layout"],
        |row| row.get(0),
    ).map_err(|e| e.to_string())?;
    
    Ok(layout)
}

When to Choose Tauri vs Electron

Choose Tauri if:

Performance matters (low RAM/small bundle)
You want to learn Rust
Desktop-first app (not a web app wrapper)
You need system-level APIs (file system, notifications)
Users have modern operating systems (Windows 10+, macOS 10.15+)

Choose Electron if:

You need identical behavior across all platforms
Your team only knows JavaScript
You need older Windows/macOS support
You require specific Chromium features
You're porting an existing web app

Results & Impact

Since releasing DashFlow with Tauri:

Performance:

4.8MB installer vs 52MB (Electron)
40-60MB RAM vs 200-300MB
0.5s cold start vs 2-3s
<1% CPU at idle vs 2-3%

User Feedback:

"Finally, a dashboard that doesn't kill my battery!"
"Runs great on my 2015 MacBook Air"
"Update downloads in seconds, not minutes"

Downloads:

1,000+ GitHub stars
5,000+ downloads
Featured in Tauri showcase
Active community contributions

Key Takeaways

Tauri is production-ready - Don't let "newer framework" concerns hold you back. It's stable and well-documented.
Performance gains are real - 90% smaller bundles and 75% less RAM aren't marketing hype. I measured these in production.
Rust learning curve is manageable - You don't need to be a Rust expert. Basic understanding + good documentation = success.
IPC design matters - Minimize JavaScript ↔ Rust calls by batching operations.
Choose the right tool - Tauri isn't always better than Electron. Evaluate based on your specific needs.

Resources

Official Docs:

Learning Rust:

My Code:

DashFlow on GitHub (link placeholder)

What's Next?

I'm working on adding:

Plugin system for custom widgets
Cloud sync for settings
Keyboard shortcuts customization
More built-in widgets (crypto, stocks, RSS)

Want to contribute or have questions? Open an issue on GitHub or reach out on LinkedIn.

DashFlow is an open-source productivity dashboard built with Tauri, React, and TypeScript. Available for Windows, macOS, and Linux.

Why I Chose Tauri Over Electron for DashFlow: 90% Smaller, 75% Less RAM