Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating Real Time Cross Platform Apps With Ang...
Search
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
Fabian Gosebrink
June 25, 2019
Tweet
Share
More Decks by Fabian Gosebrink
See All by Fabian Gosebrink
Why State is the Most Important Part of Your Angular Application
fabiangosebrink
0
65
Angular testing made easy with Jest and Cypress
fabiangosebrink
0
99
Introducing state management into an application with NgRx
fabiangosebrink
0
160
Scalable architectures in Angular with Nx
fabiangosebrink
0
130
My Biggest Angular Mistakes and How To Avoid Them
fabiangosebrink
0
240
[iJS Munich] Better Angular Architectures with Libraries and Nx
fabiangosebrink
0
150
Mastering State Management in Angular with the NgRx Signal Store
fabiangosebrink
0
360
Angular Architectures with NgRx Stores & Effects
fabiangosebrink
0
110
Angular Testing made easy with Jest and Cypress
fabiangosebrink
0
110
Other Decks in Technology
See All in Technology
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
290
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
0
1.4k
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
150
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
360
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
620
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
140
WEBサービスを成り立たせるAWSサービス
takano0131
1
200
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
120
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
1
270
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
150
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
10
6.7k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
The Cult of Friendly URLs
andyhume
79
6.6k
Why Our Code Smells
bkeepers
PRO
340
57k
Agile that works and the tools we love
rasmusluckow
331
21k
Designing for humans not robots
tammielis
254
26k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Faster Mobile Websites
deanohume
310
31k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
RailsConf 2023
tenderlove
30
1.3k
Facilitating Awesome Meetings
lara
57
6.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
Creating real time Cross-Platform Apps
Creating real time Cross-Platform Apps Angular
Creating real time Cross-Platform Apps Angular ASP.NET Core
Creating real time Cross-Platform Apps Angular ASP.NET Core SignalR
Creating real time Cross-Platform Apps Angular ASP.NET Core SignalR Cordova
Creating real time Cross-Platform Apps Angular ASP.NET Core SignalR Cordova
Electron
Creating real time Cross-Platform Apps Angular ASP.NET Core SignalR Cordova
Electron
Let's talk about
None
Mobile Desktop Web
so much More
None
None
Server Client HTTP WS
ASP.NETCORE
None
None
None
None
SignalR
None
None
Transport
Transport Websockets
Websockets Server Sent Events Transport
Websockets Server Sent Events Long Polling Transport
Hub
None
None
None
Injecting the client
None
None
None
None
@aspnet/Signalr
None
None
None
None
Demo
None
“[…] 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."
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 …
> npm install cordova -g
> cordova create myFirstApp
None
Information Features Plugins Settings
None
> cordova platform add android
> cordova build
deviceready pause resume backbutton menubutton searchbutton startcallbutton endcallbutton volumedownbutton volumeupbutton
activated
None
None
None
None
None
Demo
None
None
"Electron is a tool for building Cross- Platform Desktop Apps
with Javascript, Html and CSS"
None
None
> npm install electron -g
None
index.js
index.html
> electron .
None
None
None
None
None
None
Communication
IPC
renderer.js
index.js
Operating System
None
index.js
index.js
> npm install ngx-electron
service.ts
> npm install electron-packager -g
> electron-packager .temp/desktop
> electron-packager .temp/desktop --platform=linux, win32
•Automatic updates •Crash reports •Content tracing •Installation packages
None
Demo
“Cross-Platform? What about variation points?"
Dependency Injection
None
None
None
None
None
None
None
Environments!
Demo
One Code every platform
One Codebase every platform
Fabian Gosebrink http://offering.solutions http://github.com/FabianGosebrink http://fabian-gosebrink.com @FabianGosebrink