Slide 1
Slide 1 text
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit
ASP.NET Core Blazor
Christian Weyer
@christianweyer
CTO
Slide 2
Slide 2 text
2
§ Co-Founder & CTO at Thinktecture AG
§ Personal focus on
§ Mobile & web-based application architectures
§ Interoperability, cross-device
§ Pragmatic end-to-end solutions
§ Cloud-native & serverless architectures
§ Independent Microsoft Regional Director
§ Microsoft MVP for Developer Technologies & Azure
ASPInsider, AzureInsider
§ Google GDE for Web Technologies, Angular
[email protected] @christianweyer https://www.thinktecture.com
Christian Weyer
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
“Alles C#, oder was?”
Slide 3
Slide 3 text
3
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
Slide 4
Slide 4 text
Demo
A typical Business Application
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
“Alles C#, oder was?”
4
Slide 5
Slide 5 text
5
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
PWA
Web Components
Web Assembly
Slide 6
Slide 6 text
”The web has won.”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
“Alles C#, oder was?”
6
Slide 7
Slide 7 text
manifest.json
{
"short_name": "PWA Demo",
"name": "My PWA Demo",
"icons": [
{
"src": "assets/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone"
}
Progressive Web Apps (PWA) - Web App Manifest
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
“Alles C#, oder was?”
7
Slide 8
Slide 8 text
Browser
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
PWA - Service Worker as an Interceptor (Offline, FTW!)
Service
Worker
Internet
Web Site /
Web App
HTML/JS
Cache
fetch
8
Slide 9
Slide 9 text
9
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
PWA
Web Components
Web Assembly
Slide 10
Slide 10 text
10
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
Web Assembly& .NET
Mono
Razor Components
Slide 11
Slide 11 text
11
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Blazor Web Assembly in the Browser
Blazor
DOM
Web Assembly
.NET
Razor Components
Slide 12
Slide 12 text
12
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Blazor Current Technical Architecture
Compiler
Parser
JIT
(.NET assemblies are interpreted)
Web APIs
(DOM,
IndexedDb,
File Storage
etc.)
Browser
blazor.js
Blazor page (.html)
JS Runtime
mono.wasm
mono.js
mscorlib.dll
etc.
myapp.dll
Slide 13
Slide 13 text
13
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
Razor → Blazor
HTML, CSS
C#
Pages vs. Components
Slide 14
Slide 14 text
14
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
Class Libraries
Full Stack
DI
Routing
Slide 15
Slide 15 text
15
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
Data Binding
Event Routing
Forms
Validation
Slide 16
Slide 16 text
16
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
3rd Party
JS Interop
PWA
Web Components
Slide 17
Slide 17 text
17
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
Blazor Server
Cross-Platform
Slide 18
Slide 18 text
18
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Blazor Server
Blazor Stub
DOM
.NET
Razor Components
ASP.NET Core
SignalR-based
data exchange
Slide 19
Slide 19 text
19
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Blazor Server – Disconnected UX
Slide 20
Slide 20 text
✅ Full SPA architecture approach
✅ No latency, code runs locally in the browser
✅ Full support for offline scenarios
✅ Easy deployment: static files on web server or
cloud storage; Desktop or mobile app packaging
✴ Initial download size may be large
(assets can be cached in browser, e.g. via Service Worker)
❌ .NET Standard code is currently interpreted by
special WASM-version of Mono runtime
❌ We always need JavaScript/TypeScript, until
WASM standard is being further evolved
✅ Thin Client for light devices
✅ Full .NET runtime on the server, not just .NET
Standard
✴ All your code is on the server
❌ Inherently stateful thinking & execution model
❌ Need for permanent physical connections
(custom protocol via SignalR) between clients and
server, eating resources
❌ Clients and server needs to be physically very
close to get low latencies
❌ No viable option to implement offline features
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Comparison:
Blazor Web Assembly ⇔ Blazor Server
20
Slide 21
Slide 21 text
21
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Our Blazor Journey
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Outlook
Limits
Missing Features
Roadmap
Slide 22
Slide 22 text
22
§ Blazor Web Assembly is in Preview!
§ WASM is an MVP (and SPAs are not part of it)
§ Mono WASM runtime is immature
§ Blazor is under development
§ Missing Features, e.g.
§ Modules, Lazy Loading
§ Component Model with CSS Encapsulation
§ Expose Components as Web Components
§ AOT Builds
§ Better Developer Tooling (e.g. improved Debugger, Live Reload)
§ Roadmap
§ Blazor WASM 1.0: May 2020
§ Improved & enhanced Blazor WASM in .NET 5.0 timeframe
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Current State & Outlook
Slide 23
Slide 23 text
23
§ Microsoft is building a new UI framework for the browser – so…
§ … ask yourself
§ “How do we deal with Blazor?”
§ “Why would we pick Blazor over an established SPA framework?”
§ “Why would we choose a SPA framework, and not Blazor?”
§ … you need to check your
§ Plans for existing & new projects
§ Team skills
§ Architecture
§ Codebase
§ Web Assembly & Blazor might change the game –
it may not be a game changer for you
“Alles C#, oder was?”
Cross-Plattform Web-Anwendungen mit ASP.NET Core Blazor
Call-to-Action