Downloaded 25 times
![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');
}
});](https://image.slidesharecdn.com/electronwebmontagks-170528173316/85/Electron-17-320.jpg)
![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());
});
});](https://image.slidesharecdn.com/electronwebmontagks-170528173316/85/Electron-18-320.jpg)
![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
[…]](https://image.slidesharecdn.com/electronwebmontagks-170528173316/85/Electron-20-320.jpg)
Uploaded byJens Siebert
Electron
This document discusses building cross-platform desktop applications using Electron. It describes Electron's architecture which uses Node.js and Chromium to build desktop apps with HTML, CSS, and JavaScript. It provides examples of creating an Electron app, using Node modules in the renderer process, and implementing inter-process communication. It also discusses distributing Electron apps using electron-builder to generate installers and packages for different platforms.
More Related Content
![20260201 [FOSDEM] gomodjail - library sandboxing for Go modules.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/20260201fosdemgomodjail-librarysandboxingforgomodules-260201225659-76609ec4-thumbnail.jpg?width=640&height=640&fit=bounds)
Electron
- 1. Cross-Platform Desktop Apps mit Electron WebMontag 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 therewas UI! 2008 Google Chrome 2009 Node.js 2011 node-webkit 2015 Electron 2013 Atom Shell 2014 NW.js
- 4.
- 5. Prozesse electron . package.json ("main" entry) MainProcess (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 installelectron --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 forWebMontag Kassel</title> </head> <body> <h1>Hello from Electron</h1> </body> </html>
- 10.
- 11. Node.js-Module im Renderer-Prozess Electron Node.js ChromiumContent Module node_binding JavaScript Context JavaScript Context require('<node_module>')
- 12. index.html <html> <head> <title>Electron Demo forWebMontag 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-Moduleim 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 forWebMontag 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()); }); });
- 19.
- 20. Software-Distribution mit electron-builder ElectronApp 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 installelectron-builder --save-dev --save-exact
- 22.
- 23.
- 24. …und es gibtnoch 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) ManningPublications (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