Komplet vejledning og læringsressourcer

JavaScript er blandt de mest almindelige programmeringssprog. Det faktum, at det kan bruges til både backend- og frontend-udvikling, har gjort det til en darling for mange mennesker.

JavaScript har mange biblioteker og rammer, der udvider dets use cases ud over vanilje (almindeligt) JavaScript.

Electron.js er en kraftfuld open source-ramme, der giver webudviklere muligheden for at udvikle native applikationer med deres eksisterende færdigheder. Denne artikel vil lære dig om Electron.js, og hvordan det kan bruges til at drive din næste fantastiske idé.

Elektron JS

Electron JS er en ramme, som udviklere kan bruge til at skabe desktop-applikationer ved hjælp af HTML, CSS og JavaScript. Electron JS blev oprettet og vedligeholdes af GitHub.

Rammerne er en blanding af Node.JS og Chromium, som giver brugerne mulighed for at vedligeholde én JavaScript-kodebase og udvikle desktop-applikationer på tværs af platforme, der kan fungere på Windows, macOS og Linux.

Historien om Electron.js startede i januar 2013. Den oprindelige idé var at skabe en teksteditor på tværs af platforme, der kunne arbejde med JavaScript, HTML og CSS.

Electron.js hed oprindeligt Atom Shell og blev lavet til open source i 2014. Projektet blev senere omdøbt til Electron i april 2015, og dets første API blev frigivet i 2016.

Funktioner af Electron JS

Kompatibel med alle JavaScript-biblioteker og rammer. Vue.js, Angular og React.js er blot eksempler på JavaScript-frameworks, som udviklere kan bruge sammen med Electron JS. Denne kompatibilitet gør det nemt at bruge funktionerne/funktionaliteterne i disse biblioteker og rammer, når du opretter en Electron-app.
Genanvendelige rammer. Catering til forskellige kunders behov kan være dyrt. Det gode ved Electron JS er, at det kan bruges til både web- og desktop-applikationer. Den enkelte kodebase betyder, at den også kan bruges på forskellige operativsystemer.
Har adgang til native API’er. Udviklere, der arbejder på Electron JS, har adgang til native API’er for de operativsystemer, de opererer på. Udviklere kan således oprette desktop-apps, der har lignende adgang til lav-niveau funktionalitet, som at vise meddelelser.
Understøtter webteknologi. Electron JS kan tilpasses, da udviklere ikke behøver at lære et nyt programmeringssprog for at udvikle applikationer. Det betyder således, at hvis du forstår en bestemt sprogpakke, som du allerede bruger til at lave webapplikationer, kan du også bruge den til at lave en desktop-app.
Kode- og apphåndtering. Du behøver ikke at vedligeholde forskellige teams for at vedligeholde apps og kode til forskellige operativsystemer. Electron JS giver dig mulighed for at opretholde den samme kodebase til Linux-, Windows- og Mac-operativsystemer.
Nem opbygning/implementering. Electron-pakkehåndteringen hjælper udviklere med at pakke ind i deres respektive pakker. Du kan således frigive en Linux-, Mac- og Windows desktop-app fra den samme kodebase ved hjælp af denne pakkehåndtering.

Sådan tilføjer du metadata til Spotify-numre

Arkitektur Electron JS

Electrons arkitektur minder meget om en moderne webbrowsers arkitektur, da den arver sin multiprocesarkitektur fra Chromium.

Electrons arkitektur omfatter V8 JavaScript Engine, Node.JS og Libchromiumcontent.

Node.JS – en open source JavaScript-runtime, der kører på V8 JavaScript-motoren. Node.JS gør det muligt for udviklere at køre JavaScript uden for et browservindue. Node.JS giver også brugere mulighed for at udføre rå JavaScript-kode gennem dens interaktive shell.
Libchromiumcontent – et Chromium-gengivelsesbibliotek, der er open source og vedligeholdes af Google Chrome. Chrome har en minimalistisk brugergrænseflade og bruger blink som layoutmotor og V8 som JavaScript-motor.
V8 JavaScript Engine – en open source JavaScript-motor skrevet i C++ og JavaScript og udviklet af Google.

#1. Node.js

For at komme i gang med Electron JS skal du have Node.js installeret på din lokale maskine.

Vælg den rigtige nodeversion afhængigt af det operativsystem, du kører på din computer.

Tjek om Node.js er blevet installeret korrekt ved at køre disse kommandoer;

node -v

npm -v

Hvis de er installeret korrekt, vil disse kommandoer vise henholdsvis node- og npm-versionerne.

#2. Kommandolinje

Hvordan du får adgang til kommandolinjen afhænger af dit operativsystem.

Linux vil afhænge af distributionen.

Windows: PowerShell eller kommandoprompt.
macOS: Terminal.

Nogle kodeeditorer, såsom Visual Studio Code, leveres med en integreret terminal.

#3. Kode Editor

Du skal bruge en kodeeditor til at skrive din Electron JS-kode. Visual Studio Code er blandt de bedste, du kan prøve.

Dedikeret serverhosting er gjort let med Liquid Web

Sådan installeres Electron JS

Trin 1: Opret et node.js-projekt.

Brug disse kommandoer til at komme i gang;

mkdir my-electron-app && cd my-electron-app

npm init

Kommandoen npm init vil bede dig om at udfylde nogle felter, såsom appens navn, indgangspunkt og beskrivelse.

Du kan vælge standardnavnet på din mappe som dit appnavn. Husk dog at sætte indgangspunktet for din app som main.js.

Felter som forfatter og beskrivelse kan have enhver værdi. Din package.json vil se nogenlunde sådan ud, når du er færdig med disse trin:

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

Trin 2: Installer elektron

Brug denne kommando;

npm install --save-dev electron

