Har du en webbplats som redan fungerar och vill konvertera den till en skrivbordsapplikation utan att behöva skriva om den från början? Tja, du har tur. Tack vare Electron.js, kan du flytta din webbplats till Windows, macOS och Linux enkelt och med en enda kodbas. Denna alltmer populära lösning har valts av företag som Microsoft, Slack och Discord för att utveckla några av deras mest framgångsrika skrivbordsappar.
I den här artikeln kommer vi att bryta ner hur Electron fungerar, hur du kan förvandla vilken webbplats som helst till en skrivbordsapp och vilka verktyg du kan använda för att påskynda processen. Det bästa är att du inte behöver avancerad kunskap om skrivbordsutveckling, eftersom allt är gjort med JavaScript, HTML och CSS. Och om du redan arbetar med ramverk som React eller Vue, gör dig redo eftersom du kommer att kunna dra nytta av all den kunskapen.
Vad är Electron egentligen och varför använda det?
Electron.js Det är ett ramverk utvecklat av GitHub som låter dig skapa skrivbordsapplikationer med hjälp av webbteknik. I grund och botten är det som att lägga din webbplats i ett omslag som gör den körbar på olika operativsystem.
Nedan, använd krom (samma motor som driver Chrome-webbläsaren) för att visa användargränssnittet, och node.js för att tillåta åtkomst till operativsystemet. På så sätt kan du läsa filer från din hårddisk och till och med visa inbyggda systemaviseringar – saker som du normalt inte skulle kunna göra med en webbplats.
Kombinationen av båda miljöerna resulterar i en arkitektur baserad på två huvudprocesser:
- Huvudprocess: styr programmets livscykel, windows och OS-integrering.
- Rendererprocess: ansvarar för att göra gränssnittet, som om det vore vilken webbplats som helst i en webbläsare.
En av de stora fördelarna med Electron är det Du kan skriva appen en gång och köra den på Windows, macOS och Linux.. Dessutom, genom att utnyttja Node.js-ekosystemet har du tusentals paket och bibliotek till ditt förfogande för att täcka praktiskt taget alla behov. Detta gör den till ett utmärkt val för att utveckla applikationer, även för vardagliga uppgifter som t.ex använd WhatsApp på din dator.
Vilken typ av applikationer kan göras med Electron?
Från företagsinterna verktyg till kommersiella produkter. Några av de mest populära apparna byggda med Electron inkluderar:
- Visual Studio Code: Microsofts kodredigerare.
- Slak: meddelandeklienten för team.
- Discord: den berömda kommunikationsplattformen för spel och gemenskaper.
- Postman: API-testverktyg.
Detta visar att Electron är mer än lämpligt för seriösa, högpresterande projekt, även om det är viktigt att överväga hur appen är utvecklad för att inte duplicera processer eller slösa med resurser.
Vad behöver du för att börja?
Innan du går in i kodning, se till att du har dessa grundläggande verktyg installerade:
- node.js: viktigt för att installera beroenden och köra skript.
- npm eller garn: pakethanterare som låter dig installera Electron och andra bibliotek.
När du har det klart kan du installera Electron. Det rekommenderas att göra detta som ett utvecklingsberoende:
npm install electron --save-devEller om du föredrar att använda det globalt:
npm install -g electronDå måste du ange i package.json vad är din indatafil (huvudprocessen):
{
"main": "main.js"
}Om du inte anger det kommer Electron att leta efter en fil index.js standard.
Skapa din första grundläggande app med Electron
Låt oss ta en titt på det absoluta minimum du behöver för att få en webbplats igång som en stationär app. Utgångspunkten är arkivet main.js, där du skapar ett webbläsarfönster och laddar din HTML-sida:
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);Det räcker för dig så att när du kör electron ., öppnas ett fönster med din HTML. Inom main kan du också lyssna efter händelser för att hantera stängning, minimering eller återställning av appen.
Förstå processarkitektur
Som vi nämnde tidigare finns det två huvudprocesser:
Huvudprocess
Det är hjärtat i ansökan. Härifrån kan du skapa fönster, lyssna efter systemhändelser, aktivera inbyggda funktioner som aviseringar och kontrollera appens övergripande tillstånd.
Rendererprocess
Den instansieras varje gång en ny skapas. BrowserWindow. Den ansvarar för att visa webbinnehåll. Du kan använda vilket ramverk som helst här: React, Vue, Angular eller bara ren HTML och JS. Kom ihåg att även applikationer som Nvidias projekt G kan dra nytta av dessa tekniker.
Både huvud- och renderaren kan använda API:erna för Node.js, men av säkerhetsskäl rekommenderas det att skapa ett kommunikationslager mellan dem med hjälp av ipcMain e ipcRenderer. Du kan också använda en förladda skript för att exponera säkra funktioner från huvud till renderaren.
Skapa anpassad inbyggd funktionalitet
En av de mest kraftfulla sakerna med Electron är att kunna få tillgång till funktioner som normalt ligger utanför räckhåll för en webbsida. Till exempel:
- show anmälningar av systemet.
- Läs eller skriv filer hårddisk.
- Tillgång till Urklipp, nätverks- eller systeminformation.
Dessa funktioner måste aktiveras från huvudprocessen. Om du vill kan du skicka dem från renderaren med ipcRenderer.send() och lyssna på dem i huvudsak med ipcMain.on()eller använda ipcMain.handle() om du behöver få svar.
Verktyg som gör ditt liv enklare: Electron Forge
Electron Forge är en uppsättning verktyg som optimerar utvecklingen med Electron. Det ger dig:
- Förkonfigurerade projekt med Webpack, skruv o MASKINSKRIVEN.
- Kommandon för att köra, kompilera och generera installationsprogram.
- Stöd för att enkelt ladda ramverk som React eller Vue.
Ett exempel på hur man startar ett projekt med Electron Forge, Vite och TypeScript:
npm init electron-app@latest mi-app -- --template=vite-typescriptEfteråt kan du köra appen med:
cd mi-app && npm startNu när du vet hur du kommer igång kanske du också vill lära dig hur appar fungerar på andra system som Windows och deras nya funktioner, t.ex. Windows App.
Hur du paketerar din applikation och genererar installationsprogram
När du har din app redo vill du att användarna ska kunna installera den som alla andra. För detta kan du använda verktyg som:
- elektronförpackare
- elektronbyggare
- elektron-smedja göra
Dessa verktyg skapar motsvarande körbara filer för varje operativsystem (.exe på Windows, .dmg på macOS, .AppImage eller .deb på Linux). Du kan också ställa in anpassade ikoner, digitala signaturer, automatiska uppdateringar och mer.
Till exempel, för att generera installatörer med Electron Forge behöver du bara köra:
npm run makeOch verktygslådan tar hand om resten och skapar paketen i mappen out.
Vad händer om jag vill konvertera ett befintligt webbprojekt som ett i React eller Vue?
Fullkomligt möjligt. Du kan ta din app i React, Vue eller något annat ramverk och ladda den i ett Electron-fönster. Du behöver bara en huvudfil som laddar den slutliga kompilerade index.html för projektet.
Om du använder Vite för ditt React/Vue-projekt kan du konfigurera screw.config.js för att kompilera filerna till en mapp dist som sedan kommer att laddas av Electron med loadFile(). Du kan också skicka händelser från ditt gränssnitt till huvudprocessen med hjälp av ipcRenderer Om du använder preload.ts, som det här exemplet:
ipcMain.handle('seleccionar-carpeta', () => {
// aquí abres el selector de carpetas
});Sedan, från gränssnittet med Electron Bridge:
window.electron.invoke('seleccionar-carpeta')Detta visar Electrons mångsidighet när det gäller att skapa appar, liknande hur WhatsApp-alternativen har tagit hänsyn till de integrationer som är nödvändiga för att vara effektiva.
Vilka är de mest omtalade nackdelarna med Electron?
Allt är inte rosa. Electron har fått kritik, särskilt för sitt hög RAM-förbrukning. Och när du använder Chromium och Node.js tillsammans laddar du två miljöer för att köra en enda app.
En enkel "Hello World" kan förbruka upp till 60 MB minne, något som inte händer med inbyggda appar. Det beror dock mycket på hur du utvecklar din applikation och hur många optimeringar du gör. Slack-klienten är inte samma sak som VS Code, båda skrivna med Electron men med väldigt olika prestanda.
Det är därför det är viktigt att upprätthålla goda utvecklingsmetoder, hantera processer på rätt sätt, minimera användningen av onödiga resurser och undvika att ladda tunga bibliotek om de inte är nödvändiga.
Använd case och inspiration för dina egna projekt
Elektron är idealisk för:
- Interna eller POC-applikationer: som internt företagsverktyg som kräver ett GUI-gränssnitt.
- Förvandla dina favoritwebbplatser till appar: till exempel sociala medieklienter, instrumentpaneler, API-hanterare, etc.
- kommersiella tillämpningar plattformsoberoende utan att behöva lära sig inhemsk utveckling.
Många utvecklare skapar också API-klienter, instrumentpaneler för data eller juegos enkelt med motorer som Phaser inlästa i Electron. Detta har blivit en trend för att skapa applikationer för den genomsnittliga användaren.
Nu när du vet allt du behöver kan du installera Electron, ladda upp din webbplats och börja anpassa den som om den vore en helt webbläsaroberoende applikation. Kom ihåg att ju mer anpassad integrationen med operativsystemet (fönster, menyer, aviseringar, lokal lagring etc.), desto mer professionell kommer din app att se ut.
Electron ger dig inkörsporten till att föra all webbutveckling till miljontals användares skrivbord utan att behöva lära dig flera språk och plattformar. Du behöver bara JavaScript och lite skicklighet för att skapa något funktionellt, multiplatform och elegant. Dela informationen så att fler användare känner till verktyget.