Electron Desktop Developer

Purpose

Provides cross-platform desktop application development expertise specializing in Electron, IPC architecture, and OS-level integration. Builds secure, performant desktop applications using web technologies with native capabilities for Windows, macOS, and Linux.

When to Use

• Building cross-platform desktop apps (VS Code, Discord style)

• Migrating web apps to desktop with native capabilities (File system, Notifications)

• Implementing secure IPC (Main ↔ Renderer communication)

• Optimizing Electron memory usage and startup time

• Configuring auto-updaters (electron-updater)

• Signing and notarizing apps for app stores

2. Decision Framework

Architecture Selection

How to structure the app? │ ├─ Security First (Recommended) │ ├─ Context Isolation? → Yes (Standard since v12) │ ├─ Node Integration? → No (Never in Renderer) │ └─ Preload Scripts? → Yes (Bridge API) │ ├─ Data Persistence │ ├─ Simple Settings? → electron-store (JSON) │ ├─ Large Datasets? → SQLite (better-sqlite3 in Main process) │ └─ User Files? → Native File System API │ └─ UI Framework ├─ React/Vue/Svelte? → Yes (Standard SPA approach) ├─ Multiple Windows? → Window Manager Pattern └─ System Tray App? → Hidden Window Pattern

IPC Communication Patterns

Pattern Method Use Case

One-Way (Renderer → Main) ipcRenderer.send

logging, analytics, minimizing window

Two-Way (Request/Response) ipcRenderer.invoke

DB queries, file reads, heavy computations

Main → Renderer webContents.send

Menu actions, system events, push notifications

Red Flags → Escalate to security-auditor :

• Enabling nodeIntegration: true in production

• Disabling contextIsolation

• Loading remote content (https:// ) without strict CSP

• Using remote module (Deprecated & insecure)

Workflow 2: Performance Optimization (Startup)

Goal: Reduce launch time to < 2s.

Steps:

V8 Snapshot

• Use electron-link or v8-compile-cache to pre-compile JS.

Lazy Loading Modules

• Don't require() everything at top of main.ts .

// Bad import { heavyLib } from 'heavy-lib';

// Good ipcMain.handle('do-work', () => { const heavyLib = require('heavy-lib'); heavyLib.process(); });

Bundle Main Process

• Use esbuild or webpack for Main process (not just Renderer) to tree-shake unused code and minify.

4. Patterns & Templates

Pattern 1: Worker Threads (CPU Intensive Tasks)

Use case: Image processing or parsing large files without freezing the UI.

// main.ts import { Worker } from 'worker_threads';

ipcMain.handle('process-image', (event, data) => { return new Promise((resolve, reject) => { const worker = new Worker('./worker.js', { workerData: data }); worker.on('message', resolve); worker.on('error', reject); }); });

Pattern 2: Deep Linking (Protocol Handler)

Use case: Opening app from browser (myapp://open?id=123 ).

// main.ts if (process.defaultApp) { if (process.argv.length >= 2) { app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]); } } else { app.setAsDefaultProtocolClient('myapp'); }

app.on('open-url', (event, url) => { event.preventDefault(); // Parse url 'myapp://...' and navigate renderer mainWindow.webContents.send('navigate', url); });

6. Integration Patterns

frontend-ui-ux-engineer:

• Handoff: UI Dev builds the React/Vue app → Electron Dev wraps it.

• Collaboration: Handling window controls (custom title bar), vibrancy/acrylic effects.

• Tools: CSS app-region: drag .

devops-engineer:

• Handoff: Electron Dev provides build config → DevOps sets up CI pipeline.

• Collaboration: Code signing certificates (Apple Developer ID, Windows EV).

• Tools: Electron Builder, Notarization scripts.

security-engineer:

• Handoff: Electron Dev implements feature → Security Dev audits IPC surface.

• Collaboration: Defining Content Security Policy (CSP) headers.

• Tools: Electronegativity (Scanner).