Electron
•Download as PPTX, PDF•
0 likes•1,240 views
Slides for a talk on Electron presented at WebMontag Kassel, Kassel, Germany
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Electron
Similar to Electron (20)
More from Jens Siebert
More from Jens Siebert (19)
Recently uploaded
Recently uploaded (20)
Electron
- 1. Cross-Platform Desktop Apps mit Electron Web Montag Kassel, 29. Mai 2017 Jens Siebert (@jens_siebert)
- 2. In the Beginning... Was the Command Line 2008 Google Chrome 2009 Node.js
- 3. …and then there was UI! 2008 Google Chrome 2009 Node.js 2011 node-webkit 2015 Electron 2013 Atom Shell 2014 NW.js
- 4. Architektur Electron Node.js Chromium Content Module node_binding JavaScript Context JavaScript Context
- 5. Prozesse electron . package.json ("main" entry) Main Process (main.js) Renderer Process (index.html) Renderer Process Renderer Process Renderer Process
- 6. package.json { "name": "wmkselectron", "version": "0.0.1", "description": "Electron Demo for WebMontag Kassel", "author": { "name": "Jens Siebert" }, "main": "./app/main.js" }
- 7. Electron installieren npm install electron --save-dev --save-exact
- 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. index.html <html> <head> <title>Electron Demo for WebMontag Kassel</title> </head> <body> <h1>Hello from Electron</h1> </body> </html>
- 11. Node.js-Module im Renderer-Prozess Electron Node.js Chromium Content Module node_binding JavaScript Context JavaScript Context require('<node_module>')
- 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. index.js const os = require('os'); document.onreadystatechange = () => { if (document.readyState === 'complete') { document.getElementById('os-placeholder') .textContent = `OS: ${os.platform()}`; } });
- 14. App mit Node-Module im Renderer-Prozess node_modules.binelectron .
- 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. 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. 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. 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()); }); });
- 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. electron-builder installieren npm install electron-builder --save-dev --save-exact
- 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. 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. 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. Vielen Dank! Jens Siebert (@jens_siebert) Web Montag Kassel, 29. Mai 2017