Cross Platform applications with Angular, Electron & Cordova

Cross Platform applications with Angular, Electron & Cordova

Slides for my talk at the BASTA! Spring 2018 about cross platform applications with Angular, Electron & Cordova

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

February 20, 2018
Tweet

Transcript

  1. None
  2. @FabianGosebrink

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. Server Client HTTP

  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. Component Component Component REST-Service

  18. None
  19. Presentational Component Smart Component Presentational Component REST-Service

  20. Presentational Component Smart Component Presentational Component REST-Service (…) […] (…)

    […]
  21. None
  22. “Cross-Platform? What about variation points?"

  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. "Electron is a tool for building Cross- Platform Desktop Apps

    with Javascript, Html and CSS" Anybody I don’t know when
  34. None
  35. None
  36. None
  37. None
  38. None
  39. > npm install electron -g

  40. > electron .

  41. index.js

  42. index.js

  43. index.html

  44. None
  45. None
  46. None
  47. None
  48. None
  49. renderer.js

  50. index.js

  51. None
  52. renderer.js

  53. None
  54. None
  55. None
  56. None
  57. index.js

  58. index.js

  59. > npm install ngx-electron

  60. service.ts

  61. None
  62. index.js

  63. None
  64. None
  65. > npm install electron-packager -g

  66. > electron-packager .temp/desktop

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

  68. None
  69. “[…] enables software programmers to build applications for mobile devices

    using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone."
  70. Cordova Application Mobile System Web App Plugins HTML APIs OS

    API OS API HTML Rendering (WebView) Cordova APIs Camera Battery Contacts Device Geolocation Media Vibration Splashscreen Dialogs Custom Cordova native APIs Amazon Fire Blackberry Tizen FirefoxOS …
  71. Cordova Application Mobile System Web App Plugins HTML APIs OS

    API OS API HTML Rendering (WebView) Cordova APIs Camera Battery Contacts Device Geolocation Media Vibration Splashscreen Dialogs Custom Cordova native APIs Amazon Fire Blackberry Tizen FirefoxOS …
  72. Cordova Application Mobile System Web App Plugins HTML APIs OS

    API OS API HTML Rendering (WebView) Cordova APIs Camera Battery Contacts Device Geolocation Media Vibration Splashscreen Dialogs Custom Cordova native APIs Amazon Fire Blackberry Tizen FirefoxOS …
  73. > npm install cordova -g

  74. > cordova create myFirstApp

  75. None
  76. None
  77. > cordova platform add android

  78. > cordova build

  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  87. https://github.com/FabianGosebrink/Basta-Spring-2018 https://offering.solutions http://angular-academy.ch https://swissangular.com @FabianGosebrink