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-6-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
Workshop
Blazor: Full-Stack- und Cross-Plattform-Anwendungen
mit C# & WebAssembly
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
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
Marco Frodl
https://thinktecture.com/marco-frodl
@marcofrodl
Consultant
Slide 3
Slide 3 text
Special Day
Blazor
Thema Sprecher Datum, Uhrzeit
Blazor in .NET 7:
Server, WebAssembly und Hybrid –
ein Wegweiser
Patrick Jahr DI, 11. Oktober 2022,
10.45 bis 11.45
Blazor WebAssembly:
Performanceoptimierungen fürs UI
Patrick Jahr DI, 11. Oktober 2022,
12.15 bis 13.15
Blazor Hybrid: Wie sich Blazor in
WPF, Windows Forms und MAUI integriert
Dr. Holger Schwichtenberg DI, 11. Oktober 2022,
15.30 bis 16.30
gRPC und Blazor WebAssembly:
Ein Traumpaar?
Christian Weyer DI, 11. Oktober 2022,
17.00 bis 18.00
Praxisnahes State Management in Blazor
WebAssembly – Was sind denn das für
Zustände?
Sebastian Gingter DI, 11. Oktober 2022,
19.00 bis 20.00
Slide 4
Slide 4 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Patrick Jahr
Developer Consultant @ Thinktecture AG
@jahr_patrick
Marco Frodl
Consultant @ Thinktecture AG
@marcofrodl
Slide 5
Slide 5 text
5
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Four Blocks
Intro
Story
… What is Blazor WebAssembly
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
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Journey Today
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with
.NET Backends
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Slide 7
Slide 7 text
7
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Blazor Journey
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Slide 8
Slide 8 text
And why should we care?
Blazor WebAssembly is a Single Page Application
framework for building interactive client-side web apps
with .NET.
It uses open web standards without plugins or
recompiling code into other languages and works in all
modern web browsers, including mobile browsers.
Running .NET code inside web browsers is made possible
by WebAssembly (WASM).
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What is Blazor WebAssembly?
Slide 9
Slide 9 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
The modern Web Stack
…
…
…
Slide 10
Slide 10 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Querverweis
PROJECT FUGU 2022: DAS SIND DIE
NEUEN PWA-SCHNITTSTELLEN
Christian Liebel
Mittwoch, 12.10. 16:45-17:45
Meetingsaal 3A
Blazor Workshop:
Full-Stack- und Cross-Plattform-
Anwendungen mit C# und
WebAssembly
Patrick Jahr und Marco Frodl
Slide 11
Slide 11 text
And why should we care?
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What is Blazor WebAssembly?
Blazor WebAssembly is a Single Page Application
framework for building interactive client-side web apps
with .NET.
It uses open web standards without plugins or
recompiling code into other languages and works in all
modern web browsers, including mobile browsers.
Running .NET code inside web browsers is made possible
by WebAssembly (WASM).
Slide 12
Slide 12 text
Blazor in .NET 7
Server, WebAssembly & Hybrid - Ein Wegweiser
Browser Server
SPA (Angular, React, Vue, …)
HTML
CSS
JS
Request
Response
Static Files
& Code
API (Code)
JS-Runtime
Request
Response
State
Slide 13
Slide 13 text
And why should we care?
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What is Blazor WebAssembly?
Blazor WebAssembly is a Single Page Application
framework for building interactive client-side web apps
with .NET.
It uses open web standards without plugins or
recompiling code into other languages and works in all
modern web browsers, including mobile browsers.
Running .NET code inside web browsers is made possible
by WebAssembly (WASM).
Slide 14
Slide 14 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
My daily web app tool belt
Slide 15
Slide 15 text
• No Hardware and Maintenance
• Cross-Platform
• Flexible Payments and Scalability
• Automatic Updates
• White Labeling and Customization
• Ability to Switch Between Providers
• App/API Integration
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
My daily web app tool belt – completely cloud-based
Slide 16
Slide 16 text
”The Web has won.”
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
16
Christian Weyer
CTO Thinktecture AG
Slide 17
Slide 17 text
• As of 2022, the SaaS space is worth over $170 billion.
• Gartner Forecasts SaaS Spending to Reach Nearly $208 billion in 2023.
• The SaaS industry has increased in size by around 500% over the past seven years.
• SaaS is thought to be the most important tech in business success.
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
SaaS is important for every digital business
https://www.gartner.com/en/newsroom/press-releases/2021-08-02-gartner-says-four-trends-are-shaping-the-future-of-public-cloud
https://www.gartner.com/en/newsroom/press-releases/2022-04-19-gartner-forecasts-worldwide-public-cloud-end-user-spending-to-reach-nearly-500-billion-in-2022
https://explodingtopics.com/blog/saas-statistics
Slide 18
Slide 18 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Querverweis
CLOUD-NATIVE: DEFINITION,
PRAKTIKEN & PATTERNS
Thorsten Hans & Christian Weyer
Donnerstag, 13.10. 09:00-10:00
Watfordsaal
Blazor Workshop:
Full-Stack- und Cross-Plattform-
Anwendungen mit C# und
WebAssembly
Patrick Jahr und Marco Frodl
Slide 19
Slide 19 text
And why should we care?
Blazor WebAssembly is a Single Page Application
framework for building interactive client-side web apps
with .NET.
It uses open web standards without plugins or
recompiling code into other languages and works in all
modern web browsers, including mobile browsers.
Running .NET code inside web browsers is made possible
by WebAssembly (WASM).
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What is Blazor WebAssembly?
Slide 20
Slide 20 text
The Blazor view on WA
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Why do we need WebAssembly?
WebAssembly is a compact bytecode format optimized
for fast download and maximum execution speed. It’s
supported in web browsers without plugins.
WebAssembly code can access the full functionality of the
browser via JavaScript, called JavaScript interoperability
(JS interop).
.NET code executed via WASM in the browser runs in the
browser's JavaScript sandbox.
Slide 21
Slide 21 text
WASM everywhere
• Web/App
• Game
• AI
• Blockchain
• Runtime
• Cloud
• Data Analytics
• IoT
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
WebAssembly can do more
Slide 22
Slide 22 text
The Blazor view on WA
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
WebAssembly - Example 1 of 3
https://web.dev/ps-on-the-web/
WebAssembly and its C++
toolchain Emscripten have been
the key to unlocking Photoshop's
ability to come to the web, as it
meant that Adobe would not
have to start from scratch, but
could leverage their existing
Photoshop codebase.
Slide 23
Slide 23 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
WebAssembly - Example 2 of 3
https://www.amazon.science/blog/how-prime-video-updates-its-app-for-more-than-8-000-device-types
The switch to Rust and Wasm
has improved the applications
frame rate stability and speed.
By moving to Wasm, we have
saved a total of 30 megabytes of
JavaScript heap memory.
After a year and 37,000 lines of
Rust code, we have significantly
improved performance, stability,
and CPU consumption and
reduced memory utilization.
Slide 24
Slide 24 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
WebAssembly - Example 3 of 3
https://cosmonic.com/blog/kubecon-eu-2021-webassembly-keynote-cloud-native-and-wasm-better-together/
Slide 25
Slide 25 text
25
▪ Users want:
▪ Cross-Platform, Cross-Device
▪ SaaS
▪ Offline capability (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?
▪ WebAssembly could be a game changer in the future
▪ 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 26
Slide 26 text
And why should we care?
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What is Blazor WebAssembly?
Blazor WebAssembly is a Single Page Application
framework for building interactive client-side web apps
with .NET.
It uses open web standards without plugins or
recompiling code into other languages and works in all
modern web browsers, including mobile browsers.
Running .NET code inside web browsers is made possible
by WebAssembly (WASM).
Slide 27
Slide 27 text
27
When a Blazor WebAssembly app is built and run in a
browser:
• C# code & Razor files are compiled into .NET assemblies.
• Assemblies & .NET runtime are downloaded to the
browser.
• Blazor WebAssembly bootstraps the .NET runtime and
configures the runtime to load the assemblies for the
app.
• The Blazor WebAssembly runtime uses JavaScript interop
to handle DOM manipulation and browser API calls.
• Unused code is stripped out of the app when it's
published by the Intermediate Language (IL) Trimmer.
• HTTP responses are compressed.
• .NET runtime & assemblies are cached in the browser.
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
What is Blazor?
Slide 28
Slide 28 text
28
▪ 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?
Slide 29
Slide 29 text
29
• ASP.NET Core Infrastruktur (DI, Config, Hosting, Logging...)
• ASP.NET Core MVC (Razor Pages)
• Business logic with .NET
• EF Core
• HTML & CSS
• UI-Framework of choice (Bootstrap, Material, Foundation, ...)
• JavaScript (for Interop)
• „Situational Awareness“
(Browser, SignalR, Server Side Rendering, Components, Scope)
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
How to Blazor: Mix proven and new Know-How
Slide 30
Slide 30 text
Blazor und seine verschiedenen
“Geschmacksrichtungen”
Blazor in .NET 7
Server, WebAssembly & Hybrid - Ein Wegweiser
Slide 31
Slide 31 text
35
▪ 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 6 .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 32
Slide 32 text
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Querverweis
Blazor in .NET 7: Server,
WebAssembly und Hybrid – ein
Wegweiser
Patrick Jahr
Dienstag, 11.10. 10:45-11:45
Watfordsaal
Blazor Workshop:
Full-Stack- und Cross-Plattform-
Anwendungen mit C# und
WebAssembly
Patrick Jahr und Marco Frodl
Slide 33
Slide 33 text
37
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Blazor Journey
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Slide 34
Slide 34 text
38
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor WebAssembly Technical Architecture in .NET 6.0 – 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 35
Slide 35 text
39
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Blazor Journey
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Razor → Blazor
HTML, CSS
C#
Pages vs. Components
Slide 36
Slide 36 text
Components
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 37
Slide 37 text
RenderTree
Generated C# Code
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 38
Slide 38 text
Pages
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 39
Slide 39 text
Routing
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 40
Slide 40 text
44
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Blazor Journey
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Class Libraries
Full Stack
DI
.NET-isms
Slide 41
Slide 41 text
Dependency Injection
Components & Services
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 42
Slide 42 text
Code-Behind
Clean code
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 43
Slide 43 text
Web APIs
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 44
Slide 44 text
Web APIs
Entity Framework
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 45
Slide 45 text
Web APIs
DTOs
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 46
Slide 46 text
Web APIs
Validation
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 47
Slide 47 text
Web APIs
HttpClient
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 48
Slide 48 text
SignalR
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 49
Slide 49 text
SignalR
Clients
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 50
Slide 50 text
Authentication
OIDC
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 51
Slide 51 text
gRPC
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 52
Slide 52 text
gRPC
Clients
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 53
Slide 53 text
SEO & Performance
Prerendering
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 54
Slide 54 text
61
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Blazor Journey
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Data Binding
Forms
Validation
Slide 55
Slide 55 text
Data Binding
One-way and Two-way
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 56
Slide 56 text
Forms
Fundamentals
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 57
Slide 57 text
Validation
DataAnnotations
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 58
Slide 58 text
Validation
FluentValidation
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 59
Slide 59 text
3rd Party Components
Native vs. JavaScript Wrapper
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 60
Slide 60 text
67
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Blazor Journey
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
3rd Party
JS Interop
PWA
Web Components
Slide 61
Slide 61 text
JavaScript Interop
.NET-to-JS
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 62
Slide 62 text
JavaScript Interop
JS-to-.NET
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 63
Slide 63 text
MAUI
Cross-Platform Mobile & Desktop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 64
Slide 64 text
Progressive Web Apps
(PWA)
The new Cross-Platform
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 65
Slide 65 text
UI Frameworks
Commercial and Open Source
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 66
Slide 66 text
76
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Blazor Journey
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Blazor Server
Established SPA Frameworks
Cross-Platform
Slide 67
Slide 67 text
77
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 68
Slide 68 text
78
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Server – Disconnected UX
Slide 69
Slide 69 text
✅ Full SPA architecture approach
✅ No latency, code runs locally in the browser
✅ Full support for offline scenarios
✅ Deployment: static files on web server or
cloud storage; Desktop or mobile app packaging
✴️ Initial download size may be large
(assets cached in browser, via Service Worker)
❌ .NET IL code is currently interpreted by special WASM-
version of Mono runtime
❌ Always needs JavaScript/TypeScript, until WASM
standard is being further evolved
✅ Thin Client aproach for light devices
✅ Full .NET runtime on the server, not just .NET Standard
✅ No need for API-based architecture
✴️ All your code is on the server
❌ Inherently stateful execution model
❌ Need for permanent physical connections
❌ No viable option to implement offline features
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Thinktecture Comparison
Blazor WebAssembly Blazor Server
Slide 70
Slide 70 text
80
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-Plattform-Anwendungen mit C# und WebAssembly
Our Thinktecture View
Blazor ⇔ Angular
Slide 71
Slide 71 text
81
Blazor Workshop
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Our Blazor Journey
What is Blazor Web
Assembly?
Blazor WebAssembly
Architecture
Components
all over
SPAs with .NET
Interop &
Integration
Comparison
Data Binding & Forms Current State & Future
Limits
Missing Features
Roadmap
Slide 72
Slide 72 text
.NET 7
Outlook
Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
Blazor Workshop
Slide 73
Slide 73 text
83
▪ 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 74
Slide 74 text
84
▪ 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-Plattform-Anwendungen mit C# und WebAssembly
Resources
Slide 75
Slide 75 text
85
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 76
Slide 76 text
86
▪ 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-Plattform-Anwendungen mit C# und WebAssembly
🗣 Call-to-Action
Slide 77
Slide 77 text
https://www.thinktecture.com/ueber-uns/karriere/
Dankeschön!
Demos aus der Workshop:
https://github.com/thinktecture/basta-fall-2022-
blazor-workshop
https://github.com/thinktecture/blazor-
webassembly-demo
Marco Frodl
https://thinktecture.com/marco-frodl
Patrick Jahr
https://thinktecture.com/patrick-jahr