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

Cross Platform applications with Angular, Electron & Cordova

Fabian Gosebrink
February 20, 2018
Technology
0
370

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
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
73
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
82
From Desktop to web and back
fabiangosebrink
0
17
Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
250
Developing forms and validation with Typed Angular Reactive Forms
fabiangosebrink
0
47
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
58
Monorepos with Angular and Nx
fabiangosebrink
0
120
Create modern Web Apps with the new Angular and it's ecosystem
fabiangosebrink
0
88
Realtime Cross Platform Apps with Angular, ASP.NET Core and SignalR
fabiangosebrink
0
120

Other Decks in Technology

See All in Technology
開発パフォーマンスを最大化するための開発体制
ham0215
2
420
自己改善からチームを動かす！ 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
720
MapLibreとAmazon Location Service
dayjournal
1
160
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
1
230
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
520
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
920
反実仮想機械学習とは何か
usaito
PRO
11
4.6k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
DMM.com アルファ室採用案内資料
hsugita
1
150

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
25
5.8k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
17
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Embracing the Ebb and Flow
colly
80
4.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Code Review Best Practice
trishagee
55
15k
Gamification - CAS2011
davidbonilla
76
4.6k
Optimizing for Happiness
mojombo
370
69k
A Tale of Four Properties
chriscoyier
151
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
How GitHub (no longer) Works
holman
304
140k

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