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

Creating Real Time Cross Platform Apps With Ang...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Fabian Gosebrink Fabian Gosebrink
June 25, 2019
Technology
1
240

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
Tweet

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
Modern Angular Apps in 2026
Avatar for Fabian Gosebrink fabiangosebrink
0
23
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
82
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
130
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
200
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
160
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
270
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
160
Mastering State Management in Angular with the NgRx Signal Store
Avatar for Fabian Gosebrink fabiangosebrink
0
410
Angular Architectures with NgRx Stores & Effects
Avatar for Fabian Gosebrink fabiangosebrink
0
120

Other Decks in Technology

See All in Technology
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
480
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
Avatar for SansanTech sansantech
PRO
2
400
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
2
180
(技術的には)社内システムもOKなブラウザエージェントを作ってみた！
Avatar for Har1101 har1101
0
150
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
Avatar for Riotaro OKADA okdt
PRO
3
840
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
500
AIエージェントを開発しよう！-AgentCore活用の勘所-
Avatar for YukiOgawa yukiogawa
0
190
Amazon Bedrock Knowledge Basesチャンキング解説！
Avatar for 野口碧生 aoinoguchi
0
160
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
Avatar for Yoshiki yoshiki_0316
1
120
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.2k
今日から始める Amazon Bedrock AgentCore
Avatar for Har1101 har1101
4
420

Featured

See All Featured
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
57
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
240
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
77
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k

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