Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross Platform applications with Angular, Elect...

Fabian Gosebrink
February 20, 2018
Technology
0
380

Cross Platform applications with Angular, Electron & Cordova

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

Fabian Gosebrink

February 20, 2018
Tweet

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
[iJS Munich] Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
53
Mastering State Management in Angular with the NgRx Signal Store
fabiangosebrink
0
92
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
42
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
50
Introducing NgRx in an Nx Angular Workspace
fabiangosebrink
0
240
Full-Stack-Web-Applications with Angular, Nx and .NET
fabiangosebrink
0
130
Angular Signals - Revolution in Angular development
fabiangosebrink
0
150
Kickstarting Your Journey with NgRx Signal Store
fabiangosebrink
0
100
Angular Signals under the Hood
fabiangosebrink
0
390

Other Decks in Technology

See All in Technology
Platform Engineering for Software Developers and Architects
syntasso
1
520
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
AGIについてChatGPTに聞いてみた
blueb
0
130
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
110
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
420
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
890
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
140
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
500

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Faster Mobile Websites
deanohume
305
30k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Become a Pro
speakerdeck
PRO
25
5k
Gamification - CAS2011
davidbonilla
80
5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Fireside Chat
paigeccino
34
3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k

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