Electron is een kader dat de pakketten aan uw web applicatie met een kopie van Chroom, waardoor het op een bureaublad gebruiker, naast native applicaties. Het is gemakkelijk te installeren, en alleen vereist dat u laat in uw index.html en andere afhankelijkheden.
Wat Is een Elektron, en Hoe Werkt Het?
Electron is in wezen een desktop container voor uw web app. Het is gebouwd op de top van Chromium, de open-source tak van Google Chrome zonder de Google-specifieke functies. Elke keer dat u opent een Elektron app, opent een nieuw venster van de browser, behalve dat het is vergrendeld op uw pagina geladen vanuit de app bestanden, en niet de URL-balk of andere functies van de browser. Maar, zult u nog steeds toegang hebben tot Chroom, de Ontwikkelaar van Tools voor het debuggen van uw aanvraag.
Als de app is pittig genoeg, je waarschijnlijk niet eens weet dat je met behulp van een webpagina in plaats van een native app.
Het grote voordeel van een Elektron is dat het maakt je app cross-platform uit de doos. Want het is allemaal draaien op een variant van Chroom en Chroom heeft bouwt voor Windows, macOS en Linux, een Elektron app kan eenvoudig worden gebundeld voor een OS. U hoeft niet zorgen te maken over de compatibiliteit, als het enige dat verandert is de basis van uw app loopt op.
Elektron wordt vaak gebruikt naast een web framework graag Reageren, Vue, of Hoekig te maken van krachtige web applicaties. U heeft toegang tot de gehele npm bibliotheek, iets wat je niet hebt met een gewone web app. De verpakte Electron app kan zelfs automatisch worden bijgewerkt, net als een echte website.
Plus, omdat Electron laadt uw web app vanuit een ingepakte bestand in plaats van uw servers, load keer kan drastisch worden verminderd, als er geen inhoud via het netwerk verzonden (naast API-aanroepen). Bovendien, dit duurt enige belasting van uw servers als de meeste van uw userbase besluit gebruik te maken van de desktop-app.
Het belangrijkste nadeel van Elektronen ten opzichte van een native app is op de prestaties. Want in wezen is het openen van een nieuw exemplaar van Chrome, Electron apps kunnen gebruik maken van veel meer RAM dan hun autochtone collega ‘ s. Je hoeft ook niet de snelheid van low – level talen, zoals C, als alles zal worden geschreven in JavaScript, maar het zal niet langzamer dan iets in een browser, en het is niet bedoeld als vervanging van toepassingen die u nodig hebt om volledig gebruik te maken van de metalen.
Hoe te beginnen
Electron is verrassend eenvoudig in te stellen. Terwijl je zou kunnen installeren van de npm-pakket en importeren in een nieuwe Node project, het Elektron team zorgt voor een snelle start van het project met een aantal van de bewaarplaats vooraf geconfigureerd. U kunt ook andere sjablonen, zoals elektronen-reageren-standaard, die wordt geleverd met Reageren vooraf geconfigureerd.
Alles wat je nodig hebt voor het uitvoeren Elektron is Knooppunt geïnstalleerd. Vervolgens kunt u kloon van de repo:
git clone https://github.com/electron/electron-quick-start
cd naar de project directory, en het installeren van Elektronen en bijbehorende afhankelijkheden met:
npm installeren
Vanaf hier kunt u lopen npm start om de ontwikkeling van de server, die het openstellen van de standaard index.html met het Hello World:
U kunt dit vervangen index.html met uw website en verplaats alle afhankelijkheden over. Dat is echt alles wat nodig is-bijvoorbeeld, hier is een Bootstrap-sjabloon geladen Electron, werkt perfect en zonder te raken op een willekeurige code:
Hoewel je zou kunnen laten, Elektron heeft andere eigenschappen die maken dat de desktop-ervaring beter dat je wilt configureren.
Kruiden Tot Electron
Veel Electron apps kiezen af te zien van de standaard bovenste balk helemaal niet, die geeft de applicatie een nettere uitstraling. Bijvoorbeeld, Slack (die gebruik maakt van Elektronen en Reageren) niet de bovenste balk; in plaats daarvan, de inhoud komt in alle de weg naar de top van het venster, en ruimte te maken voor de macOS de besturingselementen voor het venster.
Dit werkt niet goed op Windows, hoewel, kunt u nog steeds het verbergen van de titelbalk met frame: false, maar het verbergt ook de besturingselementen voor het venster helemaal, waardoor het moeilijk wordt voor het verlaten van de app zelf.
Op macOS echter, u kunt dit effect bewerkstelligen door het bewerken van de initialisatie functie in main.js waar de browser venster wordt gemaakt, en waarin titleBarStyle: ‘verborgen’. Deze eigenschap wordt genegeerd door Windows.
mainWindow = nieuw BrowserWindow({
titleBarStyle: ‘verborgen’,
breedte: 800,
hoogte: 600,
webPreferences: {
preload: pad.join(__dirname, ‘preload.js’)
}
})
Bovendien kunt u gebruik maken van hiddenInset meer opvulling tussen de besturingselementen voor het venster en de rand van het venster. Één van beide manier, u moet waarschijnlijk iets statisch in die hoek (als een zijbalk) om te voorkomen dat hij op zoek raar tijdens het scrollen.
Dit is het uitschakelen van het slepen van het venster in het rond, maar kunt u deze weer handmatig door het creëren van een onzichtbare div geplaatst absoluut in de top van het scherm, en geef het de -webkit-app-regio: sleep; eigendom.
Daarnaast kunt u gebruik maken van een ander systeem integraties, zoals aangepaste desktop-menu ‘ s, macOS Dock, TouchBar, en de Windows-Taakbalk integraties en een bestand met slepen & neerzetten. Al deze integraties gebeuren door middel van het Elektron API en don ‘ t touch de code van uw app, tenzij je dat wilt.
Het Bouwen Van Je App
Om daadwerkelijk pakket van uw app voor de productie, zult u gebruik wilt maken van een tool als electron-builder. U kunt ook handmatig downloaden Elektron voorgecompileerde binaire bestanden en het pakket met uw app, maar de bouwer is veel makkelijker.
Toe te voegen aan uw project:
garen toevoegen elektron-builder –dev
Geef een configuratie bouwen in uw pakket.json (documentatie van alle opties):
“bouwen”: {
“appId”: “uw.id”,
“mac”: {
“categorie”: “uw.app.- categorie.typ”
}
}
Het toevoegen van uw app iconen en voeg de elektron-builder script aan uw pakket.json-voor eenvoudig gebruik:
“scripts”: {
“pack”: “elektron-builder –dir”,
“dist”: “elektron-builder”
}
Nu, wanneer u npm dist, je app zal worden verpakt in een uitkeerbare formaat.
Een ding dat je wilt toevoegen (en controleer of het werkt) is het automatisch bijwerken. Anders, u hoeft niet een manier om veranderingen aan gebruikers zoals u zou doen met een gewone web-applicatie. U kunt deze functie met de update-electron-app-bibliotheek.