Udvikling af desktopapps med Electron · Lektion

Brug af frontend-frameworks

Udforsk, hvordan De integrerer populære frontend-frameworks som React, Vue eller Angular i Deres Electron-projekter for at effektivisere udviklingen af brugergrænsefladen.

Lektion 2 af 411 trin

Brug af frontend-frameworks er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Introduktion: Frameworks i Electron

Frontend-frameworks som React, Vue og Angular hjælper med at bygge komplekse brugergrænseflader effektivt. De tilbyder strukturerede måder at håndtere brugergrænsefladekomponenter og applikationstilstand på.

I Electron kører disse frameworks i det browserlignende miljø i renderer-processen, ligesom de ville gøre i en webbrowser.

Electrons webkerne

Husk, at hvert Electron-vindue i praksis er en mini-browser, der drives af Chromium. Det betyder, at alt, hvad du kan køre i en almindelig webbrowser – HTML, CSS og JavaScript-frameworks – kan køre direkte i en Electron-renderingsproces.

Dine eksisterende kompetencer inden for webudvikling kan bruges direkte!

Populære valg

Mange populære JavaScript-frameworks er fremragende valg til at bygge brugerflader i Electron:

React: Kendt for sin komponentbaserede tilgang og sit omfattende økosystem.
Vue.js: Værdsat for sin enkelhed og trinvise indførelse.
Angular: Et omfattende framework til applikationer i stor skala.

Valget afhænger ofte af dit teams kendskab og projektets behov.

Integrationspunktet

Integration af et framework består af to hoveddele:

Electrons main.js: Opretter et BrowserWindow og angiver, hvilken index.html-fil der skal indlæses.
Din framework-applikation: Denne index.html fungerer derefter som indgangspunkt for dit framework og indlæser dets samlede JavaScript og CSS.

Det minder om den måde, en webserver leverer en single-page-applikation på.

Buildprocessen forklaret

I modsætning til simpel HTML/CSS/JS kræver de fleste frameworks et "build-trin". Værktøjer som Webpack eller Vite kompilerer dit frameworks kildekode (f.eks. JSX for React og SFC'er for Vue) til standardiserede HTML-, CSS- og JavaScript-bundter.

Electron indlæser derefter disse optimerede, statiske filer, normalt fra en dist- eller build-mappe.

Opsætning til et framework

Til at begynde med bruger du typisk frameworkets CLI (f.eks. npx create-react-app my-app, vue create my-app eller ng new my-app) til at generere et nyt projekt.

Derefter justerer du din Electron-main.js, så den indlæser frameworkets kompilerede index.html-fil.

Electron som vært for en dynamisk brugerflade

Her er et selvstændigt Electron-eksempel. Det bruger main.js til at oprette et vindue og angiver derefter programmæssigt dets indhold med dynamisk JavaScript. Det simulerer, hvordan et frameworks output ville se ud, ved dynamisk at opdatere et element i renderingsprocessen.

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

function createWindow () {
  const win = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  // Simulate framework-generated HTML content
  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <title>Framework-like UI</title>
      <style>
        body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f0f0; }
        h1 { color: #333; }
        button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #007bff; color: white; }
      </style>
    </head>
    <body>
      <h1 id="greeting">Hello from Electron!</h1>
      <button onclick="updateGreeting()">Click Me</button>
      <script>
        let count = 0;
        function updateGreeting() {
          count++;
          document.getElementById('greeting').innerText = 'You clicked ' + count + ' times!';
        }
      </script>
    </body>
    </html>
  `;

  win.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Fordele ved frameworks

Det giver betydelige fordele at bruge et frontend-framework sammen med Electron:

Hurtigere udvikling: En komponentbaseret arkitektur gør det hurtigere at oprette brugerflader.
Vedligeholdelse: Struktureret kode er lettere at forstå og opdatere.
Omfattende brugerflader: Byg komplekse, interaktive brugerflader med mindre besvær.
Community-support: Få adgang til omfattende biblioteker, værktøjer og udviklerfællesskaber.

Overvejelser og bedste praksis

Selvom frameworks er effektive, er der nogle ting, du skal overveje:

Applikationsstørrelse: Frameworks øger størrelsen på det endelige bundle.
Buildkompleksitet: Det kræver opsætning af buildværktøjer.
Sikkerhed: Brug altid contextIsolation: true og et preload.js-script til sikker kommunikation mellem renderer- og hovedprocesserne.

Hold din main.js minimal, og overlad brugerfladelogikken til rendereren.

Hurtigt tjek: Framework-integration

Test din forståelse af, hvordan frontend-frameworks integreres i Electron.

Besvar den i den interaktive lektion

Opsummering: Frameworks i Electron

I denne lektion undersøgte vi, hvordan populære frontend-frameworks som React, Vue og Angular integreres i dine Electron-projekter. Vi lærte, at frameworks kører i renderingsprocessen og udnytter Electrons Chromium-baserede grundlag.

Du forstår nu buildprocessens rolle, og hvordan Electron fungerer som vært for din framework-drevne brugerflade, så du kan bygge effektive desktopapplikationer ved hjælp af velkendte webteknologier.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 47

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Brug af frontend-frameworks” gratis?

Ja — hele teksten til “Brug af frontend-frameworks” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Brug af frontend-frameworks”?

Udforsk, hvordan De integrerer populære frontend-frameworks som React, Vue eller Angular i Deres Electron-projekter for at effektivisere udviklingen af brugergrænsefladen. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?

Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Brug af frontend-frameworks”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?

Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Integration af HTML, CSS og JavaScript
Brug af frontend-frameworks
Responsivt desktopdesign
Temaer og understøttelse af mørk tilstand

← Tilbage til Udvikling af desktopapps med Electron