Kapitel 16: Häufige Interviewfragen

In diesem Kapitel finden Sie häufige Interviewfragen für Electron-Entwickler.

16.1 Grundlegende Konzeptfragen

Frage 1: Was ist Electron?

Antwort: Electron ist ein Open-Source-Framework zur Entwicklung plattformübergreifender Desktop-Anwendungen mit Webtechnologien (HTML, CSS, JavaScript) in Kombination mit Node.js.

Wichtig zu erwähnen:

• Kombiniert Chromium (Rendering) + Node.js (Backend)
• Ermöglicht Wiederverwendung von Web-Code für Desktop-Apps
• Beispiele: VS Code, Slack, Discord

Frage 2: Beschreiben Sie die Electron-Architektur

Antwort: Electron besteht aus zwei Hauptprozessen:

┌─────────────────────────────┐
│         Electron App        │
│  ┌───────────────────┐  │
│  │  Hauptprozess        │  │
│  │  - App-Lebenszyklus  │  │
│  │  - Fenstersteuerung  │  │
│  │  - Native APIs       │  │
│  └─────────┬─────────┘  │
│             │ IPC           │
│  ┌─────────▼─────────┐  │
│  │  Renderer-Prozess    │  │
│  │  - UI-Rendering      │  │
│  │  - Frontend-Logik    │  │
│  └───────────────────┘  │
└─────────────────────────────┘

Frage 3: Was ist der Unterschied zwischen Haupt- und Renderer-Prozess?

Antwort-Tabelle:

Aspekt	Hauptprozess	Renderer-Prozess
Laufzeit	Node.js	Chromium
Fenster	Erstellt Fenster	Rendert UI
Node.js	Vollständig	Nein (bei Isolation)
IPC-Rolle	Empfängt/Sendet	Sendet/Empfängt
Native APIs	Ja	Nein

16.2 Kernfunktionsfragen

Frage 4: Wie funktioniert IPC in Electron?

Antwort: IPC (Inter-Process Communication) ermöglicht den Datenaustausch zwischen Haupt- und Renderer-Prozess.

Einweg-Kommunikation:

// Renderer → Main
ipcRenderer.send('channel', data);

// Main empfängt
ipcMain.on('channel', (event, data) => {
  console.log(data);
});

Zweiweg-Kommunikation (modern):

// Main: Handler registrieren
ipcMain.handle('get-data', async (event, params) => {
  const result = await fetchData(params);
  return result;  // Wird zum Renderer zurückgegeben
});

// Renderer: Aufrufen
const result = await ipcRenderer.invoke('get-data', params);

Frage 5: Wie erstellt man ein Fenster in Electron?

Antwort:

const { BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  win.loadFile('index.html');
}

Frage 6: Was ist ein Preload-Skript und warum wird es benötigt?

Antwort: Ein Preload-Skript ist eine sichere Brücke zwischen Haupt- und Renderer-Prozess.

Warum benötigt?

• Bei contextIsolation: true kann der Renderer nicht direkt auf ipcRenderer zugreifen
• Preload-Skript hat Zugriff auf Node.js-APIs
• Ermöglicht kontrollierte API-Freigabe

Beispiel:

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
  sendMessage: (message) => ipcRenderer.send('message', message),
  onMessage: (callback) => {
    ipcRenderer.on('reply', (event, data) => callback(data));
  }
});

16.3 Praxisszenario-Fragen

Frage 7: Wie paketiert man eine Electron-Anwendung?

Antwort: Mit electron-builder:

# Installieren
npm install electron-builder --save-dev

{
  "scripts": {
    "dist": "electron-builder"
  },
  "build": {
    "appId": "com.beispiel.app",
    "productName": "Meine App",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis",
      "icon": "assets/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "assets/icon.icns"
    }
  }
}

# Paketieren
npm run dist

Frage 8: Wie löst man CORS-Probleme in Electron?

Antwort:

1. Anfragen über Hauptprozess (empfohlen):

// main.js
ipcMain.handle('fetch-data', async (event, url) => {
  const axios = require('axios');
  const response = await axios.get(url);
  return response.data;
});

2. WebSecurity deaktivieren (nur Entwicklung):

const win = new BrowserWindow({
  webPreferences: {
    webSecurity: false  // UNSICHER!
  }
});

Frage 9: Wie speichert man Daten in Electron?

Antwort: Es gibt verschiedene Möglichkeiten:

1. localStorage (Renderer, leichtgewichtig):

localStorage.setItem('key', JSON.stringify(value));
const value = JSON.parse(localStorage.getItem('key'));

2. electron-store (Hauptprozess, persistenz):

const Store = require('electron-store');
const store = new Store();

