Développement d’applications web front-end avec JavaScript - Présentation des frameworks Open Source
- Durée
- Durée :5 jours
- Niveau
- Niveau :Intermédiaire
- Certification
- Certification :Non
3050€ HT
Prochaine session :
Electron : Développer des applications de bureau multi-plateformes avec le framework Electron
Découvrir le développement d'ElectronDescription de la formation Electron
Depuis l'arrivée de Node.js en 2009, de nombreuses technologies ont émergé en vue d'élargir le déploiement d’applications JavaScript à de multiples plate-formes (web, serveur, mobile, IoT, …).
Electron en fait partie. Il s’agit d’un framework permettant la création d’applications de bureau multi-plateformes (Windows, MacOS, Linux) via des langages de programmation web (HTML, CSS, JS) et des APIs spécifiques (node, electron).
Proposer un large panel de plate-formes d’exploitation pour une solution est aujourd’hui devenu un enjeu majeur du développement logiciel. Electron répond à ce besoin en permettant aux développeurs JavaScript d’accéder à l’univers desktop, comme le font tous les autres langages système (C, Java, …).
Programme de la formation
Objectif opérationnel :
Savoir développer des applications de bureau à l’aide de technologies web (HTML, CSS, JS), du framework Electron et de ses APIs.
Objectifs pédagogiques:
Concrètement, à l'issue de cette formation Electron, vous serez en mesure de :
- Créer une application de bureau grâce à Electron
- Avoir une connaissance panoramique des APIs système proposées
- Créer, packager, déployer et mettre à jour une application
- Utiliser des outils pour vous faire gagner en productivité
Présentation d'Electron
ContexteProblématiqueSolutionConcepts (Electron)APIs (Electron & Node)Processus principal
Processus de rendu
Communication inter-processus
Arborescence d'un projet (main.js, package.json index.html)
Outils pour Electron
Electron FiddleCLI (electron-forge)
UI toolkit : PhotonKit
Processus principal
Modules app & BrowserWindow & dialog
Événements principaux (ready, window-all-closed, activate)
Processus de rendu
Intégration nodeIsolation de contexteFichier de préchargement & module contextBridgeTravaux Pratiques (Fil rouge - Création d'un CRM)Modules avec liste (clients, produits)Communication inter-processus (IPC)
Modules ipcRenderer & ipcMainTravaux Pratiques (Fil rouge - Création d'un CRM)Gestion des modulesOuverture de fenêtres
Méthode CRUD (Create, Read, Update, Delete)
Fichiers CSV
Gestion des menus
Menu d'application (template, roles, type, module Menu)Menu contextuel (module MenuItem)Travaux Pratiques (Fil rouge - Création d'un CRM)CRUD via menus
Gestion des raccourcis
Raccourcis locaux (Accelerators)Raccourcis globauxTravaux Pratiques (Fil rouge - Création d'un CRM)CRUD via raccourcis
Interactions avec le système
Personnaliser la barre des tâches (Windows) / Dock (MacOS)Barre de notification (system tray)
Glisser déposer (drag & drop)
Fonctionnalités système (module shell)Travaux Pratiques (Fil rouge - Création d’une CRM)CRUD via barres des tâches (ou Dock)
CRUD via barre de notification
Export des listes via glisser-déposer
Ouverture des fichiers de liste avec application CSV par défaut
Déploiement et mises à jour
Distribution de l'application (packaging & GitHub release)Mise à jour de l'application (update-electron-app, module autoUpdater)Travaux Pratiques (Fil rouge - Création d’une CRM)Autoupdate GitHub release via update-electron-app
Pour aller plus loin
Presse papierMode nuit
Notifications
Détection de la connexion (online/offline)
Documents récents
Barre de progression
Rendu hors d'écran (capture)
Intégrer du contenu web (BrowserView)
Tests (devtools, selenium, WebDriver)
Public cible :
Ce cours Electron cible principalement les profils développeurs système et web.
Prérequis :
Pour suivre cette formation Electron, il est important de connaître HTML, CSS, JavaScript (ES2015 est un plus) et Node.js (les APIs de base) / npm.
J'évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Cette formation propose une alternance de pratique et de théorie pour une meilleure assimilation des connaissances.
Date de mise à jour du programme : 23/02/2026