Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Fenster überall: Desktopanwendungen mit Angular und Electron
Fabian Gosebrink
September 28, 2017
Technology
0
72
Fenster überall: Desktopanwendungen mit Angular und Electron
Slides for my talk about Angular and Electron at the BASTA! in Mainz
Fabian Gosebrink
September 28, 2017
Tweet
Share
More Decks by Fabian Gosebrink
See All by Fabian Gosebrink
fabiangosebrink
0
38
fabiangosebrink
0
68
fabiangosebrink
1
95
fabiangosebrink
0
33
fabiangosebrink
0
110
fabiangosebrink
0
87
fabiangosebrink
0
220
fabiangosebrink
0
36
fabiangosebrink
1
91
Other Decks in Technology
See All in Technology
cmwatanabeseigo
0
320
hacker2202
0
750
sylph01
0
170
hirosys
0
110
yokatsuki
1
190
soachr
1
150
ocise
1
1.3k
layerx
1
730
kurochan
0
540
noir_neo
0
120
sat
1
970
nihonbuson
2
1.5k
Featured
See All Featured
afnizarnur
176
14k
paulrobertlloyd
71
3.6k
tmm1
61
8.3k
mza
80
4.1k
samanthasiow
56
6.3k
sachag
446
36k
denniskardys
220
120k
phodgson
87
3.9k
lara
590
61k
bkeepers
52
4.1k
maltzj
500
36k
rasmusluckow
318
18k
Transcript
Desktop applications with Angular & Electron
Fabian Gosebrink
https://media.giphy.com/media/VTxmwaCEwSlZm/200.gif
@FabianGosebrink
None
Desktop applications with
Desktops?
None
Desktops!
None
None
What is
"Electron is a tool for building Cross- Platform Desktop Apps
with Javascript, Html and CSS" Anybody I don’t know when
http://www.tvmovie.de/assets/2015/10/23/53910-romeo-und-julia-serien-fortsetzung.jpg
None
None
None
None
None
None
… and many more
None
None
> npm install electron -g
> electron .
package.json
package.json { "version": "1.0.0", "name": "first-one", "main": "index.js", "scripts": {
"start": "electron ." } }
index.js
index.js const { app, BrowserWindow } = require('electron'); let mainWindow
= null; app.on('ready', () => { mainWindow = new BrowserWindow({ width: 1024, height: 768 }); mainWindow.loadURL('file://' + __dirname + '/index.html'); });
index.html
None
Main Process vs Render Process
None
Communication
IPC
renderer.js
index.js
Notifications
renderer.js
None
Demo
None
None
None
None
None
None
index.js
index.js let startSendCpuValues = () => { setInterval(() => {
cpuValues.getCPUUsage((percentage) => { if (mainWindow) { mainWindow.webContents .send('newCpuValue', (percentage * 100).toFixed(2)); } }); }, 1000); }
> npm install ngx-electron
service.ts
“Cross-Platform? What about variation points?"
Dependency Injection
None
None
None
None
None
None
Tr ay Icon
index.js
None
> npm install electron-packager -g
> electron-packager .temp/desktop
> electron-packager .temp/desktop --platform=linux, win32
Demo
One Code every platform
One Codebase every platform
None
https://github.com/FabianGosebrink/Basta-2017 https://offering.solutions https://swissangular.com @FabianGosebrink
https://speakerdeck.com/zeke/electron-universe https://electron.atom.io/ https://electron.atom.io/docs/tutorial/quick-start/ https://github.com/maximegris/angular-electron/blob/master/src/app/providers/electron.service.ts https://github.com/sindresorhus/awesome-electron