📘 Desktop App: Electron Development

Ever dreamed of building desktop apps using your web development skills? 🌟 With Electron and TypeScript, you can create powerful cross-platform desktop applications using the technologies you already love!

Today, we’re diving into the exciting world of Electron development, where web meets desktop, and TypeScript ensures our code stays clean and type-safe throughout the journey. Get ready to turn your web apps into desktop powerhouses! 💪

🎯 Introduction

Remember when you had to learn completely different languages for desktop development? 😅 Those days are gone! Electron lets you use HTML, CSS, and JavaScript (or TypeScript!) to build native desktop applications.

Companies like Microsoft (VS Code), Discord, Slack, and Figma all use Electron for their desktop apps. If they can do it, so can you! 🚀

In this tutorial, we’ll explore:

• How Electron bridges web and desktop worlds 🌉
• Building your first TypeScript-powered Electron app 🏗️
• Creating native menus and system integrations 🖥️
• Best practices for performance and security 🔒

Let’s turn your web skills into desktop superpowers! ⚡

📚 Understanding Electron Development

Think of Electron as a bridge between your web app and the operating system. 🌉 It’s like having a special translator that speaks both “web” and “desktop” languages!

What is Electron? 🤔

Electron combines:

• Chromium (for rendering your web content) 🌐
• Node.js (for system access and backend logic) 💻
• Native APIs (for OS-specific features) 🖥️

It’s like having three superheros working together:

• Chromium handles the visuals 🎨
• Node.js manages the behind-the-scenes logic 🧠
• Native APIs connect to your operating system 🔌

The Main and Renderer Processes 🎭

Electron apps have two types of processes:

1. Main Process (The Director) 🎬

   • Creates app windows
   • Manages app lifecycle
   • Handles system interactions

2. Renderer Process (The Actor) 🎭

   • Displays your UI
   • Runs your web code
   • Each window has its own renderer

Think of it like a theater: the main process is the director managing everything behind the scenes, while renderer processes are actors performing on stage! 🎪

🔧 Basic Syntax and Usage

Let’s build our first Electron app with TypeScript! 🎉

Setting Up Your Project 📦

# Create project directory 📁
mkdir my-electron-app && cd my-electron-app

# Initialize npm project 📋
npm init -y

# Install dependencies 📦
npm install --save-dev electron typescript @types/node
npm install --save-dev @types/electron webpack webpack-cli ts-loader

# Initialize TypeScript ⚙️
npx tsc --init

Main Process Setup 🏗️

Create src/main.ts:

import { app, BrowserWindow } from 'electron';
import * as path from 'path';

// Keep a global reference of the window object 🪟
let mainWindow: BrowserWindow | null = null;

const createWindow = (): void => {
  // Create the browser window 🖼️
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 🔒 Security first!
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    },
    icon: path.join(__dirname, 'assets/icon.png') // 🎨 Your app icon!
  });

  // Load the index.html file 📄
  mainWindow.loadFile(path.join(__dirname, '../index.html'));

  // Open DevTools in development 🛠️
  if (process.env.NODE_ENV === 'development') {
    mainWindow.webContents.openDevTools();
  }

  // Handle window closed event 👋
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
};

