Fenster überall: Desktopanwendungen mit Angular und Electron

Fenster überall: Desktopanwendungen mit Angular und Electron

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

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

September 28, 2017
Tweet

Transcript

  1. Desktop applications with Angular & Electron

  2. Fabian Gosebrink

  3. https://media.giphy.com/media/VTxmwaCEwSlZm/200.gif

  4. @FabianGosebrink

  5. None
  6. Desktop applications with

  7. Desktops?

  8. None
  9. Desktops!

  10. None
  11. None
  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

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. … and many more

  22. None
  23. None
  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

  31. None
  32. Main Process vs Render Process

  33. None
  34. Communication

  35. IPC

  36. renderer.js

  37. index.js

  38. Notifications

  39. renderer.js

  40. None
  41. Demo

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  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

  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. Tr ay Icon

  61. index.js

  62. None
  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

  69. None
  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