JavaScript figure parmi les langages de programmation les plus largement utilisés. Sa capacité à être exploité tant pour le développement côté serveur que côté client en fait un outil prisé par de nombreux développeurs.
De nombreuses bibliothèques et frameworks viennent enrichir JavaScript, étendant ses possibilités bien au-delà des fonctionnalités de base du JavaScript pur.
Electron.js est un framework open source puissant qui offre aux développeurs web la possibilité de concevoir des applications natives en utilisant leurs compétences existantes. Cet article vous guidera à travers Electron.js et vous expliquera comment il peut être employé pour concrétiser votre prochaine idée novatrice.
Electron JS : Une Vue d’Ensemble
Electron JS est un framework permettant aux développeurs de créer des applications de bureau en utilisant HTML, CSS et JavaScript. Il a été créé et est maintenu par GitHub.
Ce framework est une combinaison de Node.JS et Chromium, permettant aux utilisateurs de maintenir une seule base de code JavaScript et de développer des applications de bureau multiplateformes, compatibles avec Windows, macOS et Linux.
L’histoire d’Electron.js a débuté en janvier 2013, avec l’ambition de créer un éditeur de texte multiplateforme fonctionnant avec JavaScript, HTML et CSS.
Initialement nommé Atom Shell, Electron.js est devenu open source en 2014. Le projet a ensuite été rebaptisé Electron en avril 2015, et sa première API a été publiée en 2016.
Atouts d’Electron JS
- Compatibilité étendue avec les bibliothèques et frameworks JavaScript. Des frameworks comme Vue.js, Angular et React.js peuvent être utilisés avec Electron JS. Cette compatibilité facilite l’intégration de leurs fonctionnalités dans le développement d’applications Electron.
- Un cadre réutilisable. Répondre aux besoins variés des clients peut s’avérer coûteux. L’avantage d’Electron JS réside dans sa capacité à être utilisé à la fois pour les applications web et de bureau. Une seule base de code peut ainsi être exploitée sur différents systèmes d’exploitation.
- Accès aux API natives. Les développeurs travaillant avec Electron JS bénéficient d’un accès aux API natives des systèmes d’exploitation, leur permettant de créer des applications de bureau avec un accès aux fonctionnalités de bas niveau, comme l’affichage de notifications.
- Support des technologies web. Electron JS est facile à prendre en main, car il n’est pas nécessaire d’apprendre un nouveau langage de programmation pour développer des applications. Si vous maîtrisez déjà les langages utilisés pour créer des applications web, vous pouvez les utiliser pour créer une application de bureau.
- Gestion du code et des applications. Plus besoin de gérer des équipes distinctes pour chaque système d’exploitation. Electron JS permet de maintenir une seule base de code pour les systèmes Linux, Windows et Mac.
- Facilité de construction et de déploiement. Le gestionnaire de packages d’Electron simplifie l’intégration des packages. Ainsi, une seule base de code permet de publier une application de bureau sur Linux, Mac et Windows.
Architecture d’Electron JS
L’architecture d’Electron est semblable à celle d’un navigateur web moderne, car elle reprend son architecture multi-processus de Chromium.
L’architecture d’Electron est constituée du moteur JavaScript V8, de Node.JS et de Libchromiumcontent.
- Node.JS : Un environnement d’exécution JavaScript open source qui s’appuie sur le moteur JavaScript V8. Node.JS permet d’exécuter du JavaScript en dehors d’une fenêtre de navigateur, notamment via son shell interactif.
- Libchromiumcontent : Une bibliothèque de rendu Chromium open source maintenue par Google Chrome. Chrome possède une interface utilisateur minimaliste, et utilise Blink comme moteur de rendu et V8 comme moteur JavaScript.
- Moteur JavaScript V8 : Un moteur JavaScript open source, écrit en C++ et JavaScript, développé par Google.
#1. Node.js
Pour démarrer avec Electron JS, vous devez installer Node.js sur votre machine.
Choisissez la version de Node adaptée à votre système d’exploitation.
Vérifiez que Node.js est correctement installé en exécutant ces commandes :
node -v
npm -v
Si l’installation est correcte, ces commandes afficheront respectivement les versions de Node et de npm.
#2. Ligne de commande
L’accès à la ligne de commande varie en fonction de votre système d’exploitation.
- Linux : La méthode dépendra de votre distribution.
- Windows : Utilisez PowerShell ou l’invite de commande.
- macOS : Utilisez le terminal.
Certains éditeurs de code, comme Visual Studio Code, intègrent un terminal.
#3. Éditeur de code
Un éditeur de code est indispensable pour écrire votre code Electron JS. Visual Studio Code est un excellent choix.
Installation d’Electron JS
Étape 1 : Créer un projet node.js.
Utilisez ces commandes pour commencer :
mkdir my-electron-app && cd my-electron-app
npm init
La commande npm init vous demandera de renseigner certains champs comme le nom, le point d’entrée et la description de l’application.
Vous pouvez conserver le nom par défaut de votre dossier pour votre application. Veillez cependant à 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. Voici à quoi ressemblera votre fichier package.json une fois ces étapes terminées :
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
Étape 2 : Installer Electron
Utilisez cette commande :
npm install --save-dev electron
Étape 3 : Ajouter la commande ‘start’ à votre package.json
{
"scripts": {
"start": "electron ."
}
}
Étape 4 : Démarrer votre application
Utilisez cette commande pour démarrer votre application en mode développement :
npm start
Fonctionnement d’Electron JS
Nous allons continuer à construire l’application à partir de la configuration établie précédemment. Une application Electron est constituée de deux types de processus : principal et de rendu.
Le processus principal
Le script principal est le point d’entrée de toute application Electron. L’application s’exécutera dans un environnement Node.js complet. Electron recherchera le script principal dans le fichier package.json que vous avez configuré lors de la création 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 à 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 pour cette démonstration.
Créez un fichier index.html dans votre dossier racine. Le code pour index.html est donné ci-dessous, mais vous pouvez utiliser n’importe quel code de base :
<!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 processus de rendu est responsable de l’affichage du contenu web. Les scripts de préchargement sont exécutés dans un processus de rendu avant que le contenu web ne commence à se charger.
Créez preload.js dans 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 avec npm start, et voici le résultat affiché :
Exemples d’Applications Electron JS
#1. Application de bureau Slack
Slack est un outil de collaboration à distance très populaire. Il permet aux utilisateurs d’envoyer et de recevoir des messages, de passer des appels et de partager des fichiers. Slack propose des applications web et de bureau pour Mac, Linux et Windows. L’application de bureau de Slack utilise le moteur Chromium et Node.js pour assurer un code de haute qualité.
#2. Application de bureau WordPress
WordPress est le système de gestion de contenu le plus utilisé. Sa facilité d’utilisation, permettant de lancer un site web sans connaissances en programmation, a attiré de nombreux utilisateurs. WordPress est accessible via le navigateur, mais aussi via des applications de bureau pour Mac, Linux et Windows. La version de bureau de WordPress remaniée utilise Electron JS.
#3. Application de bureau WhatsApp
WhatsApp est l’une des applications de messagerie les plus populaires au monde, avec plus de 2 milliards d’utilisateurs. Initialement conçue comme une application mobile, WhatsApp est devenue une plateforme multi-appareils. L’application de bureau de WhatsApp est basée sur Electron JS et est disponible sur les principaux systèmes d’exploitation.
#4. Visual Studio Code
Visual Studio Code, éditeur de code de Microsoft, est l’un des plus populaires. Il prend en charge HTML, CSS et le code écrit dans divers langages de programmation tels que JavaScript, Python, PHP, Java et Ruby. L’application de bureau, conçue avec Electron JS, est disponible pour Windows, Mac et Linux.
Ressources pour Apprendre Electron JS
#1. Documentation Officielle d’Electronjs
La documentation d’Electronjs est créée et maintenue par Electronjs.org. Vous y découvrirez ce qu’est Electron JS, comment configurer votre première application et comment créer des applications de bureau multiplateformes à l’aide de différentes technologies. La documentation est régulièrement mise à jour avec les améliorations et les nouvelles fonctionnalités.
#2. Maîtriser Electron : Applications de bureau avec HTML, JavaScript et CSS
Ce cours payant sur Udemy vous initie à Electron JS. Vous apprendrez à créer des applications de bureau pour différents systèmes d’exploitation, comme Mac, Linux et Windows. C’est aussi une ressource idéale pour comprendre le fonctionnement de l’API Electron.
#3. Tutoriel Electron React
Ce cours payant sur Udemy enseigne aux développeurs comment créer des applications Electron en utilisant React.js. React est l’une des bibliothèques JavaScript les plus populaires, créée par Meta (anciennement Facebook).
Conclusion
Electron JS est une excellente bibliothèque JavaScript pour créer des applications de bureau, dans un monde où les applications multiplateformes sont de plus en plus importantes. La possibilité d’utiliser HTML, CSS et JavaScript permet aux développeurs de ne pas avoir à apprendre de nouvelles technologies. L’existence d’une grande communauté de support est un atout supplémentaire, garantissant une assistance en cas de besoin.
Vous pouvez également explorer certains des meilleurs frameworks JavaScript pour créer une application moderne en un minimum de temps.