JavaScript fait partie des langages de programmation les plus courants. Le fait qu’il puisse être utilisé à la fois pour le développement backend et frontend en a fait un chouchou pour de nombreuses personnes.
JavaScript possède de nombreuses bibliothèques et frameworks qui étendent ses cas d’utilisation au-delà du JavaScript vanille (simple).
Electron.js est un puissant framework open source qui donne aux développeurs Web la possibilité de développer des applications natives avec leurs compétences existantes. Cet article vous expliquera Electron.js et comment il peut être utilisé pour alimenter votre prochaine idée incroyable.
Table des matières
Électron JS
Electron JS est un framework que les développeurs peuvent utiliser pour créer des applications de bureau en utilisant HTML, CSS et JavaScript. Electron JS a été créé et est maintenu par GitHub.
Le framework est un mélange de Node.JS et de Chromium, permettant aux utilisateurs de maintenir une base de code JavaScript et de développer des applications de bureau multiplateformes qui peuvent fonctionner sur Windows, macOS et Linux.
L’histoire d’Electron.js a commencé en janvier 2013. L’idée originale était de créer un éditeur de texte multiplateforme qui pourrait fonctionner avec JavaScript, HTML et CSS.
Electron.js s’appelait à l’origine Atom Shell et est devenu open source en 2014. Le projet a ensuite été renommé Electron en avril 2015 et sa première API a été publiée en 2016.
Caractéristiques d’Electron JS
- Compatible avec toutes les bibliothèques et frameworks JavaScript. Vue.js, Angular et React.js ne sont que des exemples de frameworks JavaScript que les développeurs peuvent utiliser avec Electron JS. Cette compatibilité facilite l’utilisation des caractéristiques/fonctionnalités de ces bibliothèques et frameworks lors de la création d’une application Electron.
- Cadre réutilisable. Répondre aux besoins des différents clients peut coûter cher. La bonne chose avec Electron JS est qu’il peut être utilisé à la fois pour les applications Web et de bureau. La base de code unique signifie qu’il peut également être utilisé sur différents systèmes d’exploitation.
- A accès aux API natives. Les développeurs travaillant sur Electron JS ont accès aux API natives des systèmes d’exploitation sur lesquels ils opèrent. Les développeurs peuvent ainsi créer des applications de bureau qui ont un accès similaire à des fonctionnalités de bas niveau, comme l’affichage de notifications.
- Prend en charge la technologie Web. Electron JS est adaptable, car les développeurs n’ont pas besoin d’apprendre un nouveau langage de programmation pour développer des applications. Cela signifie donc que si vous comprenez un certain pack de langue que vous utilisez déjà pour créer des applications Web, vous pouvez également l’utiliser pour créer une application de bureau.
- Gestion du code et des applications. Vous n’avez pas besoin de gérer différentes équipes pour gérer des applications et du code pour différents systèmes d’exploitation. Electron JS vous permet de conserver la même base de code pour les systèmes d’exploitation Linux, Windows et Mac.
- Construction/déploiement facile. Le gestionnaire de packages Electron aide les développeurs à intégrer leurs packages respectifs. Vous pouvez ainsi publier une application de bureau Linux, Mac et Windows à partir de la même base de code à l’aide de ce gestionnaire de packages.
Architecture Electron JS
L’architecture d’Electron est très similaire à celle d’un navigateur Web moderne car il hérite de son architecture multi-processus de Chromium.
L’architecture d’Electron comprend le moteur JavaScript V8, Node.JS et Libchromiumcontent.
- Node.JS– un environnement d’exécution JavaScript open source qui s’exécute sur le moteur JavaScript V8. Node.JS permet aux développeurs d’exécuter JavaScript en dehors d’une fenêtre de navigateur. Node.JS permet également aux utilisateurs d’exécuter du code JavaScript brut via son shell interactif.
- Libchromiumcontent- une bibliothèque de rendu Chromium qui est open source et maintenue par Google Chrome. Chrome a une interface utilisateur minimaliste et utilise Blink comme moteur de mise en page et V8 comme moteur JavaScript.
- Moteur JavaScript V8– un moteur JavaScript open-source écrit en C++ et JavaScript et développé par Google.
#1. Node.js
Pour démarrer avec Electron JS, vous devez avoir installé Node.js sur votre ordinateur local.
Sélectionnez la bonne version de nœud en fonction du système d’exploitation que vous exécutez sur votre ordinateur.
Vérifiez si Node.js a été installé correctement en exécutant ces commandes ;
node -v
npm -v
Si elles sont installées correctement, ces commandes afficheront respectivement les versions node et npm.
#2. Ligne de commande
La manière dont vous accédez à la ligne de commande dépend de votre système d’exploitation.
- Linux dépendra de la distribution.
- Windows : PowerShell ou invite de commande.
- macOS : terminal.
Certains éditeurs de code, tels que Visual Studio Code, sont livrés avec un terminal intégré.
#3. Éditeur de code
Vous avez besoin d’un éditeur de code pour écrire votre code Electron JS. Visual Studio Code est l’un des meilleurs que vous puissiez essayer.
Comment installer Electron JS
Étape 1 : Créez un projet node.js.
Utilisez ces commandes pour commencer ;
mkdir my-electron-app && cd my-electron-app
npm init
La commande npm init vous invitera à remplir certains champs, tels que le nom, le point d’entrée et la description de l’application.
Vous pouvez choisir le nom par défaut de votre dossier comme nom de votre application. Cependant, n’oubliez pas de définir le point d’entrée de votre application sur main.js.
Les champs tels que l’auteur et la description peuvent prendre n’importe quelle valeur. Votre package.json ressemblera à ceci une fois que vous aurez terminé ces étapes :
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}Étape 2 : Installer l’électron
Utilisez cette commande ;
npm install --save-dev electron
Étape 3 :Ajouter la commande ‘start’ à votre package.json
{
"scripts": {
"start": "electron ."
}
}Étape 4 : Démarrez votre application
Utilisez cette commande pour démarrer votre application en mode développement
npm start
Processus de travail Electron JS
Nous continuerons à créer l’application à partir de la configuration que nous venons de créer ci-dessus. Une application Electron a deux types de processus ; principal et moteur de rendu.
Le processus principal
Le script principal est le point d’entrée de toute application électronique. L’application s’exécutera dans un environnement Node.js complet. Electron recherchera le script principal dans le fichier package.json que vous avez déjà configuré lors de l’échafaudage de l’application.
Créez main.js dans le dossier racine pour initialiser le script principal. Vous pouvez le faire manuellement ou utiliser cette commande ;
touch main.js
Vous pouvez ajouter le code suivant au 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();
}
});Les pages Web d’Electron peuvent être chargées à partir d’une adresse Web distante ou d’un fichier HTML local. Nous utiliserons un fichier HTML local à des fins de démonstration.
Créez un fichier index.html dans votre dossier racine. Le code pour index.html est toujours fourni, mais vous pouvez l’avoir comme code de démarrage ;
<!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>
Processus de rendu
Le moteur de rendu rend le contenu Web. Les scripts de préchargement sont fournis avec du code qui s’exécute dans un processus de rendu avant que le contenu Web ne commence à se charger.
Créez preload.js sur votre dossier racine et ajoutez ce code ;
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])
}
})Exécutez le serveur de développement à l’aide de npm start, et voici ce qui s’affichera
Exemples d’applications : Electron JS
#1. Application de bureau Slack
Slack est l’un des outils de collaboration à distance les plus populaires. Les utilisateurs peuvent envoyer et recevoir des messages, passer des appels et partager des fichiers à l’aide de cette application. Slack propose des applications Web et de bureau sur les systèmes d’exploitation Mac, Linux et Windows. L’application de bureau de Slack utilise le moteur Chromium et Node.js pour rendre le code de haute qualité.
#2. Application de bureau WordPress
WordPress est le plus grand système de gestion de contenu. Le fait que vous puissiez lancer un site Web même sans compétences de base en codage a attiré de nombreux utilisateurs. WordPress est accessible via le navigateur et via des applications de bureau sur Mac, Linux et Windows. Le bureau WordPress remanié utilise Electron JS.
#3. Application de bureau WhatsApp
WhatsApp est l’une des applications de messagerie les plus populaires du monde moderne, car elle est utilisée par plus de 2 milliards de personnes. WhatsApp a été initialement conçu comme une application mobile, mais est maintenant devenu une plate-forme multi-appareils. Le bureau WhatsApp utilise Electron JS et est disponible sur les principaux systèmes d’exploitation.
#4. Code Visual Studio
Visual Studio Code, propriété de Microsoft, fait partie des éditeurs de code les plus populaires. Visual Studio Code prend en charge HTML, CSS et le code écrit dans divers langages de programmation tels que JavaScript, Python, PHP, Java et Ruby, pour n’en citer que quelques-uns. L’application de bureau, créée à l’aide d’Electron JS, est disponible pour les systèmes d’exploitation Windows, Mac et Linux.
Ressources d’apprentissage : Electron JS
#1. Documentation officielle d’Electronjs
La documentation Electronjs est créée et maintenue par Electronjs.org. Vous apprendrez ce qu’est Electron JS, comment configurer votre première application Electron et comment créer des applications de bureau multiplateformes à l’aide de diverses technologies. La documentation est toujours mise à jour chaque fois qu’une amélioration ou une nouvelle fonctionnalité est introduite.
#2. Master Electron : applications de bureau avec HTML, JavaScript et CSS
Master Electron est un cours payant sur Udemy qui vous présente Electron JS. Vous apprendrez à créer des applications de bureau pour différents systèmes d’exploitation, tels que Mac, Linux et Windows. Master Electron est également la ressource idéale si vous souhaitez comprendre l’ensemble du processus de l’API Electron.
#3. Tutoriel de réaction électronique
Electron React est un cours payant sur Udemy qui enseigne aux développeurs comment créer des applications Electron à l’aide de React.js. React est l’une des bibliothèques JavaScript les plus célèbres et a été créée par Meta (anciennement Facebook).
Emballer
Electron JS est une bibliothèque JavaScript géniale pour créer des applications de bureau dans un monde moderne où les applications multiplateformes doivent être adoptées. Le fait que vous puissiez utiliser HTML, CSS et JavaScript signifie que les développeurs n’ont pas à apprendre de nouvelles piles technologiques pour créer de telles applications. La présence d’une grande communauté de soutien est également un plus, car vous êtes toujours assuré d’un soutien.
Vous pouvez également explorer certains des meilleurs frameworks JavaScript pour créer une application moderne en moins de temps.