store.set('key', value);
const value = store.get('key');

3. SQLite (Hauptprozess, strukturierte Daten):

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('data.db');

16.4 Fehleranfälligkeitsfragen

Frage 10: Was sind häufige Fehler bei der Electron-Entwicklung?

Antwort:

1. Context Isolation nicht beachtet:

// FALSCH (funktioniert nicht mit contextIsolation: true)
const { ipcRenderer } = require('electron');

// RICHTIG: Preload-Skript verwenden

2. IPC-Kanalnamen vertippt:

// Main
ipcMain.on('get-data', ...);

// Renderer
ipcRenderer.send('getdata');  // FALSCH!

3. Pfade nach Paketierung falsch:

// FALSCH
fs.readFileSync('./config.json');

// RICHTIG
const path = require('path');
const configPath = app.isPackaged 
  ? path.join(process.resourcesPath, 'app.asar', 'config.json')
  : path.join(__dirname, 'config.json');

Frage 11: Wie behandelt man Fehler global in Electron?

Antwort:

Hauptprozess:

// Unhandled Promise Rejections
process.on('unhandledRejection', (reason) => {
  console.error('Unhandled Rejection:', reason);
});

// Uncaught Exceptions
process.on('uncaughtException', (error) => {
  console.error('Uncaught Exception:', error);
  app.quit();
});

Renderer-Prozess:

window.addEventListener('error', (event) => {
  console.error('Fehler:', event.error);
  ipcRenderer.send('renderer-error', {
    message: event.error?.message
  });
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Promise Fehler:', event.reason);
});

16.5 Interviewtipps

Wie man die Kernkonzepte schnell memoriert

1. Haupt- vs. Renderer-Prozess merken

HAUPT-Prozess:
H - Fenster (Hauptfenster)
A - App-Lebenszyklus
U - Node.js Zugriff
P - Prozesse verwalten
T - Tools (native APIs)

RENDERER-Prozess:
R - Rendering (UI)
E - Events (Frontend)
N - Node.js (nur über Preload)
D - DOM-Manipulation
E - Events (User-Interaktion)
R - Rendering (Chromium)

2. IPC-Kommunikation merken

Einweg:
  Renderer → Main:  ipcRenderer.send()
  Main → Renderer:  win.webContents.send()

Zweiweg (modern):
  Renderer:  ipcRenderer.invoke()
  Main:      ipcMain.handle()

3. Wichtige Module merken

APP - App-Lebenszyklus
BROWSERWINDOW - Fenster erstellen
IPCMAIN - IPC im Hauptprozess
IPCRENDERER - IPC im Renderer-Prozess
NOTIFICATION - Benachrichtigungen
MENU - Menüs
TRAY - Tray-Icons
DIALOG - Dateidialoge

Vorbereitung auf technische Fragen

Übungsaufgaben

1. Einfaches IPC-Beispiel implementieren

   • Renderer sendet Nachricht an Main
   • Main verarbeitet und sendet Antwort

2. Fenstersteuerung implementieren

   • Fenster minimieren/maximieren
   • Neues Fenster öffnen

3. Daten speichern und abrufen

   • Mit electron-store arbeiten
   • IPC für Datenaustausch

4. Fehlerbehandlung implementieren

   • Globale Fehler abfangen
   • Benutzerfreundliche Fehlermeldungen

Häufige Interview-Fragen und musterlösungen

Frage: "Erklären Sie die Electron-Architektur"

Musterantwort: "Electron verwendet eine Multi-Prozess-Architektur, ähnlich wie moderne Webbrowser. Der Hauptprozess verwaltet die App und erstellt Fenster, während jeder Renderer-Prozess eine Webseite in einem Fenster rendert. Die Kommunikation erfolgt über IPC. Der Hauptprozess hat vollen Zugriff auf Node.js und native APIs, während der Renderer-Prozess für die UI zuständig ist."

Frage: "Wie stellen Sie die Sicherheit in Electron sicher?"

Musterantwort: "1. Context Isolation aktivieren (contextIsolation: true) 2. Node.js Integration deaktivieren (nodeIntegration: false) 3. Preload-Skripte als sichere Brücke verwenden 4. Content Security Policy (CSP) implementieren 5. WebSecurity aktivieren (webSecurity: true) 6. Nur notwendige APIs über Preload freigeben"

Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• Grundlegende Konzeptfragen zu beantworten
• Kernfunktionsfragen zu erklären
• Praxisszenarien zu beschreiben
• Häufige Fehler zu identifizieren
• Interviewtipps und Musterlösungen zu verwenden

Im nächsten Kapitel werden wir weitere Lernrichtungen erkunden.