Electron permet de créer des applications desktop multi-plateformes avec seulement du HTML, du CSS et du Javascript. Si vous savez développer pour le Web alors avec Electron vous savez aussi créer une application pour PC ou Mac. C’est à rapprocher d’Apache Cordova qui permet de créer des applications mobiles avec les mêmes bases de code.
Je vous propose une série d’article pour découvrir Electron et apprendre à l’utiliser.
Présentation
Electron est fondé sur deux technologies puissantes :
Node.js pour créer un serveur local et accéder aux fichiers, gérer les modules… Chromium pour l’affichage. Vous n’avez pas besoin d’une connaissance approfondie de Node.js pour utiliser Electron.
Une application Electron ressemble aux applications créées avec d’autres langages et frameworks, pas besoin de lancer un navigateur, elle peut être démarrée à partir de la barre de Windows ou de l’équivalent sur Mac (je ne le pratique pas et mes articles seront donc plutôt orientés sur Windows mais j’évoquerai toujours l’aspect multi-plateformes).
Pour vous faire une idée de quoi est capable Electron il existe une application de présentation sur le site :
C’est évidemment une application Electron multi-plateforme ! Elle balaye pas mal de sujets :
- création et gestion des fenêtres
- gestion des menus et du clavier
- utilisation de dialogues
- utilisation des fichiers
- communication entre les processus
- utilisation du presse-papier
- …
Je vous invite à parcourir cette présentation pour voir si Electron est fait pour vous !
Electron est constitué de deux processus distincts :
- le processus principal (main process) : gestion du fonctionnement global (life-cycle), gestion des fichiers, gestion des modules. En gros c’est tout ce qui est en Javascript.
- le processus de rendu (renderer process) : rendu HTML et CSS, accès au DOM, API web…
Installation
La première chose à faire est évidemment d’installer Electron pour pouvoir s’en servir.
Node
Vous avez besoin d’une installation de Node.js sur votre machine. Si vous n’êtes pas trop sûr d’en disposez ouvrez la console et taper cette commande :
S’il est installé vous obtenez le numéro de version. Si cette version est un peu vieille je vous conseille de l’actualiser parce que vous risquez d’avoir des soucis par la suite.
Git
Je vais aussi utiliser git dans cet article. Alors vous pouvez regarder si vous l’avez dans la console :
Là aussi si votre version est un peu périmée actualisez-la.
Electron
Vous pouvez maintenant installer Electron avec npm (c’est le gestionnaire de packages de Node.js). Il y a deux façons de l’installer :
- globalement
- par projet
Je vous conseille de l’installer globalement :
npm install electron -g
Ça prend un peu de temps mais au moins pour vos créations futures de projets ça sera rapide. Vous pouvez vérifier dans la console :
Si vous préférez une installation par projet la syntaxe est celle-ci :
npm install electron --save-dev --save-exact
Démarrage rapide
Il existe un dépôt qui propose une architecture de base pour Electron pour un démarrage rapide :
Pour l’installer c’est tout simple. d’abord on clone le dépôt avec git. Par exemple si je veux créer un dossier electron avec le contenu du dépôt :
git clone https://github.com/electron/electron-quick-start electron
Ensuite il faut lancer l’installation des dépendances :
cd electron npm install
Là aussi ça prend un peu de temps…
Normalement vous devriez avoir ces dossiers :
Il ne reste plus qu’à lancer l’application :
npm start
Et là normalement une fenêtre s’ouvre :
Là c’est l’aspect avec Windows, ça doit être un peu différent sur les autres systèmes.
La fenêtre peut être redimensionnée, réduite, elle apparaît dans la barre de Windows. Elle a tout d’une application native !
Dans le prochain chapitre on analysera le code de cette application de démarrage…