Slide 1
Slide 1 text
1
§ Was SIE ERWARTET
§ Full-Stack und Cross-Plattform-Anwendungen mit C# (… und auch JavaScript…)
§ End-to-End-Architekturen
§ Sichere .NET-7-Backends mit Web-APIs, SignalR, gRPC
§ Single-Page-Applications (SPAs) mit Blazor WebAssembly
§ Realistische & pragmatische Einschätzung von Blazor - Status Quo & Ausblick
§ Demos
§ Was Sie NICHT erwartet
§ Blazor Deep Dives
§ Blazor Server / Hybrid (aber Vergleich & Einschätzung dazu)
Workshop
Blazor: Full-Stack- und Cross-Plattform-Anwendungen
mit C# & WebAssembly
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
!!! KEIN Hands-On
für Teilnehmer!!!
Slide 2
Slide 2 text
Workshop
Blazor-Workshop:
Full-Stack- und Cross-Plattform-Anwendungen
mit C# & WebAssembly
Patrick Jahr
https://thinktecture.com/patrick-jahr
@jahr_patrick
Developer Consultant
Sebastian Gingter
https://thinktecture.com/sebastian-gingter
@phoenixhawk
Consultant & Erklärbär 🐻💬
Slide 3
Slide 3 text
3
§ Consultant & Erklärbär 🐻💬 bei der Thinktecture AG
§ Fokus auf
§ Flexible und skalierbare Backend-Architekturen
§ Blazor WebAssembly
§ Identity und Access-Management
§ Entwicklerproduktivität
§ Softwarequalität
§ Alles rund um .NET Core
§ [email protected]
§ Twitter: @phoenixhawk
Sebastian Gingter
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 4
Slide 4 text
Hello, it’s me.
Patrick Jahr
Developer Consultant @ Thinktecture AG
E-Mail: [email protected]
Twitter: @jahr_patrick
Slides: https://thinktecture.com/patrick-jahr
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Patrick Jahr
Slide 5
Slide 5 text
5
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Four Blocks – approx. break down
Intro
Story
… a bit boooring stuff …
But please bear with us!
Technology
Architecture
Code
😏 😊
Technology
Architecture
Code
😊
Technology
Architecture
Code
Final Q&A
😊
09.00 – 10.30 11.00 – 12.30
13.30 – 15.00 15.30 – 17.00
Slide 6
Slide 6 text
6
§ No longer Windows-only
§ Web-enabled
§ Deployment
§ Updates
§ Native-like features
§ Still: Smart Clients (SPA)
§ Path to Software-as-a-Service (SaaS)
§ APIs are king
§ Possibilities for specialized microservices
§ SaaS is the big transformation
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Full-Stack & Cross-Platform Applications
Slide 7
Slide 7 text
7
§ Users want:
§ Cross-Platform, Cross-Device
§ No installations
§ Offline (important for many 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? C# & .NET everywhere?
§ In the Frontend: Can Blazor help here?
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
OK - What is the Problem? 🤔
Slide 8
Slide 8 text
8
§ Automatic-Windows-to-Web-conversion-wonder-machine ™
§ Next incarnation of Silverlight (as Blazor is Web-all-the-way)
§ JavaScript killer
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What is Blazor NOT?
X
Slide 9
Slide 9 text
9
§ Blazor is a family of web technologies
§ Server
§ WebAssembly
§ Hybrid / MAUI
§ Blazor WebAssembly is a
SPA framework
§ Web, SPA & distributed computing
knowledge
§ HTML, CSS knowledge
§ DOM knowledge
§ JavaScript for DOM interaction &
3rd party integration
§ C# & .NET Standard for client-side
logic → Full-stack C# possible
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What is Blazor?
Mono-based Runtime .NET CLR
.NET .NET Framework
Blazor
WebAssembly
Blazor Server
Razor Components
Browser (WASM / .NET / JS) Browser
(JS Stub)
Server (.NET)
Blazor MAUI
Blazor WebView
(JS Stub)
App (.NET)
Slide 10
Slide 10 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Browser Server
Classic Request-Response-Model
HTML
CSS
JS
Request
Response
Static files
& Code
Slide 11
Slide 11 text
Blazor Workshop
Browser Server
SPA (Angular, React, Vue, …)
HTML
CSS
JS
Request
Response
Static files
& Code
API (Code)
JS-Runtime
Request
Response
State
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Slide 12
Slide 12 text
Blazor Workshop
Browser Server
Blazor Webassembly
JS-Runtime
WASM-Runtime
.NET Runtime
C# App
HTML
CSS
JS
Request
Response
Static files
& ASP.NET Core
State
HTML
CSS
JS
.NET & IL
Interop
API (Code)
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Slide 13
Slide 13 text
Blazor Workshop
Browser Server
Blazor Server
JS-Runtime
HTML
CSS
JS
Request
Response
Static files
& ASP.NET Core
.NET Runtime
C# App
State
Interop SignalR
Code
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Slide 14
Slide 14 text
Blazor Workshop
Browser Server
Blazor – Hybrid (MAUI / WinForms / WPF)
JS-Runtime
HTML
CSS
JS
Request
Load
Static files
& ASP.NET Core
.NET Runtime
C# App
State
SignalR
Code
Desktop (or Mobile) Application
Blazor WebView Component
Response
Embedded Resources
Static files
Intra-Process Communication
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Slide 15
Slide 15 text
15
• ASP.NET Core Infrastructure (DI, Config, Hosting, Logging...)
• ASP.NET Core MVC and/or Razor Pages
• Writing business logic with current C# language features
• EF Core
• HTML & CSS
• UI-Framework of your choice (Bootstrap, Material, Foundation, etc...)
• JS (a bit, for interop)
• „Situational Awareness“ or „Where happens what?“
(Browser, SignalR, Server-rendered, Razor component, which Scope?)
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What knowledge can I reuse & what do I need to learn?
Slide 16
Slide 16 text
19
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Journey Today
Architecture
+
The Web as a Platform
Blazor
Idea & Approach
Components
all over
SPAs with
.NET Backends
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Slide 17
Slide 17 text
20
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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
Slide 18
Slide 18 text
”The web has won.”
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 19
Slide 19 text
22
§ Progressive Web Apps
§ Web Components
§ WebAssembly
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Three pillars of the Modern Web
Slide 20
Slide 20 text
23
§ 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 Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Progressive Web Apps (PWA) – the Web gets more native
Slide 21
Slide 21 text
24
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Slide 22
Slide 22 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 23
Slide 23 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 24
Slide 24 text
29
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 25
Slide 25 text
30
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor WebAssembly in the Browser
Blazor
DOM
Web Assembly
.NET
Razor Components
Slide 26
Slide 26 text
31
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor WASM Technical Architecture since .NET 6 – non-AOT
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 17.02.2022
blazor.boot.json
Slide 27
Slide 27 text
32
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 28
Slide 28 text
Components
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 29
Slide 29 text
RenderTree
Generated C# Code
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 30
Slide 30 text
Pages
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 31
Slide 31 text
Routing
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 32
Slide 32 text
37
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 33
Slide 33 text
Dependency Injection
Components & Services
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 34
Slide 34 text
Code-Behind
Clean code
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 35
Slide 35 text
Web APIs
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 36
Slide 36 text
Web APIs
Entity Framework
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 37
Slide 37 text
Web APIs
DTOs
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 38
Slide 38 text
Web APIs
Validation
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 39
Slide 39 text
Web APIs
HttpClient
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 40
Slide 40 text
SignalR
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 41
Slide 41 text
SignalR
Clients
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 42
Slide 42 text
Authentication
OIDC
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 43
Slide 43 text
SEO & Performance
Prerendering
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 44
Slide 44 text
54
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 45
Slide 45 text
Data Binding
One-way and Two-way
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 46
Slide 46 text
Forms
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 47
Slide 47 text
Validation
DataAnnotations
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 48
Slide 48 text
Validation
FluentValidation
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 49
Slide 49 text
3rd Party Components
Native vs. JavaScript Wrapper
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 50
Slide 50 text
60
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 51
Slide 51 text
JavaScript Interop
.NET-to-JS
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 52
Slide 52 text
JavaScript Interop
JS-to-.NET
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 53
Slide 53 text
Progressive Web Apps
(PWA)
The new Cross-Platform
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 54
Slide 54 text
UI Frameworks
Commercial and Open Source
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 55
Slide 55 text
69
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 56
Slide 56 text
70
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Server
Blazor JS Stub
DOM
.NET
Razor Components
ASP.NET Core (Server)
SignalR-based
binary
data exchange
State, Connections etc.
Browser (Client)
UI Diffs
Events
Slide 57
Slide 57 text
71
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Server – Disconnected UX
Slide 58
Slide 58 text
✅ Full SPA architecture approach
✅ No latency, code runs locally in the browser
✅ Full support for offline scenarios
✅ Deployment: staPc files on web server or
cloud storage; Desktop or mobile app packaging
✴ IniPal download size may be large
(assets cached in browser, via Service Worker)
❌ .NET IL code is currently interpreted by special WASM-
version of Mono runPme
❌ Always needs JavaScript/TypeScript, unPl WASM standard
is being further evolved
✅ Thin Client aproach for light devices
✅ Full .NET runPme on the server, not just .NET Standard
✅ No need for API-based architecture
✴ All your code is on the server
❌ Inherently stateful execuPon model
❌ Need for permanent physical connecPons
❌ No viable opPon to implement offline features
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Thinktecture Comparison
Blazor WebAssembly Blazor Server
Slide 59
Slide 59 text
73
Blazor WebAssembly Angular
Language C# TypeScript, JavaScript
Framework Opinion .NET & ASP.NET Core (like Razor) Promotes usage of RxJS
Tooling Visual Studio 2022, (VS Code, VS for Mac, Rider) WebStorm, VS Code et. al.
Packaging Your assemblies/DLLs in the browser (+Runtime) 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 & available
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 with single tech C#, .NET (6+) JS/TS (e.g. nest.js)
Size Not really optimized yet; quite large (WASM > IL) Continuously improved over years
Runtime performance No experience, no real numbers; .NET is interpreted; interop WASM
and JS worlds
Continuously improved over years; may have pitfalls
Blazor Workshop
Full-Stack- und Cross-Pla[orm-Anwendungen mit C# und WebAssembly
Our Thinktecture View
Blazor ⇔ Angular
Slide 60
Slide 60 text
74
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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 61
Slide 61 text
.NET 8
Outlook
Full-Stack- und Cross-Pla[orm-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 62
Slide 62 text
76
§ Blazor WebAssembly (WASM) is a browser SPA framework
§ For C# and .NET developers
§ .NET code runs assemblies interpreted on a CLR compiled to WASM
§ AOT-ed code will mostly run as native WASM
§ Blazor WASM is still young
§ Release end of April 2020
§ Lots of space for improvement
§ Blazor WASM in .NET 6.0 establishes a reasonable baseline
§ More to come in NET 7.0+
https://github.com/dotnet/aspnetcore/issues/39504
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Current State & Future
Slide 63
Slide 63 text
77
§ Fallacies of Distributed Computing
§ https://de.wikipedia.org/wiki/Fallacies_of_Distributed_Computing
§ What Web can do today?
§ https://whatwebcando.today/
§ Blazor Knowledge Hub
§ https://www.thinktecture.com/de/asp-dotnet-core-blazor/
§ FluentValidation
§ https://fluentvalidation.net/
§ Blazor in .NET 6.0
§ https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-6.0?view=aspnetcore-6.0
§ bUnit
§ https://github.com/egil/bUnit
§ Mobile Blazor Bindings
§ https://github.com/dotnet/MobileBlazorBindings
§ ASP.NET Core 7 Roadmap
§ https://github.com/dotnet/aspnetcore/issues/39504
Blazor Workshop
Full-Stack- und Cross-Pla[orm-Anwendungen mit C# und WebAssembly
Resources
Slide 64
Slide 64 text
78
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor recap
Blazor WebAssembly enables
SPAs based on C# and .NET
Standard.
You need to know Web, SPA
architectures, Security et. al. –
and JavaScript!
Blazor is young & immature –
technical architecture, app
size, missing features.
The ecosystem is immature –
will evolve similar to JS SPA
frameworks, plus
commercial vendors.
The modern web with PWA &
Web Components can also
work and live with Blazor
WebAssembly.
Beware of Blazor Server. No
real Web architecture, no
boundaries.
Stateful server-side with dumb
client UI.
Slide 65
Slide 65 text
79
§ Microsoft is building a new UI framework for the browser – so…
§ … ask yourself
§ “How do we deal with Blazor?”
§ “Why would we pick Blazor WebAssembly over an established JS SPA framework?”
§ “Why would we choose a JS SPA framework, and not Blazor WebAssembly?”
§ … you need to check your
§ Team skills
§ Architecture
§ Codebase
§ Try it out & build Proof-of-Concepts (with experienced people)
§ Web Assembly & Blazor might change the game –
but it may not be a game changer for you
Blazor Workshop
Full-Stack- und Cross-Pla[orm-Anwendungen mit C# und WebAssembly
🗣 Call-to-AcLon
Slide 66
Slide 66 text
https://www.thinktecture.com/ueber-uns/karriere/
Dankeschön!
Demos aus der Workshop:
https://github.com/thinktecture-labs/basta-
spring-2023-blazor-workshop
https://github.com/thinktecture/blazor-
webassembly-demo
80
Sebastian Gingter
https://thinktecture.com/sebastian-gingter
Patrick Jahr
hgps://thinktecture.com/patrick-jahr