[Devoxx 2016] Construire facilement une application desktop grâce à Electron !

Au cours de Devoxx, nous avons pu assister une présentation sur le framework Electron donnée par Thomas Brisbout. Cette solution permet de réaliser des applications pour desktop. Aujourd’hui, de nombreuses sociétés l’utilisent, car elle présente de nombreux avantages. La preuve nous en est apportée par un passage sur le site web d’Electron. Très rapidement, nous comprenons qu’il s’agit d’une solution fort prometteuse.

Ainsi, on peut citer quelques applications que nous pouvons connaitre qui sont une vitrine d’Electron :

• L’éditeur Open-Source de Github Atom
• L’éditeur Open-Source de Microsoft Visual Studio Code
• L’application desktop de WordPress
• L’application desktop de Slack
• …

La liste est donc longue ! Autant que l’intérêt de la solution. Mais pourquoi est-elle devenue aussi incontournable ?

Durant ce live coding, nous avons l’occasion de comprendre l’intérêt d’Electron et pourquoi toutes ces entreprises ont décidé de l’adopter !

Fonctionnement d’Electron

Electron est tout simplement un assemblage de deux projets bien connus : NodeJS et Chromium. Grâce à ce principe de fonctionnement, Electron est naturellement une solution cross-plateforme. Et pour faire une application de bureau, il ne reste plus qu’à écrire… Une application web !!

Nous rentrons ensuite dans le détail de fonctionnement d’une application en découvrant le principe des processus dans Electron. Très rapidement, on nous explique qu’Electron est basé sur un principe simple de deux types de processus :

• Le main process
• Les render process

Le processus qui lance le script main du package.json s’appelle donc le main process. Cela correspond au point d’entrée de l’application. Dans ce main process, il est alors possible de lancer des nouvelles fenêtres. Chaque fenêtre tournera ainsi dans ce que l’on appelle un render process. Nous comprenons que l’architecture de renderer mutli processus de Chromium est donc aussi exploitée dans Electron et que chaque nouvelle fenêtre lancée sera donc un nouveau render process qui apparaitra sur le système.

En tant qu’introduction, cela était rapide et un peu dense mais, toutefois nécessaire pour bien comprendre la démonstration qui a suivie. Nous avons pu voir comment créer une application très simple permettant de lire et modifier des fichiers au format Markdown. Cette application basée sur Electron ne contenait qu’un seul render process où était affiché une zone pour sélectionner les fichiers à éditer et d’une zone pour éditer ceux-ci.

Malgré un petit incident technique, nous sommes arrivés à la fin de la démonstration en passant de commit en commit pour voir l’évolution du code. Nous avons pu ainsi avoir les explications sur le code écrit et comprendre un peu le fonctionnement d’Electron et la communication entre les render process et le main process.

De plus, durant la démo, nous avons également pu voir qu’Electron, ce n’est pas uniquement l’assemblage d’un serveur NodeJS et d’un Chromium !! En effet, nous avons devant nous des notifications du système d’exploitation pour informer l’utilisateur d’un évènement. Car Atom intègre une API riche pour développer son application et la documentation en ligne que nous visitons nous permet d’en apprécier le contenu. Avec Electron, on nous explique qu’il nous est possible de travailler l’intégration de l’application au sein d’un système d’exploitation comme Windows ou MacOS.

Si vous le souhaitez, vous pouvez retrouver l’intégralité de la présentation sur le dépôt git de Thomas Brisbout : notebook. Cela vous permettra, en avançant dans les commits, de comprendre un peu la création de l’application.

Aller un peu plus loin avec Electron

Bien sûr, durant un Hands-On, nous ne pouvons faire un tour complet sur toutes les fonctionnalités proposées par Electron. Il nous est juste donné un aperçu rapide des possibilités en regardant les entrailles du code. Il a donc fallu faire un choix sur des éléments à dire et surtout ceux à ne pas dire. Toutefois, il y a quelques informations ayant dû être malheureusement passée sous silence.

Tout d’abord, il faut rappeler la naissance du projet Electron. Avant de s’appeler Electron, le projet portait le nom d’Atom Shell et servait de base pour construire le logiciel Atom, une alternative à SublimeText entièrement customisable, disposant de nombreux plugins et ayant l’avantage d’être gratuite !

Celles et ceux qui connaissent Atom auront peut-être compris qu’il ne s’agit pas totalement d’un nouveau framework JavaScript à la mode. En effet, le logiciel Atom a été développé par Github et la base, Electron, est désormais maintenue en grande partie par la société et la communauté ! Car oui, Electron est en effet Open-Source sous licence MIT. Bénéficiant de l’appui de la société, les releases d’Electron sont fréquentes et incluent les dernières versions de NodeJS et de Chromium seulement deux semaines après leurs sorties !

De plus, il existe également un autre avantage non négligeable au développement d’applications desktop avec Electron : les tests !! Le domaine des tests pour les applications web a été poussé jusqu’à la création d’outils dédiés uniquement à cela. Avec Electron, il vous sera donc possible de profiter de tout cet écosystème pour tester votre application bureautique ! Ainsi, rien ne vous empêchera d’écrire des tests Selenium sur votre application. Et surtout, n’oubliez pas que Selenium est un Atom avec 34 Electrons 😉 !!

Par ailleurs, et à cause des petits problèmes techniques, nous n’avons malheureusement pas eu le temps de passer dessus durant le Hands-On. Thomas Brisbout aurait souhaité nous faire la démonstration jusqu’au bout de la construction du binaire pour les différentes plateformes. Nous avons dû passer un peu vite sur cette partie-là, mais de par son fonctionnement, Electron permet facilement de packager un executable à destination des différentes plateformes cibles et, éventuellement, de publier son application dans le store d’Apple !!

Enfin, la présentation nous a probablement paru un peu courte, car il me semble qu’au vu de la solution, il aurait été possible d’en montrer plus, bien plus ! La démonstration nous a juste permis de nous mettre l’eau à la bouche pour aller voir un peu plus loin ce qu’il était possible de faire avec Electron. Aujourd’hui, Electron a aussi été choisie par d’autres grandes compagnies comme Microsoft pour construire des applications desktop.

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

Pourquoi pas nous ?

Donc, mission accomplie pour un Hands-On très sympathique !!

© SOAT
Toute reproduction interdite sans autorisation de la société SOAT