Electron.js est un framework js qui permet d'intégrer une application réalisée avec des technologies web dans un exécutable desktop (Windows, Mac, Linux). Electron permet de gérer toutes les fonctionnalités natives comme la barre de navigation, l'exécution de lignes de commande, l'affichage de notifications, etc. On peut créer des exécutables portable ou installable. On peut aussi potentiellement distribuer une application web dans un store comme le microsoft store, Itch ou Steam par exemple. Ou bien encore signer une application pour permettre son exécution dans des environnements sécurisés (généralement chez les grands comptes). Enfin, le front-end est interprété en js par le navigateur Chromium qui est directement intégré dans l'exécutable. On peut donc réaliser tout ce qu'on veut tant qu'on utilise une technologie web : html, css et vanilla js ; angular ; react ; WebGl ; WebAssembly... 👏
Pourquoi choisir Electron
Quand on souhaite faire une application de bureau, il y a plusieurs raisons qui nous amènent vers ce choix.
- Electron est cross-platform, il permet de faire une application sur Windows, Mac et Linux avec un seul code source. 💪
- On a besoin d'itérer sur une version web pour tester l'application. Très utile quand on doit faire un exécutable Windows mais que son client est sur Mac. 🤝🧪
- On est limité dans ses choix tech par une librairie spécifique. ☝️
- Accessoirement, on maitrise parfaitement les techno web, et on n'a pas besoin de pousser les performances (quoiqu'on peut toujours utiliser webassembly, webgpu...) 👌
- On n'a pas envie de payer une licence pour une techno cross-platform propriétaire. 😇
- Avoir un splashscreen avec un logo tiers n'est pas acceptable. 🙅
- Pas envie d'utiliser une solution propriétaire qui pourrait changer les règles à tout moment et vous bloquerait dans une éventuelle mise à jour... 🙅
- Faire un simple portage d'une application web sur desktop. ☝️
- Faire un simple portage d'une application flash sur desktop. 😱
Choisir la version de Chromium
Ayant récemment réalisé une application avec Electron pour un musée, je partage ici un point important à ne pas négliger...la version de Chromium. En effet, les navigateurs évoluent vite et il vaut mieux s'assurer que la version qu'on utilise corresponde à la version de notre version web. On peut également vouloir utiliser une fonctionnalité supprimée ou une version qui fonctionnait différemment (par exemple depuis Chrome 78, les écrans tactiles ne sont pas reconnus dans Chrome Desktop, ce qui pose uniquement problème pour le multitouch, car les évènements touch sont de toute façon convertis en évènements souris).
On peut consulter les versions de Chromium intégrées aux versions d'Electron.
Pour modifier la version d'Electron, on peut utiliser le gestionnaire de package npm.
- pour être toujours à jour
npm install electron@latest- pour une version prennant en charge le multitouch
npm install electron@6.0.0- pour une version prennant en charge flash 😱
npm install electron@11.0.0Pour aller plus loin
Je conseille d'utiliser Electron Builder pour facilement compiler et packager son application Electron en un seul fichier.
Sinon il existe aussi des alternatives comme NWJS.
Quelques exemples d'applications
Des apps comme VSCode, Slack, SpriteUV2 ou même des jeux comme Curious Expedition.
🏁 On arrive enfin à la fin de cet article, j'écrirai peut être un tutoriel une prochaine fois. 🤔