Volledige gids en leermiddelen

JavaScript is een van de meest voorkomende programmeertalen. Het feit dat het kan worden gebruikt voor zowel backend- als frontend-ontwikkeling, heeft het voor veel mensen tot een lieveling gemaakt.

JavaScript heeft veel bibliotheken en frameworks die de use-cases uitbreiden tot voorbij vanilla (gewoon) JavaScript.

Electron.js is een krachtig open-source framework dat webontwikkelaars de mogelijkheid geeft om native applicaties te ontwikkelen met hun bestaande vaardigheden. Dit artikel leert je over Electron.js en hoe het kan worden gebruikt om je volgende geweldige idee kracht bij te zetten.

Elektron JS

Electron JS is een raamwerk dat ontwikkelaars kunnen gebruiken om desktop-applicaties te maken met behulp van HTML, CSS en JavaScript. Electron JS is gemaakt en wordt onderhouden door GitHub.

Het framework is een mix van Node.JS en Chromium, waardoor gebruikers één JavaScript-codebase kunnen onderhouden en platformonafhankelijke desktopapplicaties kunnen ontwikkelen die kunnen werken op Windows, macOS en Linux.

Het verhaal van Electron.js begon in januari 2013. Het oorspronkelijke idee was om een ​​platformonafhankelijke teksteditor te maken die zou kunnen werken met JavaScript, HTML en CSS.

Electron.js heette oorspronkelijk Atom Shell en werd open source gemaakt in 2014. Het project werd later omgedoopt tot Electron in april 2015 en de eerste API werd uitgebracht in 2016.

Kenmerken van Electron JS

  • Compatibel met alle JavaScript-bibliotheken en -frameworks. Vue.js, Angular en React.js zijn slechts voorbeelden van JavaScript-frameworks die ontwikkelaars samen met Electron JS kunnen gebruiken. Deze compatibiliteit maakt het gemakkelijk om de kenmerken/functionaliteiten van deze bibliotheken en frameworks te gebruiken bij het maken van een Electron-app.
  • Herbruikbaar raamwerk. Catering aan de behoeften van verschillende klanten kan duur zijn. Het goede aan Electron JS is dat het voor zowel web- als desktoptoepassingen kan worden gebruikt. Door de enkele codebase kan het ook op verschillende besturingssystemen worden gebruikt.
  • Heeft toegang tot native API’s. Ontwikkelaars die aan Electron JS werken, hebben toegang tot native API’s van de besturingssystemen waarop ze werken. Ontwikkelaars kunnen zo desktop-apps maken die vergelijkbare toegang hebben tot functionaliteit op laag niveau, zoals het weergeven van meldingen.
  • Ondersteunt webtechnologie. Electron JS is aanpasbaar, aangezien ontwikkelaars geen nieuwe programmeertaal hoeven te leren om applicaties te ontwikkelen. Het betekent dus dat als je een bepaald taalpakket begrijpt dat je al gebruikt om webapplicaties te maken, je het ook kunt gebruiken om een ​​desktop-app te maken.
  • Code- en app-beheer. U hoeft geen verschillende teams te onderhouden om apps en code voor verschillende besturingssystemen te onderhouden. Met Electron JS kunt u dezelfde codebase behouden voor Linux-, Windows- en Mac-besturingssystemen.
  • Eenvoudig bouwen/implementeren. De Electron-pakketbeheerder helpt ontwikkelaars bij het verpakken in hun respectieve pakketten. U kunt dus een Linux-, Mac- en Windows-desktop-app uit dezelfde codebasis vrijgeven met behulp van deze pakketbeheerder.
  Foto's importeren vanaf een camera of telefoon met foto's op Mac

Architectuur Electron JS

De architectuur van Electron lijkt erg op die van een moderne webbrowser, aangezien deze zijn multi-procesarchitectuur van Chromium erft.

De architectuur van Electron omvat V8 JavaScript Engine, Node.JS en Libchromiumcontent.

  • Node.JS– een open-source JavaScript-runtime die draait op de V8 JavaScript-engine. Met Node.JS kunnen ontwikkelaars JavaScript buiten een browservenster uitvoeren. Met Node.JS kunnen gebruikers ook onbewerkte JavaScript-code uitvoeren via de interactieve shell.
  • Libchromiumcontent – een Chromium-renderingbibliotheek die open source is en wordt onderhouden door Google Chrome. Chrome heeft een minimalistische gebruikersinterface en gebruikt knipperen als de layout-engine en V8 als de JavaScript-engine.
  • V8 JavaScript Engine– een open-source JavaScript-engine geschreven in C++ en JavaScript en ontwikkeld door Google.

#1. Node.js

Om aan de slag te gaan met Electron JS, moet Node.js op uw lokale computer zijn geïnstalleerd.

Selecteer de juiste knooppuntversie, afhankelijk van het besturingssysteem dat u op uw computer gebruikt.

Controleer of Node.js correct is geïnstalleerd door deze opdrachten uit te voeren;

node -v
npm -v

Als ze correct zijn geïnstalleerd, tonen deze opdrachten respectievelijk de node- en npm-versies.

#2. Opdrachtregel

Hoe u de opdrachtregel opent, hangt af van uw besturingssysteem.

  • Linux zal afhangen van de distributie.
  • Windows: PowerShell of opdrachtprompt.
  • macOS: terminal.

Sommige code-editors, zoals Visual Studio Code, worden geleverd met een geïntegreerde terminal.

#3. Code-editor

U hebt een code-editor nodig om uw Electron JS-code te schrijven. Visual Studio Code is een van de beste die u kunt uitproberen.

Hoe Electron JS te installeren

Stap 1: Maak een node.js-project.

Gebruik deze opdrachten om aan de slag te gaan;

