Electron Pro

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

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:

1. V8 Snapshot

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

1. Lazy Loading Modules

• Don't require() everything at top of main.ts. ```javascript // Bad import { heavyLib } from 'heavy-lib';

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

3.  **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).

---