Electron : Créez vos premières applications desktop avec JavaScript

1. Qu'est-ce qu'Electron et pourquoi l'utiliser?

Définition
Electron est un framework open-source créé par GitHub qui permet de développer des applications de bureau (desktop) en utilisant des technologies web : HTML, CSS et JavaScript. Il combine Chromium (le moteur de navigateur de Chrome) et Node.js pour créer des applications qui fonctionnent sur Windows, macOS et Linux avec un seul code source.

Analogie simple
Pensez à Electron comme à un "navigateur web personnel" pour votre application. Tout comme votre navigateur affiche des pages web, Electron affiche votre interface créée en HTML/CSS, mais elle s'exécute comme une véritable application desktop avec accès aux ressources système (fichiers, notifications, etc.).

Tableau comparatif : Développement web vs Electron

Astuce
Electron est utilisé par des applications populaires comme Visual Studio Code, Slack, Discord et Figma. Si vous connaissez JavaScript, vous pouvez créer des applications au même niveau de complexité.

Attention
⚠️ Les applications Electron sont plus lourdes que les applications natives (120-200 MB minimum) car chaque app embarque Chromium. Ce n'est pas idéal pour les appareils avec peu d'espace disque.

Avantages majeurs
Electron offre plusieurs avantages concrets : une courbe d'apprentissage faible puisque vous utilisez des technologies web familières, une excellente productivité grâce à la réutilisation de code, et une véritable compatibilité multiplateforme. Les développeurs peuvent créer, tester et déployer sur trois systèmes d'exploitation sans modifications majeures du code.

Cas d'usage idéaux
Electron excelle dans les situations suivantes : applications d'édition (éditeurs de texte, d'images), outils de productivité (gestionnaires de tâches, clients email), applications de communication (chat, vidéoconférence), et outils de développement (IDE, gestionnaires de version). Tout ce qui nécessite une interface riche et l'accès aux ressources système est un bon candidat pour Electron.

2. Architecture d'Electron : Processus principal et processus de rendu

Définition
L'architecture d'Electron repose sur deux types de processus qui travaillent ensemble : le processus principal (Main Process) qui gère le cycle de vie de l'application et l'accès aux ressources système, et les processus de rendu (Renderer Process) qui affichent l'interface utilisateur et gèrent l'interaction utilisateur. Ces processus communiquent via un système de messages sécurisé.

Analogie simple
Imaginez une restaurant : le processus principal est le chef de cuisine qui prend les commandes, gère les fournisseurs et dirige la cuisine. Les processus de rendu sont les serveurs qui interagissent avec les clients et présentent les plats. Les deux communiquent via des messages écrits (le système de communication).

Tableau des responsabilités

Astuce
Pour éviter que votre application ne freeze, placez les opérations lourdes (traitement de fichiers, requêtes réseau) dans le processus principal via IPC (Inter-Process Communication), ce qui libère le processus de rendu pour maintenir une interface réactive.

Attention
⚠️ Le processus principal a accès à des ressources système sensibles. Vous devez valider tous les messages reçus du processus de rendu pour éviter les failles de sécurité. Ne faites jamais confiance aveuglément aux données provenant du processus de rendu.

Communication entre processus
La communication utilise le module ipcMain dans le processus principal et ipcRenderer dans le processus de rendu. C'est un système événementiel où un processus envoie un message et l'autre répond. Cette séparation garantit une meilleure performance et une meilleure sécurité.

Exemple conceptuel
Quand l'utilisateur clique sur "Ouvrir un fichier" : 1) le processus de rendu envoie un message IPC, 2) le processus principal reçoit le message et ouvre un dialogue natif, 3) le processus principal renvoie le chemin du fichier, 4) le processus de rendu affiche le contenu.

3. Installation et mise en place d'un projet Electron

Définition
L'installation d'Electron consiste à configurer un environnement de développement avec Node.js, npm (gestionnaire de paquets), et les fichiers de configuration nécessaires pour créer et exécuter une application Electron. C'est le point de départ avant de coder votre application.

Analogie simple
Installer Electron c'est comme préparer un studio d'enregistrement : vous avez besoin des équipements (matériel), des logiciels (enregistreur), et de l'espace de travail organisé. Sans cette préparation, vous ne pouvez pas commencer à produire.

Tableau des fichiers essentiels

Astuce
Utilisez le template officiel electron-forge pour démarrer rapidement : npx create-electron-app my-app. Cela crée automatiquement toute la structure de base, les scripts et les configurations nécessaires, vous évitant des heures de configuration.

Attention
⚠️ Assurez-vous que Node.js (version LTS recommandée) est installé avant de commencer. Vérifiez avec node --version et npm --version. Une version obsolète de Node.js peut causer des erreurs incompréhensibles lors de l'installation des dépendances.

