Creating Real Time Cross Platform Apps With Angular, ASP.NET Core and SignalR

Fb89953d3a1b1fcb862a186585c37c25?s=47 Fabian Gosebrink
June 25, 2019
Technology
1
82

Creating Real Time Cross Platform Apps With Angular, ASP.NET Core and SignalR

Slides for my talk about Creating Real Time Cross-Platform Apps at the DWX 2019 in Nuremberg

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

June 25, 2019
Tweet

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
0
27
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
0
58
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
1
87
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
0
30
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
0
100
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
0
80
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
0
210
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
0
26
Fb89953d3a1b1fcb862a186585c37c25?s=48 fabiangosebrink
0
1.8k

Other Decks in Technology

See All in Technology
5059d3f370ad7e1f4d8de4be79ae1a2c?s=48 rvirus0817
2
360
665aa20c57717b4f34d0635308d272f7?s=48 kwada
0
100
Cd341135f01e6abaf3e9906ca8977256?s=48 emory
0
160
A2cd163fd3cfca5204b0d8f0c17eea29?s=48 yujif
2
140
9a22d09f92d50fa3d2a16766d0ba52f8?s=48 fabpot
5
2.1k
79c2f7db29ee6df3e1ceb85c6a0126d3?s=48 moriwaka
0
310
8065fe5a0d33908c6f71c5ae28939dcd?s=48 ayatokura
0
110
6ca998e3a07596f141597da0d2983ecc?s=48 0si43
2
250
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
100
95aaab3d693889550fd2e7ae02f2f789?s=48 takaking22
0
350
F274f2fd3531a606f0a5766c9052b5d8?s=48 miyamotok
0
570
1ae8fc4f63ab4770dd4545006489234c?s=48 yukinaga
2
520

Featured

See All Featured
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
339
26k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
340
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.2k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
308
21k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
13
480
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
282
18k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
196
19k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
345
20k

Transcript

  1. Creating real time Cross-Platform Apps

  2. Creating real time Cross-Platform Apps Angular

  3. Creating real time Cross-Platform Apps Angular ASP.NET Core

  4. Creating real time Cross-Platform Apps Angular ASP.NET Core SignalR

  5. Creating real time Cross-Platform Apps Angular ASP.NET Core SignalR Cordova

  6. Creating real time Cross-Platform Apps Angular ASP.NET Core SignalR Cordova

    Electron

  7. Creating real time Cross-Platform Apps Angular ASP.NET Core SignalR Cordova

    Electron

  8. Let's talk about

  9. None

  10. Mobile Desktop Web

  11. so much More

  12. None
  13. None

  14. Server Client HTTP WS

  15. ASP.NETCORE

  16. None
  17. None
  18. None
  19. None

  20. SignalR

  21. None
  22. None

  23. Transport

  24. Transport Websockets

  25. Websockets Server Sent Events Transport

  26. Websockets Server Sent Events Long Polling Transport

  27. Hub

  28. None
  29. None
  30. None

  31. Injecting the client

  32. None
  33. None
  34. None
  35. None

  36. @aspnet/Signalr

  37. None
  38. None
  39. None
  40. None

  41. Demo

  42. None

  43. “[…] 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."

  44. 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 …

  45. > npm install cordova -g

  46. > cordova create myFirstApp

  47. None

  48. Information Features Plugins Settings

  49. None

  50. > cordova platform add android

  51. > cordova build

  52. deviceready pause resume backbutton menubutton searchbutton startcallbutton endcallbutton volumedownbutton volumeupbutton

    activated
  53. None
  54. None
  55. None
  56. None
  57. None

  58. Demo

  59. None
  60. None

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

    with Javascript, Html and CSS"
  62. None
  63. None

  64. > npm install electron -g

  65. None

  66. index.js

  67. index.html

  68. > electron .

  69. None
  70. None
  71. None
  72. None
  73. None
  74. None

  75. Communication

  76. IPC

  77. renderer.js

  78. index.js

  79. Operating System

  80. None

  81. index.js

  82. index.js

  83. > npm install ngx-electron

  84. service.ts

  85. > npm install electron-packager -g

  86. > electron-packager .temp/desktop

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

  88. •Automatic updates •Crash reports •Content tracing •Installation packages

  89. None

  90. Demo

  91. “Cross-Platform? What about variation points?"

  92. Dependency Injection

  93. None
  94. None
  95. None
  96. None
  97. None
  98. None
  99. None

  100. Environments!

  101. Demo

  102. One Code every platform

  103. One Codebase every platform

  104. Fabian Gosebrink http://offering.solutions http://github.com/FabianGosebrink http://fabian-gosebrink.com @FabianGosebrink