Slide 1
Slide 1 text
Workshop
Blazor: Moderne Businessanwendungen
mit C# & WebAssembly –
Full-Stack- und Cross-Plattform
Christian Weyer
https://thinktecture.com/christian-weyer
@christianweyer
CTO @ Thinktecture AG
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
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 3
Slide 3 text
3
§ No longer Windows-only
§ Web-enabled
§ Deployment
§ Updates
§ Native-like features
§ Path to Software-as-a-Service (SaaS)
§ APIs are king
§ Possibilities for specialized Microservices
§ SaaS is the big transformation
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Modern Business Applications
Slide 4
Slide 4 text
4
§ Users want:
§ Cross-Platform, Cross-Device
§ No installations
§ Offline (important for may use cases)
§ Developers think:
§ Web is the solution, but web is different
§ SPA is the solution, but SPA is different
§ JavaScript seems to be an issue for some .NET developers
§ There is existing .NET code, what to do about it?
§ Which technologies to choose?
§ JavaScript, everywhere? .NET everywhere?
§ In the Frontend: Can Blazor help here?
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
OK - what is the problem?
Slide 5
Slide 5 text
5
§ Automatic-Windows-to-Web-conversion-wonder-machine ™
§ Next incarnation of Silverlight (as it is Web-all-the-way)
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
What is Blazor NOT?
X
Slide 6
Slide 6 text
6
§ Blazor is a family of web
technologies
§ Server
§ WebAssembly
§ Blazor WebAssembly is a
SPA framework
§ Web, SPA & distributed computing
knowledge
§ HTML, CSS knowledge
§ DOM knowledge
§ JavaScript for client-side UI logic & manipulation
§ C# & .NET Standard for client-side logic
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
What is Blazor?
Mono Runtime .NET CLR
.NET Core /
.NET Standard 2.1
.NET Framework
Blazor WebAssembly Blazor Server
Razor Components
Browser (WASM / .NET / JS) Browser
(JS Stub)
Server (.NET)
Slide 7
Slide 7 text
7
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Our Journey Today
Architecture
+
The Web as a
Platform
Blazor
Idea & Approach
Components
all over
SPAs with .NET
with .NET Backends
Interop &
Integration
Comparison
Data Binding &
Forms
Current State &
Future
Slide 8
Slide 8 text
Architecture
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 9
Slide 9 text
Architecture
Online
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 10
Slide 10 text
Architecture
Offline
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 11
Slide 11 text
Demo
A typical Business Application
Online-only
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 12
Slide 12 text
12
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
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 &
Future
PWA
Web Components
Web Assembly
Slide 13
Slide 13 text
”The web has won.”
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 14
Slide 14 text
14
§ Web applications should…
§ Feel & behave more like a native app
§ Be installable, without (classic) app stores
§ Be able to work completely offline, without any server connections
§ Receive push notifications, without running
§ PWAs are targeted at both, mobile and desktop
§ Progressive Web Apps are not a technology
§ Collection of characteristics an application must/should support
➔ “Uber Pattern”
§ Various technologies are available to progressively enhance an application
§ Some outstanding standards like Web App Manifest, Service Workers
§ Web Capabilities wants to close gap between native and web
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Progressive Web Apps (PWA) – the Web gets more native
Slide 15
Slide 15 text
15
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Slide 16
Slide 16 text
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Offline Capability with Service Worker
Mobile or Desktop system
Remote storage
Server
HTTPS
Browser sandbox
Web App
HTML/JS
Cache storage
fetch
Service Worker
Slide 17
Slide 17 text
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Web Components
§ Reuse existing functionality as components
§ Safe your investments
§ Bring semantics into UI
§ Web Components are not a standard, but a collection of technologies
§ Custom Elements
§ HTML templates
§ Shadow DOM
§ Web Components bring a native component model to the web instead
of having to use frameworks
Slide 18
Slide 18 text
18
§ Low-level bytecode for the Web – beyond asm.js
§ Bring any language into the browser
§ Currently targeted at C/C++
§ Achieve superior performance in certain cases
§ Because JavaScript
(but not a replacement for JavaScript!)
§ Stack machine-based
§ Not AST, or register- or SSA-based bytecode
§ See https://github.com/WebAssembly/design/blob/master/Rationale.md
§ Goals
§ Fast, efficient, portable ▪ Use existing sandboxing tools
§ Readable and debuggable ▪ Don’t break the Web
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
WebAssembly (WASM)
https://twitter.com/getify/status/997098808344547328
Slide 19
Slide 19 text
19
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
https://caniuse.com/#feat=wasm
Slide 20
Slide 20 text
20
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
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 &
Future
Web Assembly
.NET
Razor Components
Slide 21
Slide 21 text
21
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor WebAssembly in the Browser
Blazor
DOM
Web Assembly
.NET
Razor Components
Slide 22
Slide 22 text
22
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor Current Technical Architecture
Compiler
Parser
JIT
(.NET Assemblies are interpreted)
Web APIs
(DOM,
IndexedDb,
File Storage
etc.)
Browser
blazor.
webassembly.js
Blazor SPA page (.html)
JS Runtime
dotnet.wasm
dotnet.js
mscorlib.dll
etc.
myapp.dll
* As of 24.02.2020
Slide 23
Slide 23 text
23
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
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 &
Future
Razor → Blazor
HTML, CSS
C#
Pages vs. Components
Slide 24
Slide 24 text
Pages
Fundamentals
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 25
Slide 25 text
RenderTree
Generated C# Code
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 26
Slide 26 text
Routing
Fundamentals
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 27
Slide 27 text
Components
Fundamentals
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 28
Slide 28 text
28
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
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 &
Future
Class Libraries
Full Stack
DI
.NET-isms
Slide 29
Slide 29 text
Dependency Injection
Components & Services
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 30
Slide 30 text
Code-Behind
Clean code
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 31
Slide 31 text
Web APIs
Fundamentals
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 32
Slide 32 text
Web APIs
Entity Framework
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 33
Slide 33 text
Web APIs
DTOs
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 34
Slide 34 text
Web APIs
Validation
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 35
Slide 35 text
Web APIs
HttpClient
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 36
Slide 36 text
SignalR
Fundamentals
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 37
Slide 37 text
SignalR
Clients
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 38
Slide 38 text
Authentication
OIDC
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 39
Slide 39 text
gRPC
Fundamentals
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 40
Slide 40 text
gRPC
Clients
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 41
Slide 41 text
41
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
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 &
Future
Data Binding
Forms
Validation
Slide 42
Slide 42 text
Data Binding
One-way and Two-way
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 43
Slide 43 text
Forms
Fundamentals
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 44
Slide 44 text
Validation
DataAnnotations
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 45
Slide 45 text
Validation
FluentValidation
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 46
Slide 46 text
3rd Party Components
Native vs. JavaScript Wrapper
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 47
Slide 47 text
47
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
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 &
Future
3rd Party
JS Interop
PWA
Web Components
Slide 48
Slide 48 text
JavaScript Interop
.NET-to-JS
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 49
Slide 49 text
SPA Integration
Web Components
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 50
Slide 50 text
JavaScript Interop
JS-to-.NET
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 51
Slide 51 text
Electron
Cross-Platform Desktop
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 52
Slide 52 text
WebWindow
Cross-Platform Desktop Experiment
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 53
Slide 53 text
Cordova
Cross-Platform Mobile
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 54
Slide 54 text
Capacitor
Cross-Platform Mobile
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 55
Slide 55 text
Progressive Web Apps
(PWA)
The new Cross-Platform
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 56
Slide 56 text
UI Frameworks
Commercial and Open Source
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 57
Slide 57 text
57
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
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 &
Future
Blazor Server
Established SPA Frameworks
Cross-Platform
Slide 58
Slide 58 text
58
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor Server
Blazor Stub
DOM
.NET
Razor Components
ASP.NET Core
SignalR-based
data exchange
Slide 59
Slide 59 text
59
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor Server – Disconnected UX
Slide 60
Slide 60 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
❌ Always needs JavaScript/TypeScript, until WASM
standard is being further evolved (takes years)
✅ 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 need to be physically very
close to get low latencies
❌ No viable option to implement offline features
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Comparison:
Blazor Web Assembly ⇔ Blazor Server
Slide 61
Slide 61 text
61
Blazor Web Assembly Angular
Language C# JS, TS
Complexity No further pre-requisites Promotes usage of RxJS
Tooling Visual Studio 2019, VS Code, VS for Mac, Rider WebStorm, VS Code et. al.
Packaging Your assemblies/DLLs in the browser Optimized JS via webpack
Maturity Brand new, even Preview; no predecessor Very mature; lots of experience from previous versions
Community Just starts to build up Very large
Ecosystem OSS will build up;
Various commercial vendors expected
Lots of OSS; Also commercial vendors
Integration 3rd party For every JS/TS library we need a proxy/shim npm universe: pick and choose; easy to integrate
Dependencies WASM support in browsers -
Full Stack C#, .NET Standard JS/TS (e.g. nest.js)
Size Not really optimized yet; quite large Continuously improved over years
Performance No experience, no real numbers;
.NET is interpreted; permanent marshaling/unmarshaling
between WASM and JS worlds
Continuously improved over years; may have pitfalls
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
A SPA Developer’s View - Today: Blazor ⇔ Angular (changes pending…)
Slide 62
Slide 62 text
62
§ Various ways and technologies to go cross-platform with (more) native integration
§ PWA
§ Works fine, but need for JavaScript
§ Electron
§ Currently* not working
§ WebWindow
§ Very early thinking and Alpha stage
§ Cordova (or Capacitor)
§ Currently* not working
§ Blazor mobile bindings for Xamarin
§ Very experimental & more than one codebase
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Cross-Platform with Blazor WebAssembly
* As of 24.02.2020
Slide 63
Slide 63 text
Azure Deployment
From Blob Storage to Full-blown
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor
Slide 64
Slide 64 text
64
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
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 &
Future
Limits
Missing Features
Roadmap
Slide 65
Slide 65 text
65
§ Blazor WebAssembly 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
§ AOT Builds
§ Live Reload
§ Better Developer Tooling (e.g. improved Debugger, Live Reload)
§ Roadmap
§ Blazor WASM 1.0: May 2020
§ Improved & enhanced Blazor WASM in .NET 5 timeframe
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Current State & Future
Slide 66
Slide 66 text
66
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Blazor Recap
Blazor WebAssembly
enables SPAs based on
C# and .NET Standard
You need to know the
Web, SPA architectures,
Security –
and JavaScript!
Blazor is young &
immature –
technical architecture,
app size, missing features
The ecosystem is very
immature – and will
evolve similar to JS SPA
frameworks
The modern web with
PWA &
Web Components can
also work and live with
Blazor WebAssembly
Beware of Blazor Server.
Stateful server-side
execution models are
error-prone, single-
point-of-failure, not
scalable etc.
And it locks you in.
❗
Slide 67
Slide 67 text
67
§ Microsoft is building a new UI framework for the browser – so…
§ ❓… ask yourself
§ “How do we deal with Blazor WebAssembly?”
§ “Why would we pick Blazor WebAssembly over an established SPA framework?”
§ “Why would we choose a SPA framework, and not Blazor WebAssembly?”
§ ❗… you need to check your
§ Plans for existing & new projects
§ Team skills
§ Architecture
§ Codebase
§ Web Assembly & Blazor might change the game –
but it may not be a game changer for you
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Call-to-Action
Slide 68
Slide 68 text
68
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Vorankündigung: Blazor WebAssembly Whitepaper auf deutsch
https://www.thinktecture.com/de/blazor-whitepaper
Slide 69
Slide 69 text
Danke!
Bei Fragen kontaktieren Sie mich gerne
Christian Weyer
https://thinktecture.com/christian-weyer
@christianweyer
[email protected]
https://thinktecture.com/de/newsletter
Slide 70
Slide 70 text
70
§ Running Your ASP.NET Core Blazor WebAssembly Application As A Progressive Web App (PWA)
§ https://www.thinktecture.com/de/blazor/progressive-web-apps-pwa/
§ Re-Using Angular Components In A Blazor WebAssembly Application Using Angular Elements - Web
Components Custom Elements, FTW!
§ https://www.thinktecture.com/de/blazor/integration-angular-elements-web-components/
§ Blazor
§ https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
§ Cordova
§ https://cordova.apache.org/
§ Capacitor
§ https://capacitor.ionicframework.com/
§ Electron
§ https://www.electronjs.org/
§ WebWindow
§ https://blog.stevensanderson.com/2019/11/18/2019-11-18-webwindow-a-cross-platform-webview-for-dotnet-core/
Blazor
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
Resources