Introduction à Electron

Electronest un framework open source qui encapsuleChromium (moteur de navigateur) + Node.js (capacités serveur/système)dans un shell d'application de bureau, vous permettant d'utiliserHTML/CSS/JSÉcrire des applications de bureau multiplateformes (Windows, macOS, Linux).

Points clés :

  • Le frontend gère l'interface utilisateur (processus Renderer : comme les onglets du navigateur).
  • Le processus principal (Main) gère le cycle de vie de l'application, les fenêtres et les appels d'API natives.
  • Les deux interagissent viaIPC (Inter-Process Communication).
  • Peut finalement être empaqueté dans.exe、.app、.debet d'autres fichiers d'installation.

Electron a été développé et maintenu par GitHub, initialement créé pour construire l'éditeur Atom.

En bref :Electron = Chromium + Node.js + API natives

  • Chromium: Fournit un moteur de rendu puissant, responsable de l'affichage de l'interface utilisateur.
  • Node.js: Fournit des capacités backend, avec accès au système de fichiers, au réseau, etc.
  • API natives: Fournit des fonctionnalités au niveau du système d'exploitation telles que les menus, les notifications, la zone de notification, etc.

Pourquoi choisir Electron

Electron permet aux développeurs web de créer des applications de bureau sans apprendre un nouveau langage, ce qui abaisse considérablement la barrière au développement d'applications de bureau.

  • facile à apprendre: Les développeurs web peuvent réutiliser un grand nombre de compétences/composants/écosystème frontend (React/Vue/Angular/TS/CSS).
  • Multiplateforme: Écrivez une fois, compilez pour trois plateformes (bien que les différences système nécessitent des ajustements).
  • Capacités locales puissantes: Accédez directement au système de fichiers, aux processus et aux API système sans écrire de liaisons dans un langage natif (Node.js suffit pour la grande majorité des scénarios).
  • Écosystème mature: Une multitude de bibliothèques, modèles et outils d'empaquetage prêts à l'emploi (Electron Builder / Forge, etc.).
  • Adapté aux applications de type outil: Éditeurs, outils de communication, logiciels de productivité, outils de débogage, etc.

La philosophie de conception d'Electron est « Write Once, Run Everywhere ».

Les développeurs n'ont besoin d'écrire qu'une seule base de code pour générer des applications pour Windows, macOS et Linux.

Avantages clés :

  • Développer des applications de bureau à l’aide de piles technologiques Web familières.
  • Pas besoin d’apprendre des langages spécifiques à une plateforme (comme C++, Objective-C, Swift).
  • Expérience de développement et base de code unifiées.
  • Itération et déploiement rapides.

scénarios d'application

Electron convient aux types suivants de développement d’applications de bureau :

  • Outils de développement / Éditeurs: Éditeurs de code, terminaux, débogueurs (par ex., VS Code, Postman).
  • Messagerie instantanée/Réseaux sociaux: Clients de chat (par ex., Discord, Slack).
  • Client de bureau multiplateforme: Lorsque vous devez transformer rapidement un produit Web en version de bureau.
  • Prototypes et outils internes: Outils opérationnels internes de l’entreprise, tableaux de bord de données, consoles d’administration.
  • Applications avec des exigences élevées en matière d’interface utilisateur/d’interaction, mais qui ne sont pas extrêmement sensibles aux performances.。

Scénarios inadaptés : projets extrêmement sensibles au CPU/GPU/mémoire, nécessitant l’expérience native ultime, ou mobile-first (comme le rendu graphique à grande échelle, les jeux à ultra-faible latence).

Ce qu'Electron peut faire

Electron offre de riches capacités de bureau. Voici les principales fonctionnalités qu'il prend en charge :

  • Ouvrir des fenêtres, des menus, la zone de notification, des notifications (notifications système).
  • Lire/écrire des fichiers, travailler avec des bases de données locales (SQLite, LevelDB, etc.).
  • Invoquer des commandes/binaires locaux, démarrer des processus enfants.
  • Utiliser des boîtes de dialogue natives (ouvrir/enregistrer des fichiers), le presse-papiers, le glisser-déposer, des raccourcis globaux.
  • Mettre en œuvre la mise à jour automatique, le rechargement à chaud, l'empaquetage et la distribution.
  • Charger des pages web locales ou distantes, avec prise en charge des technologies Web modernes (WebGL, WebRTC, etc.).
  • Intégrer des modules natifs (C++/Node Native Addons), en se connectant à du matériel ou à des fonctionnalités système.

