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

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 :

https://electronjs.org/docs

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