mkdir my-electron-app && cd my-electron-app
npm init

Met de opdracht npm init wordt u gevraagd enkele velden in te vullen, zoals de naam van de app, het toegangspunt en de beschrijving.

U kunt de standaardnaam van uw map kiezen als uw app-naam. Vergeet echter niet om het startpunt van uw app in te stellen als main.js.

Velden zoals auteur en beschrijving kunnen elke waarde aannemen. Uw package.json ziet er ongeveer zo uit als u klaar bent met deze stappen:

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

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

Stap 2: installeer elektron

  Wat is hybride cloudcomputing?

Gebruik deze opdracht;

npm install --save-dev electron

Stap 3:Voeg de opdracht ‘start’ toe aan uw pakket.json

{

  "scripts": {

    "start": "electron ."

  }

}

Stap 4: Start uw app

Gebruik deze opdracht om uw app in de ontwikkelingsmodus te starten

npm start

Electron JS-werkproces

We gaan verder met het bouwen van de app vanuit de set-up die we zojuist hierboven hebben gemaakt. Een Electron-applicatie heeft twee soorten processen; main en renderer.

Het hoofdproces

Het hoofdscript is het startpunt van elke elektronische app. De app draait in een volledige Node.js-omgeving. Electron zoekt naar het hoofdscript in het bestand package.json dat je al hebt geconfigureerd tijdens app-steigers.

Maak main.js aan in de hoofdmap om het hoofdscript te initialiseren. U kunt dit handmatig doen of deze opdracht gebruiken;

touch main.js

U kunt de volgende code toevoegen aan 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();

 }

});

Webpagina’s in Electron kunnen worden geladen vanaf een extern webadres of een lokaal HTML-bestand. We zullen een lokaal HTML-bestand gebruiken voor demonstratiedoeleinden.

Maak een index.html-bestand in uw hoofdmap. Code voor index.html wordt altijd verstrekt, maar u kunt dit als uw startcode hebben;

<!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 geeft webinhoud weer. Preload-scripts worden geleverd met code die wordt uitgevoerd in een rendererproces voordat de webinhoud wordt geladen.

Maak preload.js aan in uw hoofdmap en voeg deze code toe;

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])

  }

})

Voer de ontwikkelingsserver uit met behulp van npm start, en dit is wat wordt weergegeven

Voorbeelden Apps: Electron JS

#1. Slack desktop-app

Slack is een van de meest populaire tools voor samenwerking op afstand. Gebruikers kunnen met deze app berichten verzenden en ontvangen, bellen en bestanden delen. Slack heeft zowel webgebaseerde als desktop-apps op Mac-, Linux- en Windows-besturingssystemen. De desktop-app van Slack gebruikt de Chromium-engine en Node.js om code van hoge kwaliteit weer te geven.

#2. WordPress desktop-app

WordPress is het grootste content management systeem. Het feit dat u zelfs zonder basisvaardigheden in coderen een website kunt lanceren, heeft veel gebruikers aangetrokken. WordPress is toegankelijk via de browser en via desktop-apps op Mac, Linux en Windows. De vernieuwde WordPress-desktop maakt gebruik van Electron JS.

  Webapplicatie versus website

#3. WhatsApp desktop-app

WhatsApp is een van de meest populaire berichten-apps in de moderne wereld, aangezien het door meer dan 2 miljard mensen wordt gebruikt. WhatsApp is oorspronkelijk ontworpen als een mobiele app, maar is nu overgeschakeld naar een cross-device platform. WhatsApp-desktop maakt gebruik van Electron JS en is beschikbaar op de belangrijkste besturingssystemen.

#4. Visual Studio-code

Visual Studio Code, eigendom van Microsoft, is een van de meest populaire code-editors. Visual Studio Code ondersteunt HTML, CSS en code geschreven in verschillende programmeertalen zoals JavaScript, Python, PHP, Java en Ruby, om er maar een paar te noemen. De desktop-app, gemaakt met Electron JS, is beschikbaar voor Windows-, Mac- en Linux-besturingssystemen.

Leermiddelen: Electron JS

#1. Electronjs officiële documentatie

Electronjs-documentatie wordt gemaakt en onderhouden door Electronjs.org. U leert wat Electron JS is, hoe u uw eerste Electron-app instelt en hoe u platformonafhankelijke desktop-apps bouwt met behulp van verschillende technologieën. De documentatie wordt altijd bijgewerkt wanneer er een verbetering of een nieuwe functie wordt geïntroduceerd.

#2. Master Electron: desktop-apps met HTML, JavaScript en CSS

Master Electron is een betaalde cursus over Udemy die je kennis laat maken met Electron JS. U leert hoe u desktop-apps maakt voor verschillende besturingssystemen, zoals Mac, Linux en Windows. Master Electron is ook de perfecte hulpbron als u het hele Electron API-proces wilt begrijpen.

#3. Electron React-zelfstudie

Electron React is een betaalde cursus over Udemy die ontwikkelaars leert hoe ze Electron-apps kunnen maken met React.js. React is een van de bekendste JavaScript-bibliotheken en is gemaakt door Meta (voorheen Facebook).

Afsluiten

Electron JS is een geweldige JavaScript-bibliotheek voor het maken van desktop-apps in een moderne wereld waar platformonafhankelijke apps moeten worden omarmd. Het feit dat u HTML, CSS en JavaScript kunt gebruiken, betekent dat ontwikkelaars geen nieuwe tech-stacks hoeven te leren om dergelijke apps te maken. De aanwezigheid van een grote en ondersteunende community is ook een pluspunt, aangezien je altijd verzekerd bent van ondersteuning.

U kunt ook enkele beste JavaScript-frameworks verkennen om in minder tijd een moderne applicatie te bouwen.

gerelateerde berichten