Concepts clés (essentiels techniques)

Comprendre les concepts clés suivants est essentiel pour maîtriser le développement Electron :

  • Processus principalProcessus principal : point d'entrée d'Electron, responsable de la création de BrowserWindow, de la gestion du cycle de vie de l'application et des API natives. S'exécute en instance unique (Node.js disponible).
  • Processus de rendu: Un BrowserWindow correspond à un processus de rendu qui exécute des pages web (Chromium) et n'accède pas directement à Node (des API restreintes peuvent être exposées via preload).
  • Script de préchargement et contextIsolationPreload : Il est recommandé d'utiliser preload pour injecter des API restreintes dans le renderer, et d'activer contextIsolation pour améliorer la sécurité.
  • IPC（ipcMain / ipcRenderer / contextBridge）IPC : Mécanisme de communication entre les processus principal et de rendu.
  • Outil d'empaquetage: Electron Builder / Electron Forge / electron-packager, etc., utilisés pour générer des packages d'installation et des mises à jour automatiques.
  • Mise à jour automatique: Implémenter des mises à jour automatiques de l'application (nécessite une configuration serveur/publication).

Considérations de sécurité

Electron possède à la fois des capacités de navigateur et de Node.js, la configuration de sécurité est donc cruciale.

Ne jamais activer directement dans le renderernodeIntegration: true, qui est désactivé par défaut pour empêcher que XSS ne conduise à l'exécution arbitraire de commandes système.

  • UtilisationcontextIsolation + preload + contextBridgeExposez des API minimales et contrôlées.
  • Validez strictement / isolez dans un sandbox le contenu externe (URL distantes).
  • Validez strictement les entrées telles que les chemins de fichiers et les commandes shell afin d'éviter l'injection de commandes.
  • Utilisez CSP dès que possible, désactivez eval et évitez les scripts tiers non fiables.

Avantages et limites d'Electron

Cette section fournit une analyse complète d'Electron sous l'angle des avantages et des limites, vous aidant à faire un choix technologique raisonnable.

Principaux avantages

Voici les principaux atouts d'Electron par rapport aux autres approches de développement d'applications de bureau :

1. Simplicité du développement multiplateforme

Avec Electron, les développeurs peuvent utiliser la même base de code pour générer des applications pour Windows, macOS et Linux :

Exemple

// Chemin du fichier : main.js
// Le même code peut s'exécuter sur trois plateformes
const { app, BrowserWindow } = require('electron');

// Créer la fonction de fenêtre principale
function createWindow() {
  const win = new BrowserWindow({
    width: 800,   // Largeur de la fenêtre (pixels)
    height: 600   // Hauteur de la fenêtre (pixels)
  });
  // Charger le fichier HTML local
  win.loadFile('index.html');
}

// Créer une fenêtre une fois l'application prête
app.whenReady().then(createWindow);

Économies de coûts :

  • Pas besoin de maintenir trois bases de code.
  • Les équipes n'ont pas besoin de maîtriser plusieurs technologies de développement multiplateforme.
  • Processus de test et de déploiement unifiés.
  • Itération des fonctionnalités plus rapide.

2. Avantages de la pile technologique Web

  • Écosystème riche: Des millions de paquets disponibles sur npm.
  • Framework mature: Peut utiliser des frameworks frontend modernes tels que React, Vue, Angular.
  • Haute efficacité de développement: Rechargement à chaud, DevTools, outils de débogage riches.
  • Vivier de talents abondant: Immense vivier de développeurs Web, facile à recruter.
  • Développement rapide de prototypes: Tirer parti des composants et bibliothèques Web existants.

3. Prise en charge de fonctionnalités puissantes

  • Capacités complètes de Node.js (système de fichiers, réseau, processus, etc.).
  • Fonctionnalités de bureau natives (menus, notifications, zone de notification, etc.).
  • Mécanisme de mise à jour automatique.
  • Accès au matériel (caméra, périphériques USB, etc.).
  • Capacité de fonctionnement hors ligne.

