Utveckling av skrivbordsappar med Electron · Lektion

Main- och renderer-processen

Utforska rollerna och ansvarsområdena för main- och renderer-processerna samt hur de samverkar för att bilda en komplett Electron-applikation.

Lektion 1 av 411 steg

Main- och renderer-processen är en gratis lektion i Utveckling av skrivbordsappar med Electron på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av skrivbordsappar med Electron, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.

Electrons dubbla natur

Välkommen! Electron låter dig bygga datorprogram med webbteknik. Men det är inte en enkel webbläsare. Det använder en unik arkitektur med två processer för att göra detta möjligt.

Du kommer att lära dig om de två huvudsakliga processtyperna: huvudprocessen och renderingsprocessen. Att förstå deras roller är avgörande för att bygga robusta Electron-program.

Huvudprocessen: Dirigenten

Tänk på huvudprocessen som dirigenten för ditt Electron-program. Det är en Node.js-miljö, vilket innebär att den har full åtkomst till Node.js API:er och kan kommunicera direkt med operativsystemet.

Vanligtvis körs endast en huvudprocess per Electron-program.

Huvudprocessens ansvarsområden

Huvudprocessen ansvarar för centrala programuppgifter, bland annat:

Skapa och hantera webbläsarfönster: Varje fönster i programmet styrs av huvudprocessen.
Hantera händelser i programmets livscykel: Till exempel när programmet startar, avslutas eller blir aktivt.
Åtkomst till inbyggda operativsystemsfunktioner: Till exempel att skapa menyer, öppna dialogrutor och kommunicera med filsystemet.
Hantera resurser som gäller för hela programmet: Inställningar, globalt tillstånd med mera.

Huvudprocessen i praktiken

Det här är en typisk main.js-fil, startpunkten för ett Electron-program. Den skapar och hanterar fönster. Observera att den använder Electrons moduler och Node.js-funktioner.

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false, // Keep false for security
      contextIsolation: true  // Keep true for security
    }
  });

  // Load the index.html of the app.
  mainWindow.loadFile('index.html');

  // Open the DevTools.
  // mainWindow.webContents.openDevTools();
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.whenReady().then(createWindow);

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

// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Renderingsprocessen: Användargränssnittet

Renderingsprocessen är där ditt användargränssnitt finns. Varje Electron-fönster (som skapas av huvudprocessen) kör sin egen dedikerade renderingsprocess. Den är i praktiken en komplett Chromium-webbläsarinstans, precis som en flik i Chrome.

Det är här programmets HTML, CSS och JavaScript för användargränssnittet körs.

Renderingsprocessens ansvarsområden

Renderingsprocessen fokuserar på att visa innehåll och kommunicera med användaren:

Rendera webbinnehåll: Den tar din HTML, CSS och JavaScript och visar det visuellt.
Hantera användarinteraktioner: Den reagerar på klick, tangentbordsinmatning, formulärinskickningar med mera.
Köra webb-API:er: Alla vanliga webbläsar-API:er, som DOM-manipulering, Fetch API och Web Workers, är tillgängliga här.
Begränsad direkt åtkomst till operativsystemet: Av säkerhetsskäl har den som standard inte direkt åtkomst till Node.js-moduler eller inbyggda operativsystemsfunktioner.

Renderingsprocessen i praktiken

Den här index.html-filen läses in av huvudprocessen i ett fönster. JavaScript-koden i den körs i renderingsprocessen, precis som i en webbläsare.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Electron App UI</title>
  <style>
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding: 50px; background-color: #f0f2f5; color: #333; }
    h1 { color: #2c3e50; }
    p { margin-top: 20px; font-size: 1.1em; }
    code { background-color: #e0e0e0; padding: 2px 4px; border-radius: 3px; }
  </style>
</head>
<body>
  <h1>Hello from the Renderer!</h1>
  <p>This content is displayed by Chromium inside an Electron window.</p>
  <p>The script below runs in the <code>Renderer Process</code>.</p>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const messageDiv = document.createElement('div');
      messageDiv.innerHTML = '<p><b>DOM Content Loaded!</b> This is a Renderer process event.</p>';
      document.body.appendChild(messageDiv);
      console.log('Renderer process is ready!');
    });
  </script>
</body>
</html>

Huvudprocessen jämfört med renderingsprocessen: Viktiga skillnader

Här är en snabb sammanfattning av de viktigaste skillnaderna:

Miljö:
Huvudprocess: Node.js-körmiljö
Renderingsprocess: Chromiums webbkörmiljö
Instanser:
Huvudprocess: En instans per program
Renderingsprocess: En per BrowserWindow
Åtkomst till operativsystemet:
Huvudprocess: Full åtkomst till Node.js och det inbyggda operativsystemet
Renderingsprocess: Begränsade, webbaserade API:er (som standard)
Syfte:
Huvudprocess: Programmets livscykel, fönsterhantering och inbyggda funktioner
Renderingsprocess: Rendering av användargränssnitt och användarinteraktion

Varför en modell med två processer?

Den här arkitekturen finns inte bara för att göra saker mer komplexa; den ger betydande fördelar:

Säkerhet: Potentiellt otillförlitligt webbinnehåll isoleras från direkt åtkomst till operativsystemet. Om en renderingsprocess utsätts för ett angrepp skyddas huvudprocessen och systemet.
Stabilitet: Om en viss webbsida (renderingsprocess) kraschar på grund av ett fel påverkar det inte hela programmet eller andra fönster.
Prestanda: Tunga uppgifter kan köras i huvudprocessen (eller i separata arbetarprocesser), vilket håller användargränssnittet (renderingsprocessen) responsivt och smidigt.

Kontroll av processernas roller

Testa dina kunskaper om huvudprocessen och renderingsprocesserna.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Huvudprocess och renderingsprocess

Utmärkt! Nu har du förstått den grundläggande arkitekturen för Electron-program.

Huvudprocessen (Node.js) är kontrollcentrumet som hanterar fönster och får åtkomst till inbyggda operativsystemsfunktioner.
Varje renderingsprocess (Chromium) visar ditt webbaserade användargränssnitt i ett fönster.

Den här uppdelningen ger säkerhet, stabilitet och prestanda. I nästa lektion får du se hur dessa processer kommunicerar med varandra!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 47

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Main- och renderer-processen” gratis?

Ja – hela texten till ”Main- och renderer-processen” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av skrivbordsappar med Electron, kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.

Vad lär jag mig i ”Main- och renderer-processen”?

Utforska rollerna och ansvarsområdena för main- och renderer-processerna samt hur de samverkar för att bilda en komplett Electron-applikation. Ni övar på Utveckling av skrivbordsappar med Electron med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av skrivbordsappar med Electron?

Du behöver inga förkunskaper. Utbildningen i Utveckling av skrivbordsappar med Electron på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Main- och renderer-processen”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av skrivbordsappar med Electron-lektionen?

Ja. Varje Utveckling av skrivbordsappar med Electron-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Utveckling av skrivbordsappar med Electron