Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Cross-Platform Desktop Apps
mit
Electron
Web Montag Kassel, 29. Mai 2017
Jens Siebert (@jens_siebert)
In the Beginning... Was the Command Line
2008
Google
Chrome
2009
Node.js
…and then there was UI!
2008
Google
Chrome
2009
Node.js
2011
node-webkit
2015
Electron
2013
Atom Shell
2014
NW.js
Architektur
Electron
Node.js
Chromium Content
Module
node_binding
JavaScript Context JavaScript Context
Prozesse
electron .
package.json
("main" entry)
Main Process
(main.js)
Renderer Process
(index.html)
Renderer Process
Rend...
package.json
{
"name": "wmkselectron",
"version": "0.0.1",
"description": "Electron Demo for WebMontag Kassel",
"author": ...
Electron installieren
npm install electron --save-dev --save-exact
main.js
const {app, BrowserWindow} = require('electron');
let mainWindow = null;
app.on('ready', () => {
mainWindow = new ...
index.html
<html>
<head>
<title>Electron Demo for WebMontag Kassel</title>
</head>
<body>
<h1>Hello from Electron</h1>
</b...
Erste Electron-App
node_modules.binelectron .
Node.js-Module im Renderer-Prozess
Electron
Node.js
Chromium Content
Module
node_binding
JavaScript Context JavaScript Con...
index.html
<html>
<head>
<title>Electron Demo for WebMontag Kassel</title>
<script type="text/javascript" src="index.js"><...
index.js
const os = require('os');
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
documen...
App mit Node-Module im Renderer-Prozess
node_modules.binelectron .
Inter-Prozess-Kommunikation
Main Process
(ipcMain)
Renderer Process
(ipcRenderer)
ipcRenderer.send(data)
ipcMain.on(event,...
index.html
<html>
<head>
<title>Electron Demo for WebMontag Kassel</title>
<script type="text/javascript" src="index.js"><...
index.js
const os = require('os');
const {ipcRenderer} = require('electron');
document.onreadystatechange = () => {
if (do...
main.js
const {app, BrowserWindow, ipcMain} = require('electron');
let mainWindow = null;
app.on('ready', () => {
[…]
ipcM...
App mit Inter-Prozess-Kommunikation
node_modules.binelectron .
Software-Distribution mit electron-builder
Electron App
package.json
main.js
index.html
index.js
[…]
(Web)-Installer (NSIS...
electron-builder installieren
npm install electron-builder --save-dev --save-exact
„build“-Verzeichnis anlegen
Paket erzeugen
node_modules.binbuild
…und es gibt noch viel mehr!
• Inter-Prozess-Kommunikation mit dem remote-Modul
• Debugging (Main- und Renderer-Prozess)
•...
Weitere Infos
• Electron: https://electron.atom.io/
• NW.js: https://nwjs.io/
• Electron Quick Start: https://electron.ato...
Literatur
Bilder:
Manning Publications (https://images.manning.com/720/960/resize/book/e/e2edd81-e207-4c40-99d2-772cbe73d1...
Vielen Dank!
Jens Siebert (@jens_siebert)
Web Montag Kassel, 29. Mai 2017
Próxima SlideShare
Cargando en…5
×

Electron

458 visualizaciones

Publicado el

Slides for a talk on Electron presented at WebMontag Kassel, Kassel, Germany

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Electron

  1. 1. Cross-Platform Desktop Apps mit Electron Web Montag Kassel, 29. Mai 2017 Jens Siebert (@jens_siebert)
  2. 2. In the Beginning... Was the Command Line 2008 Google Chrome 2009 Node.js
  3. 3. …and then there was UI! 2008 Google Chrome 2009 Node.js 2011 node-webkit 2015 Electron 2013 Atom Shell 2014 NW.js
  4. 4. Architektur Electron Node.js Chromium Content Module node_binding JavaScript Context JavaScript Context
  5. 5. Prozesse electron . package.json ("main" entry) Main Process (main.js) Renderer Process (index.html) Renderer Process Renderer Process Renderer Process
  6. 6. package.json { "name": "wmkselectron", "version": "0.0.1", "description": "Electron Demo for WebMontag Kassel", "author": { "name": "Jens Siebert" }, "main": "./app/main.js" }
  7. 7. Electron installieren npm install electron --save-dev --save-exact
  8. 8. main.js const {app, BrowserWindow} = require('electron'); let mainWindow = null; app.on('ready', () => { mainWindow = new BrowserWindow(); mainWindow.webContents.loadURL(`file://${__dirname}/index.html`); mainWindow.on('closed', () => { mainWindow = null; app.quit(); }); });
  9. 9. index.html <html> <head> <title>Electron Demo for WebMontag Kassel</title> </head> <body> <h1>Hello from Electron</h1> </body> </html>
  10. 10. Erste Electron-App node_modules.binelectron .
  11. 11. Node.js-Module im Renderer-Prozess Electron Node.js Chromium Content Module node_binding JavaScript Context JavaScript Context require('<node_module>')
  12. 12. index.html <html> <head> <title>Electron Demo for WebMontag Kassel</title> <script type="text/javascript" src="index.js"></script> </head> <body> <h1>Hello from Electron</h1> <div id="os-placeholder"></div> </body> </html>
  13. 13. index.js const os = require('os'); document.onreadystatechange = () => { if (document.readyState === 'complete') { document.getElementById('os-placeholder') .textContent = `OS: ${os.platform()}`; } });
  14. 14. App mit Node-Module im Renderer-Prozess node_modules.binelectron .
  15. 15. Inter-Prozess-Kommunikation Main Process (ipcMain) Renderer Process (ipcRenderer) ipcRenderer.send(data) ipcMain.on(event, data) event.sender.send(data) ipcRenderer.on(event, data)
  16. 16. index.html <html> <head> <title>Electron Demo for WebMontag Kassel</title> <script type="text/javascript" src="index.js"></script> </head> <body> <h1>Hello from Electron</h1> <div id="os-placeholder"></div> <div id="version-placeholder"></div> </body> </html>
  17. 17. index.js const os = require('os'); const {ipcRenderer} = require('electron'); document.onreadystatechange = () => { if (document.readyState === 'complete') { […] ipcRenderer.on('version', (event, data) => { document.getElementById('version-placeholder') .textContent = `App-Version: ${data}`; }); ipcRenderer.send('get-version'); } });
  18. 18. main.js const {app, BrowserWindow, ipcMain} = require('electron'); let mainWindow = null; app.on('ready', () => { […] ipcMain.on('get-version', (event) => { event.sender.send('version', app.getVersion()); }); });
  19. 19. App mit Inter-Prozess-Kommunikation node_modules.binelectron .
  20. 20. Software-Distribution mit electron-builder Electron App package.json main.js index.html index.js […] (Web)-Installer (NSIS) Portable Package AppX-Package .dmg .pkg .mas .deb .rpm […]
  21. 21. electron-builder installieren npm install electron-builder --save-dev --save-exact
  22. 22. „build“-Verzeichnis anlegen
  23. 23. Paket erzeugen node_modules.binbuild
  24. 24. …und es gibt noch viel mehr! • Inter-Prozess-Kommunikation mit dem remote-Modul • Debugging (Main- und Renderer-Prozess) • Integration in Desktop Environments (Tray-Apps, Notifications, …) • Testing (Headless, …) • etc…
  25. 25. Weitere Infos • Electron: https://electron.atom.io/ • NW.js: https://nwjs.io/ • Electron Quick Start: https://electron.atom.io/docs/tutorial/quick-start/ • electron-builder: https://github.com/electron-userland/electron-builder/ • Code: https://bitbucket.org/jenssiebert/wmkselectron • Slides: https://de.slideshare.net/JensSiebert1/electron-76424452/
  26. 26. Literatur Bilder: Manning Publications (https://images.manning.com/720/960/resize/book/e/e2edd81-e207-4c40-99d2-772cbe73d187/Kinney-Electron-MEAP-HI.png) Manning Publications (https://images.manning.com/720/960/resize/book/7/d385764-cf56-4a45-ac2e-59e032425772/Jensen-CPDA-HI.png)
  27. 27. Vielen Dank! Jens Siebert (@jens_siebert) Web Montag Kassel, 29. Mai 2017

×