// App event listeners 👂
app.whenReady().then(() => {
  createWindow();

  // Handle macOS dock click 🍎
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// Quit when all windows are closed (except on macOS) 🚪
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Renderer Process Setup 🎨

Create src/renderer.ts:

// Type-safe DOM manipulation 🎯
const updateStatus = (message: string): void => {
  const statusElement = document.getElementById('status');
  if (statusElement) {
    statusElement.textContent = message;
    statusElement.className = 'status-active'; // 💅 Add some style!
  }
};

// Initialize your app 🚀
document.addEventListener('DOMContentLoaded', () => {
  updateStatus('Electron app is running! 🎉');
  
  // Add click handler with TypeScript 🖱️
  const button = document.getElementById('action-button') as HTMLButtonElement;
  button?.addEventListener('click', () => {
    updateStatus('Button clicked! 🎯');
  });
});

HTML Template 📄

Create index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Electron App 🚀</title>
  <meta http-equiv="Content-Security-Policy" 
        content="default-src 'self'; script-src 'self'">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to Electron! 🎉</h1>
  <p id="status" class="status">Ready to rock! 🎸</p>
  <button id="action-button">Click me! 🖱️</button>
  
  <script src="./dist/renderer.js"></script>
</body>
</html>

💡 Practical Examples

Let’s build some real-world features! 🛠️

Example 1: Native Menu System 🍔

// menu.ts - Creating native menus with TypeScript
import { Menu, MenuItemConstructorOptions, app, shell } from 'electron';

interface AppMenu {
  template: MenuItemConstructorOptions[];
}

export const createAppMenu = (): void => {
  const isMac = process.platform === 'darwin';
  
  const template: MenuItemConstructorOptions[] = [
    // File menu 📁
    {
      label: 'File',
      submenu: [
        {
          label: 'New Project',
          accelerator: 'CmdOrCtrl+N',
          click: () => {
            console.log('Creating new project... 🆕');
            // Your new project logic here! 
          }
        },
        {
          label: 'Open Project',
          accelerator: 'CmdOrCtrl+O',
          click: () => {
            console.log('Opening project... 📂');
          }
        },
        { type: 'separator' },
        isMac ? { role: 'close' } : { role: 'quit' }
      ]
    },
    // Edit menu ✏️
    {
      label: 'Edit',
      submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' }
      ]
    },
    // Help menu ❓
    {
      label: 'Help',
      submenu: [
        {
          label: 'Documentation 📚',
          click: async () => {
            await shell.openExternal('https://electronjs.org');
          }
        }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
};

Example 2: System Tray Integration 🎯

// tray.ts - System tray with TypeScript
import { Tray, Menu, nativeImage, app } from 'electron';
import * as path from 'path';

export class AppTray {
  private tray: Tray | null = null;
  
  constructor(private iconPath: string) {}
  
  createTray(): void {
    // Create tray icon 🖼️
    const icon = nativeImage.createFromPath(this.iconPath);
    this.tray = new Tray(icon);
    
    // Set tooltip ✨
    this.tray.setToolTip('My Awesome Electron App! 🚀');
    
    // Create context menu 📋
    const contextMenu = Menu.buildFromTemplate([
      {
        label: 'Show App',
        click: () => {
          console.log('Showing app window... 🪟');
          // Show your main window here!
        }
      },
      {
        label: 'Settings',
        click: () => {
          console.log('Opening settings... ⚙️');
        }
      },
      { type: 'separator' },
      {
        label: 'Quit',
        click: () => {
          app.quit();
        }
      }
    ]);
    
    // Set the context menu 🎯
    this.tray.setContextMenu(contextMenu);
    
    // Handle tray click 🖱️
    this.tray.on('click', () => {
      console.log('Tray clicked! 🎯');
    });
  }
  
  destroy(): void {
    this.tray?.destroy();
  }
}

Example 3: IPC Communication 📡

// preload.ts - Secure bridge between main and renderer
import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';

// Define your API interface 📝
interface ElectronAPI {
  sendMessage: (channel: string, data: any) => void;
  onMessage: (channel: string, callback: (data: any) => void) => void;
}

// Expose secure API to renderer 🔒
contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel: string, data: any) => {
    // Whitelist channels for security 🛡️
    const validChannels = ['toMain', 'saveFile', 'openFile'];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  onMessage: (channel: string, callback: (data: any) => void) => {
    const validChannels = ['fromMain', 'fileData'];
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (event: IpcRendererEvent, data: any) => callback(data));
    }
  }
} as ElectronAPI);

// In your renderer TypeScript:
declare global {
  interface Window {
    electronAPI: ElectronAPI;
  }
}

// Usage in renderer 🎨
window.electronAPI.sendMessage('toMain', { 
  action: 'save',
  content: 'Hello from renderer! 👋'
});

window.electronAPI.onMessage('fromMain', (data) => {
  console.log('Received from main:', data);
});

🚀 Advanced Concepts

Ready to level up your Electron game? Let’s explore advanced features! 🎮

Auto-Updater Implementation 🔄

// updater.ts - Auto-update functionality
import { autoUpdater } from 'electron-updater';
import { BrowserWindow, dialog } from 'electron';