Trin 3: Tilføj ‘start’-kommando til din package.json

{

  "scripts": {

    "start": "electron ."

  }

}

Trin 4: Start din app

Brug denne kommando til at starte din app i udviklingstilstand

npm start

Electron JS arbejdsproces

Vi fortsætter med at bygge appen ud fra den opsætning, vi lige har lavet ovenfor. En elektronapplikation har to typer processer; hoved og renderer.

Hovedprocessen

Hovedscriptet er indgangspunktet for enhver elektronapp. Appen kører i et fuldt Node.js-miljø. Electron vil lede efter hovedscriptet i filen package.json, som du allerede konfigurerede under appstilladsering.

Opret main.js i rodmappen for at initialisere hovedscriptet. Du kan gøre det manuelt eller bruge denne kommando;

touch main.js

Du kan tilføje følgende kode til main.js

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

const createWindow = () => {

 const win = new BrowserWindow({

   width: 800,

   height: 600,

 });

 win.loadFile('index.html');

};

app.whenReady().then(() => {

 createWindow();

 app.on('activate', () => {

   if (BrowserWindow.getAllWindows().length === 0) {

     createWindow();

   }

 });

});

app.on('window-all-closed', () => {

 if (process.platform !== 'darwin') {

   app.quit();

 }

});

Websider i Electron kan indlæses enten fra en ekstern webadresse eller en lokal HTML-fil. Vi vil bruge en lokal HTML-fil til demonstrationsformål.

Opret en index.html-fil i din rodmappe. Kode til index.html er altid angivet, men du kan have denne som din startkode;

<!DOCTYPE html>

<html>

 <head>

   <meta charset="UTF-8" />

   <meta

     http-equiv="Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <meta

     http-equiv="X-Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <title>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from Electron renderer!</h1>

   <p>👋</p>

   <p id="info"></p>

 </body>

 <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script>

</html>

Renderer proces

Renderer gengiver webindhold. Forudindlæst scripts kommer med kode, der udføres i en gengivelsesproces, før webindholdet begynder at indlæse, er nødvendige.

Opret preload.js på din rodmappe og tilføj denne kode;

window.addEventListener('DOMContentLoaded', () => {

  const replaceText = (selector, text) => {

    const element = document.getElementById(selector)

    if (element) element.innerText = text

  }

  for (const type of ['chrome', 'node', 'electron']) {

    replaceText(`${type}-version`, process.versions[type])

  }

})

Kør udviklingsserveren ved hjælp af npm start, og dette er hvad der vil blive vist

Eksempler på apps: Electron JS

#1. Slack desktop-app

Slack er et af de mest populære værktøjer til fjernsamarbejde. Brugere kan sende og modtage beskeder, foretage opkald og dele filer ved hjælp af denne app. Slack har både webbaserede og desktop-apps på Mac-, Linux- og Windows-operativsystemer. Slacks desktop-app bruger Chromium engine og Node.js til at gengive kode af høj kvalitet.

Sådan downloader du Apple TV+-shows på iPhone, iPad og Mac

#2. WordPress desktop app

WordPress er det største content management system. Det faktum, at du kan lancere et websted selv uden grundlæggende kodningsfærdigheder, har tiltrukket mange brugere. WordPress kan tilgås via browseren og via desktop-apps på Mac, Linux og Windows. Det fornyede WordPress-skrivebord bruger Electron JS.

#3. WhatsApp desktop app

WhatsApp er blandt de mest populære beskedapps i den moderne verden, da det bruges af over 2 milliarder mennesker. WhatsApp blev oprindeligt designet som en mobilapp, men er nu gået over til at være en platform på tværs af enheder. WhatsApp desktop bruger Electron JS og er tilgængelig på større operativsystemer.

#4. Visual Studio kode

Visual Studio Code, ejet af Microsoft, er blandt de mest populære kodeeditorer. Visual Studio Code understøtter HTML, CSS og kode skrevet på forskellige programmeringssprog såsom JavaScript, Python, PHP, Java og Ruby, for at nævne nogle få. Desktop-appen, der er oprettet ved hjælp af Electron JS, er tilgængelig til Windows, Mac og Linux-operativsystemer.

Læringsressourcer: Electron JS

#1. Electronjs officielle dokumentation

Electronjs dokumentation er oprettet og vedligeholdt af Electronjs.org. Du lærer, hvad Electron JS er, hvordan du opsætter din første Electron-app, og hvordan du bygger desktop-apps på tværs af platforme ved hjælp af forskellige teknologier. Dokumentationen opdateres altid, hver gang en forbedring eller en ny funktion introduceres.

#2. Master Electron: Desktop-apps med HTML, JavaScript og CSS

Master Electron er et betalt kursus på Udemy, der introducerer dig til Electron JS. Du lærer, hvordan du opretter desktop-apps til forskellige operativsystemer, såsom Mac, Linux og Windows. Master Electron er også den perfekte ressource, hvis du vil forstå hele Electron API-processen.

#3. Electron React Tutorial

Electron React er et betalt kursus på Udemy, der lærer udviklere, hvordan man opretter Electron-apps ved hjælp af React.js. React er et af de mest berømte JavaScript-biblioteker og blev skabt af Meta (tidligere Facebook).

Afslutter

Electron JS er et fantastisk JavaScript-bibliotek til at skabe desktop-apps i en moderne verden, hvor apps på tværs af platforme skal omfavnes. Det faktum, at du kan bruge HTML, CSS og JavaScript betyder, at udviklere ikke behøver at lære nye teknologiske stakke for at skabe sådanne apps. Tilstedeværelsen af et stort og støttende fællesskab er også et plus, da du altid er sikret støtte.

Du kan også udforske nogle af de bedste JavaScript-rammer for at bygge en moderne applikation på kortere tid.