Fenster überall: Desktopanwendungen mit Angular und Electron

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