export class AppUpdater {
  constructor(private mainWindow: BrowserWindow) {
    // Configure auto-updater 🔧
    autoUpdater.autoDownload = false;
    autoUpdater.autoInstallOnAppQuit = true;
    
    this.setupEventListeners();
  }
  
  private setupEventListeners(): void {
    // Update available 🎉
    autoUpdater.on('update-available', (info) => {
      dialog.showMessageBox(this.mainWindow, {
        type: 'info',
        title: 'Update Available! 🚀',
        message: `Version ${info.version} is available. Download now?`,
        buttons: ['Yes, please! 👍', 'Maybe later 🕐'],
        defaultId: 0
      }).then((result) => {
        if (result.response === 0) {
          autoUpdater.downloadUpdate();
        }
      });
    });
    
    // Download progress 📊
    autoUpdater.on('download-progress', (progress) => {
      const message = `Downloaded ${Math.round(progress.percent)}% 📥`;
      this.mainWindow.webContents.send('download-progress', progress);
    });
    
    // Update downloaded ✅
    autoUpdater.on('update-downloaded', () => {
      dialog.showMessageBox(this.mainWindow, {
        type: 'info',
        title: 'Update Ready! 🎊',
        message: 'Update downloaded. Restart now?',
        buttons: ['Restart! 🔄', 'Later 🕐']
      }).then((result) => {
        if (result.response === 0) {
          autoUpdater.quitAndInstall();
        }
      });
    });
  }
  
  checkForUpdates(): void {
    autoUpdater.checkForUpdatesAndNotify();
  }
}

Window State Management 🪟

// windowState.ts - Remember window position and size
import { BrowserWindow } from 'electron';
import * as fs from 'fs';
import * as path from 'path';

interface WindowState {
  x?: number;
  y?: number;
  width: number;
  height: number;
  isMaximized: boolean;
}

export class WindowStateManager {
  private state: WindowState;
  private stateFile: string;
  
  constructor(private defaultState: WindowState, statePath: string) {
    this.stateFile = path.join(statePath, 'window-state.json');
    this.state = this.loadState();
  }
  
  private loadState(): WindowState {
    try {
      // Load saved state 💾
      const data = fs.readFileSync(this.stateFile, 'utf8');
      return { ...this.defaultState, ...JSON.parse(data) };
    } catch {
      // Return default if no saved state 🆕
      return this.defaultState;
    }
  }
  
  private saveState(): void {
    try {
      fs.writeFileSync(this.stateFile, JSON.stringify(this.state, null, 2));
    } catch (error) {
      console.error('Failed to save window state:', error);
    }
  }
  
  manage(window: BrowserWindow): void {
    // Restore window state 🔄
    if (this.state.x !== undefined && this.state.y !== undefined) {
      window.setBounds({
        x: this.state.x,
        y: this.state.y,
        width: this.state.width,
        height: this.state.height
      });
    }
    
    if (this.state.isMaximized) {
      window.maximize();
    }
    
    // Track window changes 👀
    window.on('resize', () => this.updateState(window));
    window.on('move', () => this.updateState(window));
    window.on('close', () => this.saveState());
  }
  
  private updateState(window: BrowserWindow): void {
    const bounds = window.getBounds();
    this.state = {
      x: bounds.x,
      y: bounds.y,
      width: bounds.width,
      height: bounds.height,
      isMaximized: window.isMaximized()
    };
  }
}

⚠️ Common Pitfalls and Solutions

Let’s avoid these common Electron gotchas! 🎯

Pitfall 1: Security Vulnerabilities 🔒

// ❌ Wrong: Enabling Node integration without context isolation
const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,  // 🚨 Security risk!
    contextIsolation: false // 🚨 Another risk!
  }
});

// ✅ Correct: Use preload script with context isolation
const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,      // 🛡️ Secure
    contextIsolation: true,      // 🛡️ Isolated
    preload: path.join(__dirname, 'preload.js')
  }
});

Pitfall 2: Memory Leaks 💾

// ❌ Wrong: Not cleaning up event listeners
class MyComponent {
  private windows: BrowserWindow[] = [];
  
  createWindow(): void {
    const win = new BrowserWindow({ width: 800, height: 600 });
    this.windows.push(win); // 🚨 Never removed!
  }
}