4. Communauté et écosystème actifs

  • Documentation officielle complète.
  • Un grand nombre de projets open source disponibles pour référence.
  • Riches outils et bibliothèques tiers.
  • Soutien actif de la communauté.

Principales limitations

Comprendre les limites d'Electron aide à déterminer s'il convient à votre projet :

1. Surcharge de performance

Les applications Electron doivent exécuter Chromium et Node.js simultanément, ce qui entraîne une surcharge de performance supplémentaire :

  • Utilisation de la mémoire: Une application Electron vide consomme généralement 50-100MB de mémoire.
  • Utilisation du CPU: Le moteur de rendu et l'exécution de JavaScript sont moins efficaces par rapport aux applications natives.
  • Temps de démarrage: Temps de démarrage plus long par rapport aux applications natives.

Comparaison entre les applications natives et les applications Electron :

Dimension de comparaison Application native Application Electron
Utilisation de la mémoire 10-30MB 80-200MB
Temps de démarrage < 1 seconde 2- secondes

. Taille importante du paquet d'installation

Chaque application Electron a besoin du runtime complet Chromium et Node.js :

  • Windows : ~50-70MB (non compressé).
  • macOS : ~60-80MB (non compressé).
  • Linux : ~55-75MB (non compressé).

Cela signifie que les applications simples n'auront pas d'installateur plus petit que 50MB.

3. Considérations de sécurité

Étant donné qu'Electron possède à la fois des capacités de navigateur et de Node.js, une mauvaise configuration peut créer des risques de sécurité :

  • Les attaques XSS pourraient conduire à l'exploitation de privilèges au niveau système.
  • L'isolation du contexte et le sandboxing doivent être configurés avec soin.
  • Problèmes de sécurité des dépendances tierces.

4. Différences d’expérience native

Bien que des interfaces d’apparence native puissent être simulées, des différences subsistent dans certains domaines :

  • Impossible de reproduire parfaitement les contrôles natifs du système.
  • Certaines fonctions au niveau du système sont difficiles à mettre en œuvre.
  • Les conventions d’interaction propres à chaque plateforme nécessitent un travail supplémentaire.

Suggestion de compromis

Le tableau suivant vous aide à déterminer si Electron est adapté en fonction des exigences de votre projet :

Facteur Poids Description
Efficacité de développement Élevée Electron est le plus efficace si l’équipe possède de l’expérience Web.
Exigences multiplateformes Élevée Lorsqu’une prise en charge multiplateforme est nécessaire, Electron est un choix de premier ordre.
Exigences de performance Moyenne Acceptable pour les applications générales, sauf dans les scénarios de performances extrêmes.
Sensibilité à la taille du paquet Moyenne 50-100MB est acceptable dans les environnements réseau modernes.
Exigences de sécurité Élevée Nécessité de suivre strictement les bonnes pratiques de sécurité

Comparaison avec d'autres outils similaires

Electron n'est pas la seule option. Voici une comparaison des approches courantes de développement d'applications de bureau :

Si vous êtes un développeur frontend/full-stack et que vous devezLivrer rapidement des produits ou des outils Web sur le bureau, tout en utilisant directement les capacités du système., Electron est un choix très productif et à faible barrière à l'entrée.

Mais si vous avez des exigences strictes en matière de taille, de mémoire ou d'expérience native ultime, envisagez Tauri, Flutter ou des frameworks natifs comme alternatives.

  • Tauri

    • Cœur : Rust + WebView intégré au système (WebView2 / WebKit).
    • Avantages : petite taille, faible utilisation de la mémoire, bonne sécurité, adapté aux applications axées sur la légèreté et la performance.
    • Convient pour : les applications de bureau qui veulent utiliser des technologies web mais qui nécessitent une taille extrêmement réduite ou sont sensibles aux performances.
    • Comparaison : Si vous souhaitez réutiliser rapidement l'écosystème Node.js, Electron est plus pratique ; si vous privilégiez une petite taille, choisissez Tauri.

  • NW.js

    • Origine similaire à Electron (également Chromium + Node), mais avec un style d'API différent.
    • La communauté et les outils d'Electron sont plus actifs.

  • Neutralino

    • Extrêmement léger, utilise la WebView du système, avec moins de fonctionnalités qu'Electron.
    • Plus adapté aux outils simples ou aux petites applications de bureau.

  • Flutter Desktop

    • Rendu avec Dart/Flutter, avec de bonnes performances natives et une grande cohérence de l'interface utilisateur.
    • Convient aux projets nécessitant une interface utilisateur/performances multiplateformes unifiées, mais nécessite de réapprendre le framework d'interface utilisateur (pas la technologie web).

  • React Native pour Windows/Mac / .NET MAUI / Qt

    • Une voie de développement de bureau plus native, adaptée aux projets ayant des exigences élevées en matière d'intégration système, de performances et d'expérience native.

