Fenster überall: Desktopanwendungen mit Angular und Electron

Transcript

1. 1.

   Desktop applications with Angular & Electron

2. 2.

   Fabian Gosebrink

3. 3.

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

4. 4.

   @FabianGosebrink

5. 5.

   None
6. 6.

   Desktop applications with

7. 7.

   Desktops?

8. 8.

   None
9. 9.

   Desktops!

10. 10.

    None
11. 11.

    None
12. 12.

    What is

13. 13.

    "Electron is a tool for building Cross- Platform Desktop Apps

    with Javascript, Html and CSS" Anybody I don’t know when
14. 14.

    http://www.tvmovie.de/assets/2015/10/23/53910-romeo-und-julia-serien-fortsetzung.jpg

15. 15.

    None
16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    None
20. 20.

    None
21. 21.

    … and many more

22. 22.

    None
23. 23.

    None
24. 24.

    > npm install electron -g

25. 25.

    > electron .

26. 26.

    package.json

27. 27.

    package.json { "version": "1.0.0", "name": "first-one", "main": "index.js", "scripts": {

    "start": "electron ." } }
28. 28.

    index.js

29. 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. 30.

    index.html

31. 31.

    None
32. 32.

    Main Process vs Render Process

33. 33.

    None
34. 34.

    Communication

35. 35.

    IPC

36. 36.

    renderer.js

37. 37.

    index.js

38. 38.

    Notifications

39. 39.

    renderer.js

40. 40.

    None
41. 41.

    Demo

42. 42.

    None
43. 43.

    None
44. 44.

    None
45. 45.

    None
46. 46.

    None
47. 47.

    None
48. 48.

    index.js

49. 49.

    index.js let startSendCpuValues = () => { setInterval(() => {

    cpuValues.getCPUUsage((percentage) => { if (mainWindow) { mainWindow.webContents .send('newCpuValue', (percentage * 100).toFixed(2)); } }); }, 1000); }
50. 50.

    > npm install ngx-electron

51. 51.

    service.ts

52. 52.

    “Cross-Platform? What about variation points?"

53. 53.

    Dependency Injection

54. 54.

    None
55. 55.

    None
56. 56.

    None
57. 57.

    None
58. 58.

    None
59. 59.

    None
60. 60.

    Tr ay Icon

61. 61.

    index.js

62. 62.

    None
63. 63.

    > npm install electron-packager -g

64. 64.

    > electron-packager .temp/desktop

65. 65.

    > electron-packager .temp/desktop --platform=linux, win32

66. 66.

    Demo

67. 67.

    One Code every platform

68. 68.

    One Codebase every platform

69. 69.

    None
70. 70.

    https://github.com/FabianGosebrink/Basta-2017 https://offering.solutions https://swissangular.com @FabianGosebrink

71. 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