// ✅ Correct: Proper cleanup
class MyComponent {
  private windows: Set<BrowserWindow> = new Set();
  
  createWindow(): void {
    const win = new BrowserWindow({ width: 800, height: 600 });
    this.windows.add(win);
    
    // Clean up on close 🧹
    win.on('closed', () => {
      this.windows.delete(win);
    });
  }
  
  cleanup(): void {
    // Close all windows properly 🚪
    this.windows.forEach(win => {
      if (!win.isDestroyed()) {
        win.close();
      }
    });
    this.windows.clear();
  }
}

Pitfall 3: Platform Differences 🖥️

// ❌ Wrong: Assuming Windows paths everywhere
const configPath = 'C:\\Users\\AppData\\config.json'; // 🚨 Windows only!

// ✅ Correct: Use platform-agnostic paths
import { app } from 'electron';
import * as path from 'path';

const configPath = path.join(
  app.getPath('userData'), // 📁 Platform-specific app data
  'config.json'
);

// Handle platform-specific features 🎯
if (process.platform === 'darwin') {
  // macOS specific code 🍎
  app.dock.setIcon(iconPath);
} else if (process.platform === 'win32') {
  // Windows specific code 🪟
  app.setAppUserModelId('com.mycompany.myapp');
}

🛠️ Best Practices

Follow these golden rules for awesome Electron apps! ✨

1. Security First! 🔒

// Always validate IPC messages 🛡️
ipcMain.handle('file-operation', async (event, operation: string, data: any) => {
  // Validate operation type
  const allowedOperations = ['read', 'write', 'delete'];
  if (!allowedOperations.includes(operation)) {
    throw new Error('Invalid operation! 🚫');
  }
  
  // Validate file paths
  const safePath = path.normalize(data.path);
  const appDir = app.getPath('userData');
  
  if (!safePath.startsWith(appDir)) {
    throw new Error('Access denied! 🛑');
  }
  
  // Proceed with operation...
});

2. Performance Optimization 🚀

// Lazy load heavy modules 💤
let heavyModule: any;

const getHeavyModule = async () => {
  if (!heavyModule) {
    heavyModule = await import('./heavyModule');
  }
  return heavyModule;
};

// Use web workers for CPU-intensive tasks 💪
const worker = new Worker('./dist/worker.js');
worker.postMessage({ cmd: 'processData', data: largeDataset });

3. User Experience 🎨

// Show loading states appropriately ⏳
mainWindow.once('ready-to-show', () => {
  mainWindow.show(); // Show only when ready! ✨
});

// Handle deep links 🔗
app.setAsDefaultProtocolClient('myapp');
app.on('open-url', (event, url) => {
  event.preventDefault();
  handleDeepLink(url);
});

4. Error Handling 🐛

// Global error handling 🌍
process.on('uncaughtException', (error) => {
  console.error('Uncaught Exception:', error);
  // Log to file and show user-friendly message 📝
  dialog.showErrorBox('Oops! 😅', 'Something went wrong. Please restart the app.');
});

// Graceful shutdown 👋
app.on('before-quit', async () => {
  await saveAppState();
  await closeAllConnections();
});

5. Testing Strategy 🧪

// Test main process code
describe('Window Manager', () => {
  it('should create window with correct dimensions', () => {
    const win = createWindow({ width: 800, height: 600 });
    expect(win.getBounds()).toMatchObject({
      width: 800,
      height: 600
    });
  });
});

// Test renderer process with spectron
import { Application } from 'spectron';

const app = new Application({
  path: electronPath,
  args: [appPath]
});

await app.start();
const text = await app.client.getText('#status');
expect(text).toBe('Ready to rock! 🎸');

🧪 Hands-On Exercise

Time to build your own Electron feature! 🏗️

Challenge: Create a note-taking app with these features:

1. Create, edit, and delete notes 📝
2. Save notes to local storage 💾
3. Add keyboard shortcuts ⌨️
4. Implement dark mode toggle 🌙

Here’s your starter code:

// Your turn! Create main.ts
import { app, BrowserWindow, Menu, ipcMain } from 'electron';

// TODO: Create your main window
// TODO: Set up menu with File > New Note
// TODO: Handle IPC for note operations
// TODO: Implement dark mode toggle