Suggestions de sélection :

  • Vous souhaitez transformer rapidement un produit Web en application de bureau, ou l'équipe est principalement frontend Web →Electron。
  • Vous souhaitez une taille plus petite / une utilisation réduite des ressources →Tauri/Neutralino。
  • À la recherche d'une UI native et de hautes performances →Flutter/Native/Qt。

Problèmes courants de performance et de taille

Voici quelques conseils pratiques pour optimiser les performances et la taille des applications Electron :

  • Activer lors de l'empaquetageasarPermet de fusionner les ressources (attention à la compatibilité des modules natifs).
  • Utilisez le chargement différé (lazy loading), réduisez les ressources de rendu initiales et minimisez les ressources lourdes chargées par la fenêtre principale.
  • Évitez les tâches lourdes gourmandes en CPU dans le renderer ; utilisezProcessus enfant / worker / module natif。
  • Utilisationsingle instance, et ajustez l'activation/désactivation de l'accélération matérielle selon la situation.
  • Optimisez les dépendances : réduisez les paquets npm inutiles, évitez les bibliothèques frontend volumineuses (ou utilisez le chargement à la demande).

Exemples de démarrage rapide

Apprenez rapidement la structure de base d'Electron grâce à un projet minimal.

Structure des fichiers du projet :

my-electron-app/
├─ package.json    # 项目配置与依赖
├─ main.js         # 主进程入口
├─ preload.js      # 预加载脚本（安全暴露 API）
└─ index.html      # 渲染进程界面

package.json(Configuration minimale) :

Exemple

{
  "name": "my-electron-app",
  "version": "0.1.0",
"main": "main.js", // Spécifie le fichier d'entrée du processus principal
  "scripts": {
"start": "electron ." // npm start démarre l'application
  },
  "devDependencies": {
"electron": "latest" // Electron comme dépendance de développement
  }
}

main.js(Processus principal) :

Exemple

// Chemin du fichier : main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

// Créer la fenêtre principale
function createWindow() {
  const win = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),  // Chemin du script de préchargement
      contextIsolation: true,   // Activer l'isolation de contexte (recommandé)
      nodeIntegration: false    // Désactiver l'intégration de Node pour améliorer la sécurité
    }
  });
  win.loadFile('index.html');
}

// Créer une fenêtre une fois l'application prête
app.whenReady().then(createWindow);

// macOS : lorsque toutes les fenêtres sont fermées, ne pas quitter l'application (conformément aux conventions macOS).
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

preload.js(Exposition contrôlée de l'API) :

Exemple

// Chemin du fichier : preload.js
const { contextBridge, ipcRenderer } = require('electron');

// Exposer une API sécurisée au processus de rendu via contextBridge.
// Le processus de rendu peut y accéder via window.electronAPI
contextBridge.exposeInMainWorld('electronAPI', {
  // Envoyer un message au processus principal (seuls les canaux de la liste blanche sont autorisés)
  send: (channel, data) => {
    const validChannels = ['ping'];           // Liste blanche : canaux autorisés
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  // Recevoir des messages du processus principal (seuls les canaux de la liste blanche sont autorisés)
  on: (channel, func) => {
    const validChannels = ['pong'];           // Liste blanche : canaux autorisés
    if (validChannels.includes(channel)) {
      // Supprimer le paramètre event, ne transmettre que les données métier au callback
      ipcRenderer.on(channel, (event, ...args) => func(...args));
    }
  }
});

index.html(Interface du processus de rendu) :

Exemple

<!doctype html>
<html>
  <body>
    <h1>Bonjour Electron</h1>
    <button id="ping">Ping du processus principal</button>
    <script>
// Cliquer sur le bouton pour envoyer un message ping au processus principal
      document.getElementById('ping').addEventListener('click', () => {
        window.electronAPI.send('ping', { time: Date.now() });
      });
// Écouter le message pong renvoyé par le processus principal
window.electronAPI.
    </script>
  </body>
</html>

});

