Electron Desktop Developer

Purpose

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

ipcRenderer.send

ipcRenderer.invoke

webContents.send

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)

1. V8 Snapshot
   • Use

     electron-link

     or

     v8-compile-cache

     to pre-compile JS.
2. 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)

// 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)

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