desktop-app

Desktop App Development Expertise

Overview

A guide for developing desktop apps using web technologies (HTML, CSS, JavaScript). Support Windows, macOS, and Linux simultaneously with a single codebase.

---

Framework Selection Guide

Framework Selection by Tier (v1.3.0)

Framework	Tier	Recommendation	Use Case
Tauri	Tier 2	⭐ Primary	Lightweight (3MB), Rust security
Electron	Tier 3	Supported	Mature ecosystem, VS Code-like apps

AI-Native Recommendation: Tauri

• 35% YoY growth
• 20-40MB memory vs Electron's 200-400MB
• Mobile support (iOS/Android) via Tauri 2.0
• Rust backend = memory safety

Ecosystem Recommendation: Electron

• Mature tooling
• Node.js integration
• Proven at scale (VS Code, Slack)

Level-wise Recommendations

Starter → Tauri (v2) [Tier 2]
  - Simpler setup than Electron
  - Smaller output bundles (~3MB vs ~150MB)

Dynamic → Tauri + auto-update [Tier 2]
  - Includes server integration, auto-update
  - Lower memory footprint

Enterprise → Tauri [Tier 2] or Electron [Tier 3]
  - Tauri for performance and security
  - Electron for complex Node.js integration

---

Electron Guide

Project Creation

# Create with electron-vite (recommended)
npm create @electron-vite/create my-electron-app
cd my-electron-app

# Install dependencies
npm install

# Start development server
npm run dev

Folder Structure

my-electron-app/
├── src/
│   ├── main/               # Main process (Node.js)
│   │   └── index.ts        # App entry point, window management
│   ├── preload/            # Preload script
│   │   └── index.ts        # Renderer↔Main bridge
│   └── renderer/           # Renderer process (Web)
│       ├── src/            # React/Vue code
│       └── index.html      # HTML entry point
├── resources/              # App icons, assets
├── electron.vite.config.ts # Build configuration
├── electron-builder.yml    # Deployment configuration
└── package.json