Electron, ou comment faire du logiciel avec du JavaScript

Si le développement d’applications desktop, ou bureau, était autrefois conditionné à l’utilisation de langages tels que Java ou C, il est aujourd’hui possible de faire du logiciel avec du JavaScript, notamment grâce au framework Electron.

Electron est en cela révolutionnaire : il permet de créer des softwares pour Mac, Windows et Linux, avec les technos web classiques, HTML, CSS et JavaScript !

Cette techno vous intéresse ? Vous voulez vous essayer à Electron mais voulez en savoir plus avant de vous lancer ? Faisons le point dans cet article !

Le point sur le développement desktop

Mais avant de parler d’Electron lui-même, faisons le point sur le monde du développement d’applications de bureau.

Ces logiciels, ou softwares, sont des applications qui tournent sur des ordinateurs, directement installés sur le disque dur du système d’exploitation : Mac, Windows ou Linux.

Une app desktop se différencie en cela de l’application web qui, originellement, n’est utilisable qu’à travers un navigateur web et qui n’est pas installable.

Pour faire du développement d’apps desktop, on utilisait, entre autres, les langages Java, C, C#, C++, ou plus récemment Python. En tout cas, pas du JavaScript, habituellement réservé au web !

Mais cela a changé ces dernières années, grâce à l’arrivée du framework Electron.

Electron, le framework qui permet de faire du logiciel en JavaScript

Historique

Electron est un framework de développement qui n’est pas si récent, puisque sa première release date de 2013. À l’origine de cette techno, GitHub, qui cherchait à créer un nouvel IDE (qui deviendra Atom) avec des technos web. Ce fut chose faite, grâce à une nouvelle technologie, à l’époque nommée Atom-Shell. Ce framework a rapidement pris de l’ampleur, puis a été renommé Electron en 2015. Sa version 1.0 sera mise en production en mai 2016.

Depuis, le framework déploie régulièrement de nouvelles versions majeures, avec maintenant un rythme d’une major release toutes les 8 semaines. La dernière en date, la 18.0, est sortie en mars 2022.

Fonctionnement d’Electron

Plongeons maintenant un peu plus dans les détails techniques. Nous l’avons dit, Electron utilise les technologies web pour créer du logiciel, des apps desktop.

Dans cette logique, il est l’équivalent de Cordova ou de Capacitor pour le développement mobile, même si le fonctionnement technique est bien différent.

En effet, Electron, contrairement à ces frameworks mobiles, embarque avec lui un navigateur complet – Chromium – pour pouvoir interpréter le JavaScript, HTML et CSS embarqués.

Ce framework cross-platform est donc basé sur Chromium, ainsi que Node.js.

En dehors de ces deux éléments, Electron fonctionnant avec du JavaScript, il est possible d’utiliser n’importe quelle techno JavaScript, comme ses trois gros frameworks, Angular, React et Vue, et tout module tournant autour de ces technos.

Bon à savoir : Electron supporte aussi le langage TypeScript !

Avantages et inconvénients

Maintenant que nous en savons un peu plus sur Electron et son fonctionnement, évoquons ses avantages et ses inconvénients, qui vous aideront à prendre une décision sur l’utilisation ou non de cette techno dans votre stack technique.

Les avantages d’Electron

Commençons par évoquer les avantages de ce framework.

Il utilise les langages web

C’est bien sûr ce qui a fait son succès : Electron utilise les langages du web (HTML, CSS et JavaScript). Ce qui rend son développement plus accessible à beaucoup de développeurs, qui ne maîtrisent que ces technos.

Le fait d’utiliser des langages aussi courants rend également Electron plus maintenable (il sera plus facile d’y former un développeur), et lui donne une courbe d’apprentissage plus douce.

Il est cross platforms

Autre clé de son succès : ce framework est cross-platform. Alors que le développement logiciel est plutôt cloisonné (chaque système d’exploitation a sa techno et ses frameworks dédiés), Electron permet de faire tourner des applications sur les trois principales plateformes, Windows, Mac et Linux, et ce avec un seul code source.

La communauté Electron

Electron datant de 2013 et ayant rapidement connu une croissante importante, il a aujourd’hui une grosse communauté derrière lui. En dehors de son repo GitHub qui compte plus de 100k stars, cette techno possède un compte Twitter avec plus de 35k abonnés, ainsi qu’un serveur Discord. Vous n’aurez aucun mal à trouver de l’aide en cas de difficulté.

Les inconvénients d’Electron

Toutefois, Electron, comme toute techno, n’est pas dénué d’inconvénients.

Les apps créées sont lourdes

Electron embarque Chromium et Node avec lui, ce qui alourdit de facto le poids de l’application générée. Elle peut de plus contenir beaucoup de packages et de dépendances, ce qui fait qu’une app Electron peut facilement dépasser les 200-300 Mo.

Des apps qui consomment

De même, les applications desktop générées via Electron ne sont pas connues pour être économes, au contraire ! Elles sont même grosses consommatrices de ressources, que l’on parle de mémoire vive comme de CPU. Ces applications sont donc logiquement énergivores, et drainent plus rapidement la batterie d’un ordinateur qu’une application dite native.

Toutefois, pour éviter ces problèmes, il existe des bonnes pratiques à adopter, il y en a même des exemples dans la documentation officielle d’Electron.

Exemples de code

Puisque le meilleur moyen de cerner un langage ou un framework est encore de voir des exemples techniques, voyons quelques cas concrets d’utilisation d’Electron !

Création d’un projet d’Electron

Voyons ensemble les étapes à suivre pour créer un projet Electron.

D’abord, créer un dossier pour le futur projet et y instancier npm :

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

Vérifier que le package.json créé ressemble à quelque chose comme cela :

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

Puis, installer Electron via npm (ou yarn) :

npm install --save-dev electron

Enfin, la dernière étape est de rajouter la commande d’exécution d’Electron dans le package.json généré :

{
  "scripts": {
    "start": "electron ."
  }
}

Pour lancer le projet Electron, il suffira alors d’exécuter la commande npm start à la racine du projet.

Utilisation d’un module Electron : BrowserWindow

Dans cet exemple, tiré de la documentation du framework, nous allons voir le fonctionnement d’un des modules du framework, BrowserWindow, permettant de modifier le style et le comportement des fenêtres du software.

Si l’on veut par exemple créer une fenêtre sans frame (sans la barre d’outils, ni les contrôles, ni rien qui entoure la vue en elle-même), cela se fait avec le code suivant :

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ frame: false })

Il suffit de passer une option à l’instanciation du BrowserWindow pour supprimer la frame ! Et cela fonctionne de la même manière si nous voulons, par exemple, créer une fenêtre transparente :

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ transparent: true })

Exemples d’applications développées avec Electron

Pour mesurer le succès d’Electron, il suffit de voir, en plus de la communauté, le nombre impressionnant d’applications desktop développées avec cet outil.

Il est très probable que vous en utilisiez sans même le savoir ! Parmi les plus connues, nous pouvons citer :

• WhatsApp ;
• Twitch ;
• Slack ;
• Visual Studio Code ;
• Notion.

Et ce ne sont que les plus importantes. Vous pouvez retrouver la liste complète des apps créées avec Electron sur le site officiel du framework.

Conclusion

Comme nous l’avons vu dans cet article, Electron est une excellente alternative aux solutions plus conventionnelles de développement d’applications de bureau. En plus de faciliter la création des apps, du fait des technologies utilisées, ce framework est soutenu par une grosse communauté.

Si vous êtes en pleine réflexion sur la techno à choisir pour la création d’une app desktop, vous devriez donc sérieusement envisager cette option !