Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Creating Real Time Cross Platform Apps With Ang...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Fabian Gosebrink Fabian Gosebrink
June 25, 2019
Technology
260
1

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

Avatar for Fabian Gosebrink

Fabian Gosebrink

June 25, 2019

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
Advanced Signal Store: Structuring State for Real Angular Applications
Avatar for Fabian Gosebrink fabiangosebrink
0
110
NgRx Signal Store - A Deeper Dive
Avatar for Fabian Gosebrink fabiangosebrink
0
76
Modern Angular Apps in 2026
Avatar for Fabian Gosebrink fabiangosebrink
0
130
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
160
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
190
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
280
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
270
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
370
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
250

Other Decks in Technology

See All in Technology
SREは、MCPとAutopilotをこう使え！
Avatar for kazumax55 kazumax55
3
870
リアーキテクチャ後の障害ゼロを目指したShadow Testingの取り組み
Avatar for nihonbuson nihonbuson
PRO
1
140
AI 時代のスタートアップエコシステ厶から考究する技術的負債との向き合い方
Avatar for memory m3m0r7
PRO
3
2.2k
GoのInterface内部構造から学ぶ！最高パフォーマンスを出すコード設計
Avatar for Yappli Developers yappli_developers
0
130
現場で役立つ技術負債の効果的な返済方法
Avatar for 増田 亨 masuda220
PRO
9
4.4k
AI時代、データエンジニアが一番おもろい
Avatar for ゲンシュン genshun9
0
660
アクセスキーこわい やめかたと漏らさない工夫
Avatar for Yuichi Sato sassssan68
1
380
バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ
Avatar for 尾﨑勇太/Yuta Ozaki waiwai2111
1
130
データ_AIの事業の勝敗をわけるもの
Avatar for KJ(Kenji Matsuda) nek0128
1
440
2026_devsumi_ozono.pdf
Avatar for O3(ozono) o3
3
520
すぐできる衛星通信対応 あとは山奥に行くだけ
Avatar for tatetate55 tatetate55
0
130
Railsのように考える: See through the Master
Avatar for Koji SHIMADA snoozer05
PRO
4
1k

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
530
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.1k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.3k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
240
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
600
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
340

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