Exemple

Dans le processus principal, écoutez l'événement 'ping' :
const { ipcMain } = require('electron');

const { ipcMain } = require('electron');
ipcMain.on(('ping', (event, data) => {, (event, data) => {
  console.log(('Ping reçu, données :', , data););
  event.sender..send(('pong',, { reply: 'ok', ,: received });
});

Exécutez :

# 安装依赖
npm install

# 启动应用
npm start

Empaquetage et distribution

Après le développement, vous avez besoin d'un outil d'empaquetage pour distribuer l'application aux utilisateurs.

Comparaison des outils d'empaquetage courants :

Outils Fonctionnalités Scénarios applicables
Electron Builder Puissant, prend en charge la mise à jour automatique et les installateurs multiplateformes. Projets de production nécessitant une solution de distribution complète
Electron Forge Convivial pour les développeurs, avec des modèles et des processus de build intégrés Démarrage rapide pour les nouveaux projets
electron-packager Produit uniquement des paquets, ne crée pas d'installateur. Exigences d'empaquetage simples

Étapes d'empaquetage courantes :

  1. Configurationpackage.jsonchamp build (ou utiliser la configuration de chaque outil).
  2. Utilisez CI/CD pour compiler pour différentes plateformes (Windows nécessite un empaquetage dans un environnement Windows ou l'utilisation d'un service de compilation croisée).
  3. Déployez un serveur de mise à jour ou utilisez GitHub Releases + electron-updater.

Liste de conseils pratiques et de bonnes pratiques

Les suggestions suivantes proviennent de l'expérience de projets réels et peuvent vous aider à éviter les pièges courants :

  • Au démarrage : utiliser TypeScript + un échafaudage d'empaquetage (Forge/Builder) permet d'économiser sur les coûts de maintenance futurs.
  • Sécurité : appliquéecontextIsolation: true, minimisez l'API exposée au processus de rendu.
  • Architecture : placez la logique métier dans le processus de rendu (UI) ou dans les services backend, et encapsulez les opérations système/de permission via le processus principal.
  • Mises à niveau : utilisez electron-updater pour les mises à jour automatiques, mais faites attention aux stratégies de signature et de publication (macOS nécessite une signature, et Windows nécessite également une signature de code).
  • Tests : testez sur des machines réelles sur plusieurs plateformes (en particulier les permissions de fichiers, les chemins, les variables d'environnement).
  • Ressources : vérifiez régulièrement les versions de Chromium et d'Electron, et faites attention aux correctifs de sécurité (les vulnérabilités de Chromium peuvent affecter votre application).

Quand ne pas utiliser Electron

Les scénarios suivants ne sont pas recommandés pour Electron :

  • Vous avez besoin d'une utilisation de mémoire extrêmement faible ou d'un programme d'installation très petit (par ex., appareils embarqués ou outils minimalistes).
  • Besoin d'une interface utilisateur native ultime et de performances natives (par ex., jeux AAA ou CAO complexe).
  • Si l'équipe n'est pas familière avec les technologies web mais l'est avec le développement natif, un framework natif peut être plus approprié.

Parcours d'apprentissage et ressources recommandés

En suivant la feuille de route ci-dessous étape par étape, vous pouvez maîtriser systématiquement le développement Electron :

  1. Apprenez les bases de Node.js et du frontend (HTML/CSS/JS)/frameworks (React/Vue).
  2. Lisez la documentation officielle d'Electron (Main/Renderer/Preload/IPC/Guide de sécurité).
  3. Créez un exemple minimal (l'exemple ci-dessus) et expérimentez avec IPC, les opérations sur les fichiers et le contrôle de fenêtre.
  4. Apprenez et utilisez les outils d'empaquetage (Electron Builder / Forge).
  5. Lisez des tutoriels sur les bonnes pratiques de sécurité, les mises à jour automatiques et la signature de code.
  6. Référez-vous à des projets Electron open source matures (comme les extraits de code source de VS Code) pour apprendre l'architecture.
autres extensions