Electron-työpöytäsovellusten kehitys · Oppitunti

Main- ja renderer-prosessit

Tutustukaa main- ja renderer-prosessien rooleihin ja vastuisiin sekä siihen, miten ne toimivat yhdessä täydellisen Electron-sovelluksen muodostamiseksi.

Oppitunti 1/411 vaihetta

Main- ja renderer-prosessit on ilmainen Electron-työpöytäsovellusten kehitys-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Electron-työpöytäsovellusten kehitys-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Electronin kaksijakoinen luonne

Tervetuloa! Electronilla voit rakentaa työpöytäsovelluksia verkkoteknologioiden avulla. Se ei kuitenkaan ole pelkkä verkkoselain. Se käyttää ainutlaatuista kahden prosessin arkkitehtuuria tämän mahdollistamiseksi.

Opit kahdesta pääasiallisesta prosessityypistä: pääprosessista ja renderöintiprosessista. Niiden roolien ymmärtäminen on olennaista, kun rakennat vakaita Electron-sovelluksia.

Pääprosessi: kapellimestari

Ajattele pääprosessia Electron-sovelluksesi kapellimestarina. Se on Node.js-ympäristö, mikä tarkoittaa, että sillä on täysi pääsy Node.js-rajapintoihin ja se voi olla suoraan vuorovaikutuksessa käyttöjärjestelmän kanssa.

Electron-sovelluksessa on yleensä käynnissä vain yksi pääprosessi.

Pääprosessin vastuut

Pääprosessi vastaa sovelluksen keskeisistä tehtävistä, kuten:

pääprosessi hallitsee jokaista sovelluksesi ikkunaa.
sovelluksen elinkaaritapahtumien käsittelystä: esimerkiksi sovelluksen käynnistymisestä, sulkeutumisesta tai aktivoitumisesta.
natiivien käyttöjärjestelmätoimintojen käyttämisestä: esimerkiksi valikoiden luomisesta, valintaikkunoiden avaamisesta ja tiedostojärjestelmän käsittelystä.
sovelluksenlaajuisten resurssien hallinnasta: esimerkiksi asetuksista ja globaalista tilasta.

Pääprosessi käytännössä

Tämä on tyypillinen main.js-tiedosto, Electron-sovelluksen aloituspiste. Se luo ja hallitsee ikkunoita. Huomaa, että se käyttää Electronin moduuleja ja Node.js:n ominaisuuksia.

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();
  }
});

Renderöintiprosessi: käyttöliittymän näkymä

Renderöintiprosessissa sijaitsee käyttöliittymäsi. Jokainen Electron-ikkuna (jonka pääprosessi luo) suorittaa oman renderöintiprosessinsa. Se on käytännössä kokonainen Chromium-selainistunto, aivan kuten Chromen välilehti.

Täällä suoritetaan käyttöliittymän HTML, CSS ja JavaScript.

Renderöintiprosessin vastuut

Renderöintiprosessi keskittyy sisällön näyttämiseen ja käyttäjän kanssa toimimiseen:

verkkosisällön renderöinti: se ottaa HTML:n, CSS:n ja JavaScriptin ja näyttää ne visuaalisesti.
käyttäjän toimien käsittely: se reagoi napsautuksiin, näppäimistösyötteeseen, lomakkeiden lähettämiseen ja muihin toimintoihin.
verkkorajapintojen suorittaminen: käytettävissä ovat kaikki tavalliset selainrajapinnat, kuten DOM:n käsittely, Fetch API ja Web Workerit.
rajoitettu suora käyttöjärjestelmäpääsy: turvallisuussyistä sillä ei oletusarvoisesti ole suoraa pääsyä Node.js-moduuleihin tai natiiveihin käyttöjärjestelmäominaisuuksiin.

Renderöintiprosessi käytännössä

Pääprosessi lataa tämän index.html-tiedoston ikkunaan. Sen sisältämä JavaScript suoritetaan renderöintiprosessissa aivan kuten verkkoselaimessa.

<!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>

Pääprosessi ja renderöintiprosessi: keskeiset erot

Tässä on nopea yhteenveto keskeisistä eroista:

Ympäristö:
Pääprosessi: Node.js-ajoympäristö
Renderöintiprosessi: Chromium-verkkoympäristö
Instanssit:
Pääprosessi: yksi instanssi sovellusta kohden
Renderöintiprosessi: yksi jokaista BrowserWindow-instanssia kohden
Käyttöjärjestelmäpääsy:
Pääprosessi: täysi pääsy Node.js:ään ja natiiviin käyttöjärjestelmään
Renderöintiprosessi: rajoitetut, vain verkkoympäristön rajapinnat (oletusarvoisesti)
Tarkoitus:
Pääprosessi: sovelluksen elinkaari, ikkunoiden hallinta ja natiivitoiminnot
Renderöintiprosessi: käyttöliittymän renderöinti ja käyttäjän toimet

Miksi kahden prosessin malli?

Tämä arkkitehtuuri ei ole monimutkaisuutta varten, vaan se tarjoaa merkittäviä etuja:

Turvallisuus: se eristää mahdollisesti epäluotettavan verkkosisällön suorasta käyttöjärjestelmäpääsystä. Jos renderöintiprosessi vaarantuu, pääprosessi ja järjestelmä pysyvät suojattuina.
Vakaus: jos tietty verkkosivu (renderöintiprosessi) kaatuu virheen vuoksi, se ei kaada koko sovellusta tai muita ikkunoita.
Suorituskyky: raskaat tehtävät voidaan suorittaa pääprosessissa (tai erillisissä työprosesseissa), jolloin käyttöliittymä (renderöintiprosessi) pysyy responsiivisena ja sujuvana.

Prosessien roolien tarkistus

Testaa, kuinka hyvin ymmärrät pää- ja renderöintiprosessit.

Vastaa interaktiivisessa oppitunnissa

Kertaus: pää- ja renderöintiprosessi

Hienoa työtä! Nyt ymmärrät Electron-sovellusten perusarkkitehtuurin.

Pääprosessi (Node.js) on ohjauskeskus, joka hallitsee ikkunoita ja käyttää natiiveja käyttöjärjestelmäominaisuuksia.
Jokainen renderöintiprosessi (Chromium) näyttää verkkopohjaisen käyttöliittymäsi ikkunassa.

Tämä erottelu tarjoaa turvallisuutta, vakautta ja suorituskykyä. Seuraavalla oppitunnilla opit, miten nämä prosessit viestivät keskenään!

Aloita maksutta
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
Kurssit
12
Oppitunnit
47
Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Main- ja renderer-prosessit” ilmainen?

Kyllä – oppitunnin ”Main- ja renderer-prosessit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Electron-työpöytäsovellusten kehitys-kurssin, päivitä CoddyKit PROhon. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Main- ja renderer-prosessit”?

Tutustukaa main- ja renderer-prosessien rooleihin ja vastuisiin sekä siihen, miten ne toimivat yhdessä täydellisen Electron-sovelluksen muodostamiseksi. Harjoittelet Electron-työpöytäsovellusten kehitys-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Electron-työpöytäsovellusten kehitys-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Electron-työpöytäsovellusten kehitys-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Main- ja renderer-prosessit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Electron-työpöytäsovellusten kehitys-oppitunnilla?

Kyllä. Jokainen Electron-työpöytäsovellusten kehitys-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Electron-työpöytäsovellusten kehitys