// Hints:
// - Use electron-store for persistence 💾
// - Register global shortcuts with accelerator ⚡
// - Toggle dark mode with nativeTheme 🎨

// main.ts - Complete solution
import { app, BrowserWindow, Menu, ipcMain, nativeTheme, globalShortcut } from 'electron';
import Store from 'electron-store';
import * as path from 'path';

interface Note {
  id: string;
  title: string;
  content: string;
  createdAt: Date;
  updatedAt: Date;
}

const store = new Store<{ notes: Note[] }>({ 
  defaults: { notes: [] } 
});

let mainWindow: BrowserWindow | null = null;

const createWindow = (): void => {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    },
    titleBarStyle: 'hiddenInset', // 😎 Modern look on macOS
    backgroundColor: nativeTheme.shouldUseDarkColors ? '#1e1e1e' : '#ffffff'
  });

  mainWindow.loadFile('index.html');
  
  // Register shortcuts ⌨️
  globalShortcut.register('CommandOrControl+N', () => {
    mainWindow?.webContents.send('create-new-note');
  });
  
  globalShortcut.register('CommandOrControl+S', () => {
    mainWindow?.webContents.send('save-current-note');
  });
};

// Create app menu 📋
const createMenu = (): void => {
  const template: any[] = [
    {
      label: 'File',
      submenu: [
        {
          label: 'New Note',
          accelerator: 'CmdOrCtrl+N',
          click: () => mainWindow?.webContents.send('create-new-note')
        },
        {
          label: 'Save Note',
          accelerator: 'CmdOrCtrl+S',
          click: () => mainWindow?.webContents.send('save-current-note')
        },
        { type: 'separator' },
        { role: 'quit' }
      ]
    },
    {
      label: 'View',
      submenu: [
        {
          label: 'Toggle Dark Mode',
          accelerator: 'CmdOrCtrl+D',
          click: () => {
            nativeTheme.themeSource = nativeTheme.shouldUseDarkColors ? 'light' : 'dark';
            mainWindow?.webContents.send('theme-changed', nativeTheme.shouldUseDarkColors);
          }
        },
        { type: 'separator' },
        { role: 'reload' },
        { role: 'toggleDevTools' }
      ]
    }
  ];
  
  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
};

// IPC handlers 📡
ipcMain.handle('get-notes', (): Note[] => {
  return store.get('notes', []);
});

ipcMain.handle('save-note', (_, note: Note): void => {
  const notes = store.get('notes', []);
  const index = notes.findIndex(n => n.id === note.id);
  
  if (index >= 0) {
    notes[index] = { ...note, updatedAt: new Date() };
  } else {
    notes.push({ ...note, createdAt: new Date(), updatedAt: new Date() });
  }
  
  store.set('notes', notes);
});

ipcMain.handle('delete-note', (_, noteId: string): void => {
  const notes = store.get('notes', []);
  store.set('notes', notes.filter(n => n.id !== noteId));
});

ipcMain.handle('get-theme', (): boolean => {
  return nativeTheme.shouldUseDarkColors;
});

// App lifecycle 🔄
app.whenReady().then(() => {
  createWindow();
  createMenu();
});

