A propos d’Électron
Electron est une librairie open source développée par GitHub pour créer des applications desktop cross-platform avec HTML, CSS et JavaScript. C’est en combinant le navigateur libre Chromium et Node.js en un seul runtime qu’Electron accomplit cette tâche. Ainsi les applications peuvent être empaquetées pour Mac, Windows et Linux.
Performances
‘V8’ JavaScript engine est le moteur JavaScript utilisé dans les navigateurs Chromium et Chrome. Dans Électron, Node.js et Chromium partagent une instance unique de la V8. Ainsi, toute mise à jour améliorant les performances du moteur JavaScript V8 améliore également la performance de toutes les applications utilisant Electron.
Depuis la version 2.0, Electron suit la norme semver. Electron utilise seulement la bibliothèque de rendu de Chromium plutôt que l’ensemble de Chromium. Cela permet de mettre à jour Chromium plus facilement, mais cela veut aussi dire que certaines fonctionnalités de Google Chrome n’existent pas dans Électron.
Historique
Avril 2013 | Atom Shell est démarré. |
Mai 2014 | Atom Shell passe en open source. |
Avril 2015 | Atom Shell est rebaptisé Electron. |
Mai 2016 | Mise à jour d’Electron v1.0.0. Les applications Electron sont compatibles avec l’App Store de Mac. |
Août 2016 | Support du Windows Store pour les applications Electron. |
Février 2018 | Mise à jour d’Electron 2.0.0-beta.1 avec une mise à niveau de Chrome 59 vers Chrome 61, de Node 8.2 vers Node 8.9 et v8 de 5.9 vers 6.1. |
Applications connues utilisant Electron
De nombreuses entreprises ont fait le choix d’Électron pour développer leurs applications Bureau. Voici une liste non exhaustive d’applications Electron :
– VSCode de Microsoft
– Atom
– Slack Desktop
– WhatsApp Desktop
Exemple : Développement d’une application Electron
Spécification
Lorsque l’on travaille sur un projet géré par git, il est parfois pénible de devoir checker sans cesse le statut. Est-ce que des changements ont été faits sur la branche en cours ? Sont-ils commités ?
L’application exemple gitStatusChecker permettra de gagner du temps en ayant un rapide coup d’œil sur l’état git de l’application grâce à une icône dans la barre des tâches.
– Une pastille verte indiquera qu’il n’y a aucun changement en cours
– Une pastille rouge indiquera qu’il y a eu des changements et que ceux-ci sont non commités
Il faut que l’intervalle de rafraichissement de la pastille ainsi que le chemin complet du projet soient paramétrables.
L’application doit être de type desktop, multiplateforme et performante.
Les choix technologiques
Pour cet exemple avec le framework Electron nous développerons avec VS Code.
Prérequis : Installation de la dernière version d’Électron
Nous allons installer Électron et activer le débogage directement dans VS code en quelques lignes de code.
1. Installer VSCode. Créer l’application depuis zéro.
mkdir gitStatusChecker
cd gitStatusChecker
npm init -y # y not to answer each questions again and again
code . # Using VS code
npm i electron-prebuilt -D # electron-prebuilt is a package preinstalled for your native system. Node and chromium are prebuilt.
2. Dans package.json, “main” représente le premier fichier exécuté et “script”, la commande.
"main": "src/main.js",
"scripts": {
"start": "electron ."
}
3. Dans VSCode, aller dans la section debug et ensuite, clicker sur configure launch.json. Sélectionner Node.js et remplacer le fichier par le suivant.
4. Initialiser le projet git (VSCode : source control et ‘Initialize git repository’). Créer le fichier .gitignore pour exclure les modules node.js de git.
node_modules
5. Créer le fichier ./src/main.js
6. Lancer l’application en mode debug dans VSCode ou directement en ligne de commande.
npm start
Ajouter les fichiers HTML et CSS
Un des avantage d’Électron est la possibilité de pouvoir designer rapidement son application avec des fichiers HTML et CSS.
Créer les fichiers JavaScript
L’application utilise ces deux fichiers JavaScript :
– main.js pour la partie node.js
– status.js pour le front JavaScript
Dans main.js :
On importe Electron
const electron = require('electron')
et lorsque l’application est prête, on initialise le module Tray fourni par Electron afin de permettre l’utilisation d’une icône dans la barre des tâches.
app.on('ready', _ => {
// Tray : Initialize tray
tray = new Tray(path.join(iconPath, icons.unknown))
tray.setToolTip('Open settings')
tray.setContextMenu(Menu.buildFromTemplate([
{ label: 'Show App', click: _ => mainWindow.show() },
{ label: 'Quit', click: _ => { app.isQuiting = true; app.quit(); } }
]))
Dans status.js :
On a besoin de changer dynamiquement 2 paramètres : le chemin du projet git, ainsi que l’intervalle de rafraichissement. Pour ceci, on exécute périodiquement un rafraichissement de ces paramètres.
// Set interval
let timer = setInterval(_ => {
let value = document.getElementById('path-input').value
const dir = formatDir(value)
if (isDir(dir))
checkGitStatus(dir)
}, timeout)
Communication avec le System Tray : envoyer et recevoir un évènement avec IPC
Pour envoyer un évènement depuis status.js, on utilise
ipc.send('status-change', 'unknown') // ipc : send the status to set the tray icon
Pour recevoir cet évènement depuis main.js, on utilise
// IPC : hange the tray icon when a new status is detected in the git respository
ipcMain.on('status-change', (event, status) => {
tray.setImage(path.join(iconPath, icons[status]))
})
Lorsqu’on ferme l’application gitStatusChecker, une icône apparait dans la barre des tâches. Si il n’y a plus de modifications sur le projet analysé, l’icone est verte.
Packaging
1. Créer un fichier d’icone de bureau en 512px,512px. Uploader l’icone sur iconverticons.com et récupérer les fichiers app.icns pour Mac, app.ico pour Windows et app.png pour Linux.
2. Copier ces 3 fichiers à la racine du projet : /app.ico, ./app.icns, ./app.png
3. Installer electron-packager (un outil qui build tout en une seule ligne de commande) et rimraf (nettoyer le répertoire lorsque plusieurs builds sont lancés)
npm i electron-packager rimraf -D
4. Dans package.json, ajouter la ligne suivante
"scripts": {
"build": "rimraf git-checker-* && electron-packager . --platform=darwin,linux,win32 --arch=x64 --icon=app --overwrite",
"start": "electron ."
}
5. Ouvrir un terminal administrateur puis générer les exécutables
npm run build
6. Tester les exécutables générés
Packaging app for platform darwin x64 using electron v1.4.13
Packaging app for platform linux x64 using electron v1.4.13
Packaging app for platform win32 x64 using electron v1.4.13
Wrote new apps to:
.\gitStatusChecker\gitStatusChecker-darwin-x64
.\gitStatusChecker\gitStatusChecker-linux-x64
.\gitStatusChecker\gitStatusChecker-win32-x64
Conclusion
Electron embarque de nombreuses API dans un seul framework, ce qui permet de réduire les dépendances. Nous avons utilisé l’API Tray pour l’icône mais il existe aussi Notification pour afficher des notifications ou encore Accelerator pour les raccourci clavier.
Electron-packager permet de créer un exécutable pour chaque plateforme (Windows, OS X + Mac App Store, Linux).
Sources
Documentation officielle :
Liste des applications réalisées avec Electron :
https://electron.atom.io/apps/
Lien Github officiel d’Électron :
https://github.com/electron/electron
Lien vers le projet gitStatusChecker :
https://github.com/ArnaudC/gitStatusChecker
Pluralsight (par Jake Trent) :
https://app.pluralsight.com/library/courses/electron-fundamentals/table-of-contents