SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
Electron, une
alternative
intéressante?
De quoi on va parler
● Qui suis-je ?
● Application native comparée à Application web
● Mais moi je veux le beurre, l’argent du beurre...
● Et Electron dans tout ça ?
● Les principaux principes d’Electron
Je pense donc je suis…
● Guide technique (technical lead)
● Recherchant constamment l'innovation technique facilitant la vie
● Passionné par le développement
● Avec en prime le sport et les voyages
www.pressinnov.com
Desktop app - Avantages
● Mode hors ligne
● Expérience utilisateur plus aboutie
● Performance
● Hébergement
Web app - Avantages
● Pas d’installation hormis le navigateur
● Mise à jour transparente de l’application
● Main d’œuvre plus facile à trouver
Desktop app - Inconvénients
● Multiplateforme
● Mise à jour des applicatifs
● Compétences techniques plus dur à trouver
Web app - Inconvénients
● Gestion des différents navigateurs
● Expérience utilisateur limitée
● Mode hors ligne
“Et si je pouvais avoir une
application desktop avec les
technologies web”
Un solution hybride ça existe
● Appjs => déprécié
● NW.js (anciennement node webkit)
● Electron (anciennement atom shell)
Electron, what?
● Technologies toile d’araignée (Web
technologies)
● Plateforme croisée (Cross Platform)
● Mise à jour automatique (Automatic updates)
● Installateur Windows (Windows installers)
● Node js / Chromium
“Electron is a framework for
creating native applications with
web technologies like JavaScript,
HTML, and CSS.”
Mais encore
● Intégration des principaux framework js
○ React
○ Angular
○ VueJS
● La communauté
● La documentation
● Open source
Pourquoi ?
● Sans rendu graphique (Headless) => IC
● Pure ES6 / TypeScript, Webrtc, Websocket…
● Offline first servi par file://
● Support d’un navigateur unique
● Montée en compétence sur l’api faible
● Large choix d’application basé sur Electron
(github, slack, visual source code, atom, …)
Fonctionnalitées majeurs
● Barre des tâches (System tray)
● Menu bar
● Envoyer des notifications au système
● Utiliser des packages node
Principes
processus maître
processus de rendu
processus de rendu
processus de rendu
processus de rendu
node js
Techniquement
● Installation via npm ou yarn
○ npm install electron --save-dev --save-exact
○ yarn add electron --dev --exact
● Création du point d’entrée
..."main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "1.7.9"
}...
package.json
...
mainWindow = new BrowserWindow({width: 800,
height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
...
main.js
Attends, comment les processus discutent ?
● Utilisation du module Remote pour dialoguer entre le
processus du rendu et le processus maître
● Module IPCRendered et IPCMain
● Storage API / IndexedDB
Construction
● yarn / npm electron-builder
● Une construction (build) / plateforme
● Plateforme indépendant =>docker
End
Des Questions ?
courriel: florent.moignard@pressinnov.com

Contenu connexe

Tendances

Javascript in a continuous integration environment
Javascript in a continuous integration environmentJavascript in a continuous integration environment
Javascript in a continuous integration environment
Frederic Dewinne
 

Tendances (8)

Javascript & tools
Javascript & toolsJavascript & tools
Javascript & tools
 
Javascript in a continuous integration environment
Javascript in a continuous integration environmentJavascript in a continuous integration environment
Javascript in a continuous integration environment
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
Comment s'enregistrer pour réaliser un cours en vidéo ?
Comment s'enregistrer pour réaliser un cours en vidéo ?Comment s'enregistrer pour réaliser un cours en vidéo ?
Comment s'enregistrer pour réaliser un cours en vidéo ?
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
 

Similaire à Electron, une alternative intéressante ? par Florent MOIGNARD

Java vs .Net
Java vs .NetJava vs .Net
Java vs .Net
Algeria JUG
 
Php sous Windows - webcamps Paris
Php sous Windows - webcamps ParisPhp sous Windows - webcamps Paris
Php sous Windows - webcamps Paris
LeTesteur
 

Similaire à Electron, une alternative intéressante ? par Florent MOIGNARD (20)

Ionic
IonicIonic
Ionic
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
.NET Microframework: du code, de l’électronique, de la robotique
.NET Microframework: du code, de l’électronique, de la robotique.NET Microframework: du code, de l’électronique, de la robotique
.NET Microframework: du code, de l’électronique, de la robotique
 
Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
 
Java vs .Net
Java vs .NetJava vs .Net
Java vs .Net
 
alphorm.com - Formation Windows 8.1 (70-687)
alphorm.com - Formation Windows 8.1 (70-687)alphorm.com - Formation Windows 8.1 (70-687)
alphorm.com - Formation Windows 8.1 (70-687)
 
Java vs .Net
Java vs .NetJava vs .Net
Java vs .Net
 
L'univers Android
L'univers AndroidL'univers Android
L'univers Android
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilitéNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
 
Paris Web 2015 - Atelier desendettement javascript
Paris Web 2015 - Atelier desendettement javascriptParis Web 2015 - Atelier desendettement javascript
Paris Web 2015 - Atelier desendettement javascript
 
"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours
 
Réalité virtuelle + Open source = <3
Réalité virtuelle + Open source = <3Réalité virtuelle + Open source = <3
Réalité virtuelle + Open source = <3
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Php sous Windows - webcamps Paris
Php sous Windows - webcamps ParisPhp sous Windows - webcamps Paris
Php sous Windows - webcamps Paris
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Firefox OS de la théorie à la pratique - OSDC
Firefox OS de la théorie à la pratique - OSDCFirefox OS de la théorie à la pratique - OSDC
Firefox OS de la théorie à la pratique - OSDC
 

Plus de La Cuisine du Web

Plus de La Cuisine du Web (20)

Kit de survie du marketeur au bois dormant – Digitalisation du marketing par ...
Kit de survie du marketeur au bois dormant – Digitalisation du marketing par ...Kit de survie du marketeur au bois dormant – Digitalisation du marketing par ...
Kit de survie du marketeur au bois dormant – Digitalisation du marketing par ...
 
Objets connectés : adapter la technologie aux usages, et pas l’inverse ! par ...
Objets connectés : adapter la technologie aux usages, et pas l’inverse ! par ...Objets connectés : adapter la technologie aux usages, et pas l’inverse ! par ...
Objets connectés : adapter la technologie aux usages, et pas l’inverse ! par ...
 
Manager l’innovation : est-ce contradictoire, pertinent, nécessaire ?… par Ma...
Manager l’innovation : est-ce contradictoire, pertinent, nécessaire ?… par Ma...Manager l’innovation : est-ce contradictoire, pertinent, nécessaire ?… par Ma...
Manager l’innovation : est-ce contradictoire, pertinent, nécessaire ?… par Ma...
 
Tour d’horizon de l’écosystème React-ien par Guillaume BESSON
Tour d’horizon de l’écosystème React-ien par Guillaume BESSONTour d’horizon de l’écosystème React-ien par Guillaume BESSON
Tour d’horizon de l’écosystème React-ien par Guillaume BESSON
 
Stream processing en mémoire avec Hazelcast Jet par Claire VILLARD
Stream processing en mémoire avec Hazelcast Jet par Claire VILLARDStream processing en mémoire avec Hazelcast Jet par Claire VILLARD
Stream processing en mémoire avec Hazelcast Jet par Claire VILLARD
 
Programming is Fun par Francis BELLANGER
Programming is Fun par Francis BELLANGERProgramming is Fun par Francis BELLANGER
Programming is Fun par Francis BELLANGER
 
La démarche communautaire au coeur de la croissance de votre entreprise par H...
La démarche communautaire au coeur de la croissance de votre entreprise par H...La démarche communautaire au coeur de la croissance de votre entreprise par H...
La démarche communautaire au coeur de la croissance de votre entreprise par H...
 
Qui est ton client ? par Audrey JULIENNE
Qui est ton client ? par Audrey JULIENNEQui est ton client ? par Audrey JULIENNE
Qui est ton client ? par Audrey JULIENNE
 
Cloaking is not a crime par Patrick VALIBUS
Cloaking is not a crime par Patrick VALIBUSCloaking is not a crime par Patrick VALIBUS
Cloaking is not a crime par Patrick VALIBUS
 
CSS orienté objet par Lenny ROUANET
CSS orienté objet par Lenny ROUANETCSS orienté objet par Lenny ROUANET
CSS orienté objet par Lenny ROUANET
 
Automatiser la mise en production d’un site web par Nicolas KANDEL
Automatiser la mise en production d’un site web par Nicolas KANDELAutomatiser la mise en production d’un site web par Nicolas KANDEL
Automatiser la mise en production d’un site web par Nicolas KANDEL
 
Design Sprints : Créons un monde meilleur ! par Jelto VON SCHUCKMANN
Design Sprints : Créons un monde meilleur ! par Jelto VON SCHUCKMANNDesign Sprints : Créons un monde meilleur ! par Jelto VON SCHUCKMANN
Design Sprints : Créons un monde meilleur ! par Jelto VON SCHUCKMANN
 
Fontes variables, la matrice typographique par Malou VERLOMME
Fontes variables, la matrice typographique par Malou VERLOMMEFontes variables, la matrice typographique par Malou VERLOMME
Fontes variables, la matrice typographique par Malou VERLOMME
 
Le design agile : 6 techniques pour designer de façon plus agile par Matthieu...
Le design agile : 6 techniques pour designer de façon plus agile par Matthieu...Le design agile : 6 techniques pour designer de façon plus agile par Matthieu...
Le design agile : 6 techniques pour designer de façon plus agile par Matthieu...
 
Réalité virtuelle et augmentée, ces nouvelles technologies au service de la f...
Réalité virtuelle et augmentée, ces nouvelles technologies au service de la f...Réalité virtuelle et augmentée, ces nouvelles technologies au service de la f...
Réalité virtuelle et augmentée, ces nouvelles technologies au service de la f...
 
Audio procédural : la révolution WebAssembly ! par Yann ORLAREY
Audio procédural : la révolution WebAssembly ! par Yann ORLAREYAudio procédural : la révolution WebAssembly ! par Yann ORLAREY
Audio procédural : la révolution WebAssembly ! par Yann ORLAREY
 
A la rencontre de Kafka, le log distribué par Florian GARCIA
A la rencontre de Kafka, le log distribué par Florian GARCIAA la rencontre de Kafka, le log distribué par Florian GARCIA
A la rencontre de Kafka, le log distribué par Florian GARCIA
 
Voyage au centre du cerveau humain ou comment manipuler des données binaires ...
Voyage au centre du cerveau humain ou comment manipuler des données binaires ...Voyage au centre du cerveau humain ou comment manipuler des données binaires ...
Voyage au centre du cerveau humain ou comment manipuler des données binaires ...
 
Ciel mon smartphone ! par Damien GOSSET
Ciel mon smartphone ! par Damien GOSSETCiel mon smartphone ! par Damien GOSSET
Ciel mon smartphone ! par Damien GOSSET
 
Data Creativity, comment interpréter les tendances consommateurs grâce au Dat...
Data Creativity, comment interpréter les tendances consommateurs grâce au Dat...Data Creativity, comment interpréter les tendances consommateurs grâce au Dat...
Data Creativity, comment interpréter les tendances consommateurs grâce au Dat...
 

Electron, une alternative intéressante ? par Florent MOIGNARD

  • 2. De quoi on va parler ● Qui suis-je ? ● Application native comparée à Application web ● Mais moi je veux le beurre, l’argent du beurre... ● Et Electron dans tout ça ? ● Les principaux principes d’Electron
  • 3. Je pense donc je suis… ● Guide technique (technical lead) ● Recherchant constamment l'innovation technique facilitant la vie ● Passionné par le développement ● Avec en prime le sport et les voyages
  • 5. Desktop app - Avantages ● Mode hors ligne ● Expérience utilisateur plus aboutie ● Performance ● Hébergement Web app - Avantages ● Pas d’installation hormis le navigateur ● Mise à jour transparente de l’application ● Main d’œuvre plus facile à trouver
  • 6. Desktop app - Inconvénients ● Multiplateforme ● Mise à jour des applicatifs ● Compétences techniques plus dur à trouver Web app - Inconvénients ● Gestion des différents navigateurs ● Expérience utilisateur limitée ● Mode hors ligne
  • 7. “Et si je pouvais avoir une application desktop avec les technologies web”
  • 8. Un solution hybride ça existe ● Appjs => déprécié ● NW.js (anciennement node webkit) ● Electron (anciennement atom shell)
  • 9. Electron, what? ● Technologies toile d’araignée (Web technologies) ● Plateforme croisée (Cross Platform) ● Mise à jour automatique (Automatic updates) ● Installateur Windows (Windows installers) ● Node js / Chromium “Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.”
  • 10. Mais encore ● Intégration des principaux framework js ○ React ○ Angular ○ VueJS ● La communauté ● La documentation ● Open source
  • 11.
  • 12. Pourquoi ? ● Sans rendu graphique (Headless) => IC ● Pure ES6 / TypeScript, Webrtc, Websocket… ● Offline first servi par file:// ● Support d’un navigateur unique ● Montée en compétence sur l’api faible ● Large choix d’application basé sur Electron (github, slack, visual source code, atom, …)
  • 13. Fonctionnalitées majeurs ● Barre des tâches (System tray) ● Menu bar ● Envoyer des notifications au système ● Utiliser des packages node
  • 14. Principes processus maître processus de rendu processus de rendu processus de rendu processus de rendu node js
  • 15. Techniquement ● Installation via npm ou yarn ○ npm install electron --save-dev --save-exact ○ yarn add electron --dev --exact ● Création du point d’entrée ..."main": "main.js", "scripts": { "start": "electron ." }, "devDependencies": { "electron": "1.7.9" }... package.json ... mainWindow = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })); ... main.js
  • 16. Attends, comment les processus discutent ? ● Utilisation du module Remote pour dialoguer entre le processus du rendu et le processus maître ● Module IPCRendered et IPCMain ● Storage API / IndexedDB
  • 17. Construction ● yarn / npm electron-builder ● Une construction (build) / plateforme ● Plateforme indépendant =>docker
  • 18.
  • 19. End Des Questions ? courriel: florent.moignard@pressinnov.com