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

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

Fabian Gosebrink
June 25, 2019
Technology
1
220

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

Fabian Gosebrink

June 25, 2019
Tweet

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
64
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
68
From Desktop to web and back
fabiangosebrink
0
17
Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
240
Developing forms and validation with Typed Angular Reactive Forms
fabiangosebrink
0
46
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
56
Monorepos with Angular and Nx
fabiangosebrink
0
120
Create modern Web Apps with the new Angular and it's ecosystem
fabiangosebrink
0
76
Realtime Cross Platform Apps with Angular, ASP.NET Core and SignalR
fabiangosebrink
0
120

Other Decks in Technology

See All in Technology
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
反実仮想機械学習とは何か
usaito
PRO
6
1.8k
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
680
プロデザ！ BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
4.9k
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
320
Databricks におけるデータエンジニアリング
databricksjapan
0
370
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
640
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k

Featured

See All Featured
How GitHub (no longer) Works
holman
304
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
Visualization
eitanlees
135
14k
Embracing the Ebb and Flow
colly
79
4.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
GraphQLとの向き合い方2022年版
quramy
31
12k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
16
6.3k
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
Bash Introduction
62gerente
604
210k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
The Pragmatic Product Professional
lauravandoore
24
5.8k

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