Fenster überall: Desktopanwendungen mit Angular und Electron

Slides for my talk about Angular and Electron at the BASTA! in Mainz

Transcript

1. Desktop applications with Angular & Electron
2. Fabian Gosebrink
3. https://media.giphy.com/media/VTxmwaCEwSlZm/200.gif
4. @FabianGosebrink
6. Desktop applications with
7. Desktops?
9. Desktops!
12. What is
13. "Electron is a tool for building Cross- Platform Desktop Apps with Javascript, Html and CSS" Anybody I don’t know when
14. http://www.tvmovie.de/assets/2015/10/23/53910-romeo-und-julia-serien-fortsetzung.jpg
21. … and many more
24. > npm install electron -g
25. > electron .
26. package.json
27. package.json { "version": "1.0.0", "name": "first-one", "main": "index.js", "scripts": { "start": "electron ." } }
28. index.js
29. 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'); });
30. index.html
32. Main Process vs Render Process
34. Communication
35. IPC
36. renderer.js
37. index.js
38. Notifications
39. renderer.js
41. Demo
48. index.js
49. index.js let startSendCpuValues = () => { setInterval(() => { cpuValues.getCPUUsage((percentage) => { if (mainWindow) { mainWindow.webContents .send('newCpuValue', (percentage * 100).toFixed(2)); } }); }, 1000); }
50. > npm install ngx-electron
51. service.ts
52. “Cross-Platform? What about variation points?"
53. Dependency Injection
60. Tr ay Icon
61. index.js
63. > npm install electron-packager -g
64. > electron-packager .temp/desktop
65. > electron-packager .temp/desktop --platform=linux, win32
66. Demo
67. One Code every platform
68. One Codebase every platform
70. https://github.com/FabianGosebrink/Basta-2017 https://offering.solutions https://swissangular.com @FabianGosebrink
71. 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