JavaScript är ett av de mest använda programmeringsspråken i dag. Dess förmåga att hantera både frontend- och backend-utveckling har gjort det populärt bland utvecklare världen över.
Ett stort antal bibliotek och ramverk utökar funktionaliteten hos JavaScript, vilket går bortom det vanliga standard-JavaScript.
Electron.js är ett kraftfullt och öppet ramverk som möjliggör för webbutvecklare att skapa native-applikationer med sina befintliga webbutvecklingskunskaper. Denna artikel kommer att guida dig genom vad Electron.js är och hur det kan användas för att förverkliga din nästa stora idé.
Electron JS: En översikt
Electron JS är ett ramverk som ger utvecklare möjligheten att bygga skrivbordsapplikationer med hjälp av HTML, CSS och JavaScript. Electron JS är utvecklat och underhålls av GitHub.
Ramverket kombinerar Node.JS och Chromium, vilket gör det möjligt att använda en gemensam JavaScript-kodbas för att skapa plattformsoberoende skrivbordsapplikationer. Dessa applikationer kan köras på Windows, macOS och Linux.
Electron.js resa började i januari 2013, med en vision om att skapa en plattformsoberoende textredigerare som kunde utnyttja JavaScript, HTML och CSS.
Ursprungligen kallades Electron.js för Atom Shell och blev öppen källkod år 2014. Projektet bytte namn till Electron i april 2015, och dess första API lanserades under 2016.
Funktioner i Electron JS
- Kompatibilitet: Full kompatibilitet med alla JavaScript-bibliotek och ramverk, inklusive Vue.js, Angular och React.js. Denna flexibilitet gör att utvecklare enkelt kan integrera funktioner från dessa bibliotek och ramverk i sina Electron-applikationer.
- Återanvändbar kod: Electron JS kan användas både för webb- och skrivbordsapplikationer, vilket ger betydande kostnadsbesparingar. Samma kodbas kan användas på olika operativsystem.
- Tillgång till inbyggda API:er: Utvecklare har tillgång till operativsystemens inbyggda API:er, vilket möjliggör skapandet av stationära applikationer med avancerade funktioner som exempelvis notifikationer.
- Stöd för webbteknologier: Electron JS är flexibelt, då det inte kräver att utvecklare lär sig ett nytt programmeringsspråk. Kunskaper i webbutveckling kan direkt tillämpas på skrivbordsapplikationer.
- Effektiv kod- och applikationshantering: Underhåll av applikationer och kod kan förenklas då en enda kodbas kan användas för Linux, Windows och Mac.
- Enkel byggprocess: Med Electron-pakethanteraren kan utvecklare enkelt paketera sina applikationer för olika plattformar och släppa dem som Linux-, Mac- och Windows-versioner från en gemensam kodbas.
Electron JS Arkitektur
Electrons arkitektur liknar en modern webbläsares, då den ärver sin flerprocessarkitektur från Chromium.
Grundläggande komponenter i Electrons arkitektur inkluderar V8 JavaScript Engine, Node.JS och Libchromiumcontent.
- Node.JS: En öppen källkod JavaScript-runtime som körs på V8 JavaScript-motorn. Node.JS tillåter utvecklare att köra JavaScript utanför webbläsaren, samt att exekvera JavaScript-kod via dess interaktiva skal.
- Libchromiumcontent: Ett öppet Chromium-renderingsbibliotek, underhållet av Google Chrome. Chrome använder ett minimalistiskt gränssnitt, layoutmotorn Blink och JavaScript-motorn V8.
- V8 JavaScript Engine: En öppen källkod JavaScript-motor, utvecklad av Google, skriven i C++ och JavaScript.
#1. Node.js
För att börja använda Electron JS måste du installera Node.js på din dator.
Välj den Node-version som passar ditt operativsystem.
Kontrollera installationen genom att köra följande kommandon i din kommandotolk:
node -v
npm -v
Om Node.js och npm är korrekt installerade, kommer respektive versionsnummer att visas.
#2. Kommandoraden
Tillgång till kommandoraden varierar beroende på operativsystem.
- Linux: Varierar beroende på distribution.
- Windows: Använd PowerShell eller kommandotolken.
- macOS: Använd Terminal.
Vissa kodredigerare, som Visual Studio Code, har integrerade terminaler.
#3. Kodredigerare
En kodredigerare behövs för att skriva din Electron JS-kod. Visual Studio Code är ett bra alternativ.
Installera Electron JS
Steg 1: Skapa ett Node.js-projekt.
Börja med följande kommandon:
mkdir my-electron-app && cd my-electron-app
npm init
Kommandot ’npm init’ kommer att guida dig genom en interaktiv process där du anger detaljer som appens namn, startpunkt och beskrivning.
Du kan använda mappnamnet som appnamn, men kom ihåg att ange main.js som startpunkt.
Fälten författare och beskrivning kan fyllas i med valfri information. Din package.json-fil kommer att likna följande exempel:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
Steg 2: Installera Electron
Använd följande kommando:
npm install --save-dev electron
Steg 3: Lägg till startkommandot i package.json
{
"scripts": {
"start": "electron ."
}
}
Steg 4: Starta din app
Starta appen i utvecklingsläge med kommandot:
npm start
Arbetsprocessen i Electron JS
Vi kommer att fortsätta bygga appen utifrån konfigurationen ovan. En Electron-applikation består av två huvudprocesser: huvudprocessen och renderer-processen.
Huvudprocessen
Huvudskriptet är startpunkten för alla Electron-applikationer. Appen körs i en full Node.js-miljö. Electron söker efter huvudskriptet via filen ’package.json’, som du tidigare konfigurerade.
Skapa en fil ’main.js’ i rotmappen, för att initiera huvudskriptet. Detta kan göras manuellt eller med hjälp av kommandot:
touch main.js
Kopiera följande kod till ’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();
}
});
Webbsidor i Electron kan laddas antingen från en extern webbadress eller en lokal HTML-fil. I detta exempel använder vi en lokal HTML-fil.
Skapa en fil ’index.html’ i rotmappen. Här följer en grundläggande HTML-kod som du kan använda:
<!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-processen
Renderer-processen ansvarar för att visa webbinnehåll. Förinstallerade skript körs innan webbinnehållet laddas.
Skapa en fil ’preload.js’ i rotmappen och lägg till följande kod:
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 utvecklingsservern med ’npm start’. Resultatet bör likna följande:
Exempel på applikationer byggda med Electron JS
#1. Slack Desktop-app
Slack är ett populärt verktyg för samarbete på distans, som möjliggör meddelanden, röstsamtal och fildelning. Slack erbjuder både webb- och skrivbordsapplikationer för Mac, Linux och Windows. Slack använder Chromium-motorn och Node.js för att leverera högkvalitativ kod.
#2. WordPress Desktop-app
WordPress är ett av de största systemen för innehållshantering, vilket möjliggör för användare att skapa webbplatser även utan kodningskunskaper. WordPress är tillgängligt via webbläsare och skrivbordsapplikationer för Mac, Linux och Windows. Den omarbetade skrivbordsappen för WordPress använder Electron JS.
#3. WhatsApp Desktop-app
WhatsApp är en globalt använd meddelandeapplikation, använd av över 2 miljarder människor. Ursprungligen utvecklad som en mobilapplikation, har WhatsApp expanderat till att bli en plattform för flera enheter. Skrivbordsversionen av WhatsApp använder Electron JS och är tillgänglig för de största operativsystemen.
#4. Visual Studio Code
Visual Studio Code, från Microsoft, är en av de mest använda kodredigerarna, med stöd för HTML, CSS och olika programmeringsspråk som JavaScript, Python, PHP, Java och Ruby. Den stationära versionen av Visual Studio Code är utvecklad med Electron JS och finns tillgänglig för Windows, Mac och Linux.
Lärresurser för Electron JS
#1. Electronjs Officiella Dokumentation
Den officiella dokumentationen för Electronjs är skapad och underhållen av Electronjs.org. Här hittar du information om vad Electron JS är, hur man ställer in en första applikation, och hur man bygger plattformsoberoende skrivbordsapplikationer. Dokumentationen uppdateras kontinuerligt med nya funktioner och förbättringar.
#2. Master Electron: Desktop-appar med HTML, JavaScript och CSS
Master Electron är en betalkurs på Udemy som introducerar dig till Electron JS. Kursen lär dig hur du skapar skrivbordsapplikationer för olika operativsystem, som Mac, Linux och Windows. Master Electron är en värdefull resurs för att förstå Electron API:er.
#3. Electron React Tutorial
Electron React är en betalkurs på Udemy som visar hur man skapar Electron-applikationer med React.js. React är ett populärt JavaScript-bibliotek, utvecklat av Meta (tidigare Facebook).
Avslutningsvis
Electron JS är ett utmärkt JavaScript-bibliotek för att skapa skrivbordsapplikationer i en tid där plattformsoberoende appar är viktiga. Möjligheten att använda HTML, CSS och JavaScript gör att utvecklare inte behöver lära sig nya tekniker. Den stora och hjälpsamma gemenskapen är också en fördel, eftersom support alltid finns tillgängligt.
Du kan även undersöka de bästa JavaScript-ramverken för att bygga moderna applikationer på kortare tid.