Tu connais VS Code ? Slack ? Discord ? Obsidian ? Tous ces logiciels que tu utilises tous les jours sur ton bureau ont un point commun : ils sont construits avec Electron.js. Et pourtant, quand on débute en code, on n’en parle presque jamais. C’est dommage, parce que c’est l’un des outils les plus puissants pour transformer du JavaScript web en vraie application desktop.
Dans cet article, on va tout démystifier. Ce que c’est, comment ça marche, pourquoi des milliers d’entreprises l’utilisent, et comment toi tu peux créer ta première app de bureau sans partir de zéro.
C’est quoi exactement Electron.js et pourquoi ça change tout ?
Electron.js est un framework open source qui permet de créer des applications de bureau (Windows, macOS, Linux) en utilisant uniquement du HTML, CSS et JavaScript. En gros, tu codes un site web, et Electron le transforme en vrai logiciel qu’on installe sur un ordinateur.
Le truc magique ? Electron embarque deux composants :
- Chromium : le moteur de rendu de Google Chrome. C’est lui qui affiche ton interface.
- Node.js : qui permet à ton app d’accéder au système de fichiers, aux notifications, au réseau, etc.
Résultat : tu peux faire tout ce qu’un site web sait faire, plus tout ce qu’une app native peut faire. Lire des fichiers sur le disque dur, créer des fenêtres, envoyer des notifications système, se mettre dans la barre de tâches… tout ça avec du JavaScript que tu connais peut-être déjà.
Si tu veux comprendre comment Node.js fonctionne en dehors du navigateur, l’article sur Node.js en 2026 est un très bon point de départ avant de continuer ici.
Quelles apps célèbres tournent vraiment sous Electron ?
La liste des applications construites avec Electron est impressionnante, et elle prouve que cette technologie est prise très au sérieux par l’industrie.
| Application | Éditeur | Usage principal |
|---|---|---|
| Visual Studio Code | Microsoft | Éditeur de code |
| Slack | Salesforce | Messagerie pro |
| Discord | Discord Inc. | Chat et voix |
| Notion (desktop) | Notion Labs | Organisation |
| 1Password | AgileBits | Gestionnaire de mots de passe |
Ces apps tournent sur Windows, macOS et Linux à partir d’une seule base de code. C’est exactement la promesse d’Electron : tu codes une fois, tu déploies partout.
Comment Electron fonctionne concrètement ?
Electron sépare ton application en deux processus distincts qui communiquent entre eux : le Main Process et le Renderer Process.
Le Main Process est le coeur de ton app. C’est lui qui crée les fenêtres, gère le cycle de vie de l’application, accède aux fichiers, aux notifications OS, etc. Il tourne avec Node.js.
Le Renderer Process est l’interface visuelle. Chaque fenêtre ouverte par ton app a son propre Renderer. C’est là que vit ton HTML/CSS/JavaScript front-end, exactement comme dans un navigateur.
Ces deux processus ne se parlent pas directement pour des raisons de sécurité. Ils utilisent un pont appelé IPC (Inter-Process Communication). Tu envoies un message depuis le Renderer, le Main le reçoit, fait son travail côté système, et renvoie une réponse.
Voici un exemple ultra-simple d’un message IPC :
// Dans le Renderer (front-end)
window.electronAPI.openFile() // on demande à ouvrir un fichier
// Dans le Main Process (back-end Node.js)
ipcMain.handle('dialog:openFile', async () => {
const { filePaths } = await dialog.showOpenDialog()
return filePaths[0] // on renvoie le chemin du fichier
})C’est aussi simple que ça dans les cas basiques. Tu poses une question, tu reçois une réponse.
Comment créer ta première app Electron en 5 minutes ?
Lancer un projet Electron minimal ne nécessite que Node.js installé sur ta machine et trois fichiers.
Voici la structure minimale :
mon-app/
├── package.json
├── main.js // le Main Process
└── index.html // ton interfaceTon package.json :
{
"name": "mon-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^41.0.0"
}
}Ton main.js minimal :
const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html') // on affiche notre page HTML
})Ton index.html :
<!DOCTYPE html>
<html>
<body>
<h1>Ma première app Electron !</h1>
</body>
</html>Tu lances npm install puis npm start, et une vraie fenêtre s’ouvre sur ton bureau. C’est ton app. Construite avec du JavaScript.
Pour aller plus loin dans la logique front-end que tu peux embarquer dans Electron, jette un oeil aux guides sur Vue.js ou React : les deux frameworks s’intègrent parfaitement dans un Renderer Electron.
Quels sont les vrais avantages d’Electron face au développement natif ?
Electron résout un problème concret : développer nativement pour trois systèmes d’exploitation différents coûte cher, en temps et en argent.
- Une seule base de code pour Windows, macOS et Linux. Tu ne codes pas trois fois la même chose.
- Tu utilises des compétences web que tu as peut-être déjà. Pas besoin d’apprendre Swift, C# ou Qt.
- Accès à l’écosystème npm. Tous les packages JavaScript que tu connais sont disponibles.
- Mises à jour facilitées. Avec des outils comme electron-updater, tu pousses des mises à jour automatiques à tes utilisateurs.
- Débogage familier. Chrome DevTools est intégré. Tu inspectes ton app desktop comme une page web.
C’est pour ça que des startups avec de petites équipes ont pu construire des produits comme VS Code ou Notion : Electron leur a permis de livrer vite sur toutes les plateformes sans tripler leurs équipes de dev.
Quels sont les inconvénients à connaître avant de te lancer ?
Electron a des critiques légitimes, et il vaut mieux les connaître avant de démarrer un projet sérieux.
La consommation de RAM est le reproche le plus fréquent. Electron embarque un Chromium complet, qui pèse déjà plusieurs centaines de mégaoctets. Une app Electron « vide » consomme facilement 100 à 200 Mo de RAM. Pour une calculatrice, c’est excessif. Pour un outil professionnel, c’est acceptable.
Le poids de l’exécutable est aussi important. Ton installateur fera rarement moins de 50 à 80 Mo, même pour une petite app. C’est Chromium embarqué dedans.
Les performances graphiques intensives ne sont pas le fort d’Electron. Pour un jeu vidéo ou un outil de rendu 3D, ce n’est clairement pas adapté.
Pour autant, ces limitations n’empêchent pas des millions d’utilisateurs d’utiliser Discord ou Slack au quotidien. Tout dépend du type d’app que tu veux construire.
Electron vs Tauri : lequel choisir en 2026 ?
Tauri est l’alternative la plus sérieuse à Electron en 2026, et elle répond directement à ses principaux défauts.
| Critère | Electron | Tauri |
|---|---|---|
| Langage back-end | Node.js (JavaScript) | Rust |
| Poids de l’app | 50-150 Mo | 3-10 Mo |
| RAM consommée | Élevée | Très faible |
| Courbe d’apprentissage | Facile si tu connais JS | Rust requis pour la partie native |
| Maturité | Très mature (2013) | En forte croissance (2022) |
Si tu démarres aujourd’hui et que tu veux créer une app légère, Tauri mérite sérieusement ta curiosité. Mais si tu veux te former sur un outil ultra-documenté avec des milliers d’exemples et une communauté immense, Electron reste le choix le plus sûr pour un débutant.
Quelles ressources utiliser pour progresser avec Electron ?
La documentation officielle d’Electron est l’une des meilleures de l’écosystème JavaScript : claire, complète, avec des exemples pour chaque API.
Voici un chemin logique pour progresser :
- Lis le Quick Start sur electronjs.org : tu auras une app en 10 minutes.
- Explore le dépôt electron-quick-start sur GitHub : c’est le template officiel minimal.
- Utilise Electron Forge pour créer et packager tes projets proprement dès le départ.
- Consulte les exemples d’API officiels dans le dépôt electron/electron-api-demos.
Si tu utilises TypeScript dans tes projets, sache qu’Electron s’intègre très bien avec. Les types sont fournis nativement et ça évite pas mal d’erreurs dans le processus IPC.
Et pour versionner ton projet et travailler proprement, pense à configurer GitHub dès le début : tu vas en avoir besoin quand tu voudras distribuer ton app.
En résumé : Electron.js
Electron.js est la technologie qui se cache derrière la plupart des grandes apps de bureau que tu utilises au quotidien. Elle permet à n’importe quel développeur web de créer une vraie application desktop multiplateforme avec du JavaScript, HTML et CSS. Son principal défaut est sa consommation de ressources, mais sa maturité, sa documentation et sa communauté en font un choix solide et réaliste pour un premier projet desktop. Si tu sais déjà faire du JavaScript, tu es à quelques heures de ta première app installable sur un vrai ordinateur.
Questions fréquentes sur Electron.js
Electron.js est-il gratuit et open source ?
Oui, Electron est entièrement gratuit et open source. Il est maintenu par GitHub (propriété de Microsoft) et la communauté. Tu peux l’utiliser pour des projets personnels comme commerciaux sans payer de licence.
Faut-il connaître Node.js avant d’apprendre Electron ?
Ce n’est pas obligatoire pour commencer, mais une connaissance basique de Node.js aide vraiment. Le Main Process d’Electron tourne avec Node.js, donc comprendre les modules, les imports et les APIs de base de Node.js te fera gagner beaucoup de temps. Un passage rapide par l’article sur Node.js suffit pour démarrer.
Peut-on utiliser React ou Vue.js dans une app Electron ?
Absolument. Le Renderer Process d’Electron est un navigateur Chromium standard. Tu peux y intégrer n’importe quel framework front-end : React, Vue.js, Svelte, Angular… Tu développes ton interface exactement comme une app web classique.
Comment distribuer une app Electron à d’autres utilisateurs ?
Tu utilises Electron Forge ou electron-builder pour « packager » ton app en exécutable (.exe sur Windows, .dmg sur macOS, .AppImage sur Linux). Ces outils créent un installateur autonome que tes utilisateurs téléchargent et installent comme n’importe quel logiciel.
Electron fonctionne-t-il avec les dernières versions de Windows et macOS ?
Oui. Electron suit de près les mises à jour de Chromium et Node.js. En 2026, Electron 41+ supporte Windows 10/11, macOS 12+ et les principales distributions Linux. Les nouvelles versions sortent tous les deux mois environ.
Tauri va-t-il remplacer Electron à terme ?
Tauri gagne beaucoup de terrain grâce à ses performances supérieures, mais il est peu probable qu’il remplace complètement Electron à court terme. Electron a une avance considérable en termes de maturité, d’écosystème et de documentation. Les deux outils coexisteront encore longtemps, chacun avec ses cas d’usage privilégiés.