Structure d'un projet typique
Un projet Electron bien organisé contient : un dossier src/ avec tous les fichiers source, un package.json à la racine décrivant le projet, des scripts npm pour développement et production, et un fichier .gitignore pour exclure les fichiers inutiles. Cette organisation facilite la maintenance et la collaboration.

Processus d'installation concret
Après l'installation initiale avec npm, vous exécutez npm start pour lancer l'application en mode développement. Pendant la phase de développement, vous modifiez vos fichiers HTML/CSS/JS, et l'application redémarre pour réfléchir les changements. Une fois prêt, vous utilisez npm run make pour compiler l'application en exécutables pour chaque plateforme.

4. Créer votre première fenêtre et interface utilisateur

Définition
Créer une fenêtre Electron signifie instancier un objet BrowserWindow dans le processus principal, le charger avec un fichier HTML, et le configurer avec les paramètres voulus (taille, position, icône, etc.). C'est la première chose visible par l'utilisateur et le point focal de votre application.

Analogie simple
Créer une fenêtre Electron c'est comme ouvrir une nouvelle page blanche dans un carnet : vous décidez de sa taille (dimensions de la fenêtre), vous y écrivez le contenu (fichier HTML), et vous décidez si elle a des bordures, des boutons ou des décorations (options de configuration).

Tableau des options principales

Astuce
Définissez show: false lors de la création, puis utilisez mainWindow.once('ready-to-show', () => { mainWindow.show() }). Cela évite l'effet "flash blanc" en attendant que le rendu soit complet et que votre HTML soit chargé.

Attention
⚠️ Gardez une référence globale à votre BrowserWindow. Si vous utilisez une variable locale, le garbage collector de JavaScript peut supprimer la fenêtre prématurément, la fermant inopinément. Utilisez une variable au niveau du module.

Chargement du contenu
Vous chargez le fichier HTML avec mainWindow.loadFile('index.html') ou mainWindow.loadURL('http://localhost:3000') pour un serveur de développement. L'URL permet un hot-reload en développement, tandis que le fichier est utilisé en production pour l'autonomie.

Gestion des événements de fenêtre
Les fenêtres émettent des événements : closed quand elle est fermée, minimized quand minifiée, focus quand elle reçoit le focus. Vous écoutez ces événements pour mettre à jour votre état, sauvegarder des données, ou nettoyer les ressources.

5. Communication inter-processus et gestion des événements

Définition
La communication inter-processus (IPC) est le mécanisme par lequel le processus de rendu et le processus principal s'envoient des messages sécurisés. Elle utilise les modules ipcMain et ipcRenderer pour créer des canaux de communication asynchrone ou synchrone entre les deux processus.

Analogie simple
IPC c'est comme un système de boîtes aux lettres entre deux bureaux : le processus de rendu met un message dans sa boîte, le processus principal récupère le message, le traite, et remet une réponse dans la boîte du rendu. Les deux peuvent travailler indépendamment.

Tableau des patterns de communication

Astuce
Utilisez ipcMain.handle() et ipcRenderer.invoke() pour les opérations asynchrones modernes. C'est plus propre que l'approche ancienne avec send et on, et cela gère automatiquement les promesses. Exemple : await ipcRenderer.invoke('open-file').

Attention
⚠️ Validez toujours les données reçues du processus de rendu. Ne supposez pas que le rendu envoie des données valides. Un attaquant pourrait modifier le code du rendu pour envoyer des commandes dangereuses. Vérifiez les types, les longueurs et les valeurs.

Exemple de flux complet

1. Utilisateur clique sur bouton "Ouvrir" dans l'interface (rendu)
2. ipcRenderer.invoke('open-file-dialog') envoie une demande au processus principal
3. ipcMain.handle('open-file-dialog', ...) reçoit et affiche un dialogue natif
4. Utilisateur sélectionne un fichier
5. Le processus principal renvoie le chemin du fichier
6. Le processus de rendu reçoit la promesse résolue avec le chemin
7. L'interface affiche le contenu du fichier

Gestion des événements applicatifs
Au-delà de IPC, vous gérez les événements de l'application comme app.on('before-quit') pour sauvegarder l'état, app.on('window-all-closed') pour quitter sur macOS (comportement différent de Windows/Linux), ou app.on('activate') pour relancer la fenêtre quand l'utilisateur clique sur l'icône dock.

Bonnes pratiques de communication
Organisez vos canaux IPC de manière logique : groupez les canaux par fonctionnalité (fichiers, paramètres, affichage). Documentez chaque canal avec son contenu attendu. Utilisez des noms descriptifs comme file:open, settings:save. Implementez un timeout pour les opérations longues pour éviter que l'application ne se fige indéfiniment.