app.on('window-all-closed', () => {
  globalShortcut.unregisterAll();
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// renderer.ts - UI logic
interface NoteAPI {
  getNotes: () => Promise<Note[]>;
  saveNote: (note: Note) => Promise<void>;
  deleteNote: (id: string) => Promise<void>;
  getTheme: () => Promise<boolean>;
  onNewNote: (callback: () => void) => void;
  onSaveNote: (callback: () => void) => void;
  onThemeChange: (callback: (isDark: boolean) => void) => void;
}

declare global {
  interface Window {
    noteAPI: NoteAPI;
  }
}

class NoteApp {
  private currentNote: Note | null = null;
  private notesList: HTMLElement;
  private editor: HTMLTextAreaElement;
  private titleInput: HTMLInputElement;
  
  constructor() {
    this.notesList = document.getElementById('notes-list')!;
    this.editor = document.getElementById('editor') as HTMLTextAreaElement;
    this.titleInput = document.getElementById('note-title') as HTMLInputElement;
    
    this.init();
  }
  
  private async init(): Promise<void> {
    // Load saved notes 📚
    await this.loadNotes();
    
    // Set up event listeners 👂
    this.setupEventListeners();
    
    // Apply saved theme 🎨
    const isDark = await window.noteAPI.getTheme();
    this.applyTheme(isDark);
  }
  
  private async loadNotes(): Promise<void> {
    const notes = await window.noteAPI.getNotes();
    this.renderNotes(notes);
  }
  
  private renderNotes(notes: Note[]): void {
    this.notesList.innerHTML = notes.map(note => `
      <div class="note-item" data-id="${note.id}">
        <h3>${note.title || 'Untitled'} 📝</h3>
        <p>${new Date(note.updatedAt).toLocaleDateString()} 📅</p>
        <button class="delete-btn" data-id="${note.id}">🗑️</button>
      </div>
    `).join('');
  }
  
  private setupEventListeners(): void {
    // Note selection 🖱️
    this.notesList.addEventListener('click', (e) => {
      const target = e.target as HTMLElement;
      const noteItem = target.closest('.note-item');
      
      if (target.classList.contains('delete-btn')) {
        this.deleteNote(target.dataset.id!);
      } else if (noteItem) {
        this.selectNote(noteItem.dataset.id!);
      }
    });
    
    // Auto-save on input 💾
    let saveTimeout: NodeJS.Timeout;
    const autoSave = () => {
      clearTimeout(saveTimeout);
      saveTimeout = setTimeout(() => this.saveCurrentNote(), 1000);
    };
    
    this.titleInput.addEventListener('input', autoSave);
    this.editor.addEventListener('input', autoSave);
    
    // IPC event handlers 📡
    window.noteAPI.onNewNote(() => this.createNewNote());
    window.noteAPI.onSaveNote(() => this.saveCurrentNote());
    window.noteAPI.onThemeChange((isDark) => this.applyTheme(isDark));
  }
  
  private createNewNote(): void {
    this.currentNote = {
      id: Date.now().toString(),
      title: '',
      content: '',
      createdAt: new Date(),
      updatedAt: new Date()
    };
    
    this.titleInput.value = '';
    this.editor.value = '';
    this.titleInput.focus();
  }
  
  private async saveCurrentNote(): Promise<void> {
    if (!this.currentNote) return;
    
    this.currentNote.title = this.titleInput.value;
    this.currentNote.content = this.editor.value;
    
    await window.noteAPI.saveNote(this.currentNote);
    await this.loadNotes();
    
    // Show save indicator ✅
    this.showSaveIndicator();
  }
  
  private showSaveIndicator(): void {
    const indicator = document.createElement('div');
    indicator.className = 'save-indicator';
    indicator.textContent = 'Saved! ✨';
    document.body.appendChild(indicator);
    
    setTimeout(() => indicator.remove(), 2000);
  }
  
  private applyTheme(isDark: boolean): void {
    document.body.classList.toggle('dark-theme', isDark);
  }
}

// Initialize app when DOM is ready 🚀
document.addEventListener('DOMContentLoaded', () => {
  new NoteApp();
});

🎓 Key Takeaways

You’ve just mastered Electron development with TypeScript! Here’s what you’ve learned:

• Electron Architecture 🏗️ - Main and renderer processes working together
• TypeScript Integration 📘 - Type-safe desktop app development
• Native Features 🖥️ - Menus, tray icons, and system integration
• IPC Communication 📡 - Secure message passing between processes
• Security Best Practices 🔒 - Context isolation and preload scripts
• Cross-Platform Development 🌍 - One codebase, multiple platforms
• Auto-Updates 🔄 - Keep your app fresh with automatic updates
• Performance Tips 🚀 - Memory management and optimization

🤝 Next Steps

Congratulations on building your first Electron app! 🎊 You’re now ready to create amazing desktop applications!

Here’s where to go next:

• Explore Electron Forge for easier packaging and distribution 📦
• Learn about code signing for trusted applications 🔏
• Implement crash reporting with Sentry or similar services 🐛
• Try Electron Builder for professional app distribution 🚀
• Join the Electron community and share your creations! 🌟

Remember, every great desktop app started with someone just like you taking the first step. Now go build something awesome! 💪

Happy coding, desktop developer! May your apps be fast, your bundles small, and your users delighted! 🚀✨