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); });
- 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).