ASP.NET Core Blazor: moderne Businessanwendungen mit C# & WebAssembly – Full-Stack & Cross-Plattform

Workshop
ASP.NET Core Blazor:
Moderne Businessanwendungen
mit C# & WebAssembly –
Full-Stack- und Cross-Plattform
Christian Weyer
https://thinktecture.com/christian-weyer
@christianweyer
CTO, Co-Founder - Thinktecture AG

View Slide

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
christian.wey[email protected] @christianweyer https://www.thinktecture.com
Christian Weyer
Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
ASP.NET Core Blazor

View Slide

3
§ No longer Windows-only
§ Web-enabled
§ Deployment
§ Updates
§ Native-like features
§ Still: Smart Client
§ Path to Software-as-a-Service (SaaS)
§ APIs are king
§ Possibilities for specialized Microservices
§ SaaS is the big transformation
ASP.NET Core Blazor
Modern Business Applications

View Slide

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? C# & .NET everywhere?
§ In the Frontend: Can Blazor help here?
ASP.NET Core Blazor
OK - what is the problem?

View Slide

5
§ Automatic-Windows-to-Web-conversion-wonder-machine ™
§ Next incarnation of Silverlight (as Blazor is Web-all-the-way)
§ JavaScript killer
ASP.NET Core Blazor
What is Blazor NOT?
X

View Slide

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 DOM interaction &
3rd party integration
§ C# & .NET Standard for client-side
logic → Full-stack C# possible
ASP.NET Core Blazor
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)

View Slide

7
ASP.NET Core Blazor
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

View Slide

Architecture
ASP.NET Core Blazor

View Slide

Architecture
Online
ASP.NET Core Blazor

View Slide

10
ASP.NET Core Blazor
Bird’s-Eye-View: Typical Target Architectures
HTTP API WS API
Service D
HTTPS HTTPS WebSocket
Service A Service B Service C
HTTP API

View Slide

Architecture
Offline
ASP.NET Core Blazor

View Slide

Demo
A typical Business Application
Online-only
ASP.NET Core Blazor

View Slide

13
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 &
Future
PWA
Web Components
Web Assembly

View Slide

”The web has won.”
ASP.NET Core Blazor

View Slide

15
§ 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
ASP.NET Core Blazor
Progressive Web Apps (PWA) – the Web gets more native

View Slide

16
ASP.NET Core Blazor

View Slide

ASP.NET Core Blazor
Offline Capability with Service Worker
Mobile or Desktop system
Remote storage
Server
HTTPS
Browser sandbox
Web App
HTML/JS
Cache storage
fetch
Service Worker

View Slide

ASP.NET Core Blazor
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

View Slide

19
§ 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, efﬁcient, portable ▪ Use existing sandboxing tools
§ Readable and debuggable ▪ Don’t break the Web
ASP.NET Core Blazor
WebAssembly (WASM)
https://twitter.com/getify/status/997098808344547328

View Slide

20
ASP.NET Core Blazor
https://caniuse.com/#feat=wasm

View Slide

21
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 &
Future
Web Assembly
.NET
Razor Components

View Slide

22
ASP.NET Core Blazor
Blazor WebAssembly in the Browser
Blazor
DOM
Web Assembly
.NET
Razor Components

View Slide

23
ASP.NET Core Blazor
Blazor WebAssembly 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 20.09.2020
blazor.boot.json

View Slide

24
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 &
Future
Razor → Blazor
HTML, CSS
C#
Pages vs. Components

View Slide

Pages
Fundamentals
ASP.NET Core Blazor

View Slide

RenderTree
Generated C# Code
ASP.NET Core Blazor

View Slide

Routing
Fundamentals
ASP.NET Core Blazor

View Slide

Components
Fundamentals
ASP.NET Core Blazor

View Slide

29
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 &
Future
Class Libraries
Full Stack
DI
.NET-isms

View Slide

Dependency Injection
Components & Services
ASP.NET Core Blazor

View Slide

Code-Behind
Clean code
ASP.NET Core Blazor

View Slide

Web APIs
Fundamentals
ASP.NET Core Blazor

View Slide

Web APIs
Entity Framework
ASP.NET Core Blazor

View Slide

Web APIs
DTOs
ASP.NET Core Blazor

View Slide

Web APIs
Validation
ASP.NET Core Blazor

View Slide

Web APIs
HttpClient
ASP.NET Core Blazor

View Slide

SignalR
Fundamentals
ASP.NET Core Blazor

View Slide

SignalR
Clients
ASP.NET Core Blazor

View Slide

Authentication
OIDC
ASP.NET Core Blazor

View Slide

gRPC
Fundamentals
ASP.NET Core Blazor

View Slide

gRPC
Clients
ASP.NET Core Blazor

View Slide

42
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 &
Future
Data Binding
Forms
Validation

View Slide

Data Binding
One-way and Two-way
ASP.NET Core Blazor

View Slide

Forms
Fundamentals
ASP.NET Core Blazor

View Slide

Validation
DataAnnotations
ASP.NET Core Blazor

View Slide

Validation
FluentValidation
ASP.NET Core Blazor

View Slide

3rd Party Components
Native vs. JavaScript Wrapper
ASP.NET Core Blazor

View Slide

48
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 &
Future
3rd Party
JS Interop
PWA
Web Components

View Slide

JavaScript Interop
.NET-to-JS
ASP.NET Core Blazor

View Slide

SPA Integration
Web Components
ASP.NET Core Blazor

View Slide

JavaScript Interop
JS-to-.NET
ASP.NET Core Blazor

View Slide

Electron
Cross-Platform Desktop
ASP.NET Core Blazor

View Slide

Capacitor
Cross-Platform Mobile
ASP.NET Core Blazor

View Slide

Progressive Web Apps
(PWA)
The new Cross-Platform
ASP.NET Core Blazor

View Slide

UI Frameworks
Commercial and Open Source
ASP.NET Core Blazor

View Slide

56
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 &
Future
Blazor Server
Established SPA Frameworks
Cross-Platform

View Slide

57
ASP.NET Core Blazor
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

View Slide

58
ASP.NET Core Blazor
Blazor Server – Disconnected UX

View Slide

✅ 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 Standard code is currently interpreted by
special WASM-version of Mono runtime
❌ Always needs JavaScript/TypeScript, until WASM
standard is being further evolved
✅ Thin Client approach 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
ASP.NET Core Blazor
My Personal Comparison
Blazor WebAssembly Blazor Server

View Slide

60
Blazor WebAssembly Angular
Language C# JavaScript, TypeScript
Pre-Requisites 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 with single tech C#, .NET Standard JS/TS (e.g. nest.js)
Size Not really optimized yet; quite large 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
ASP.NET Core Blazor
My Personal View
Blazor ⇔ Angular

View Slide

Azure Deployment
From Blob Storage to Full-blown
ASP.NET Core Blazor

View Slide

62
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 &
Future
Limits
Missing Features
Roadmap

View Slide

63
§ Blazor WebAssembly is in v1 as 3.2.0
§ WASM is an MVP (and SPAs are not a target of it)
§ Mono WASM runtime is immature
§ Blazor is under ongoing development
§ Missing Features, e.g.
§ Modules, Lazy Loading
§ Component Model with CSS Encapsulation
§ AOT Builds
§ Better Developer Tooling (e.g. improved Debugger, Live Reload)
§ Roadmap
§ Improved & enhanced Blazor WASM in .NET 5 timeframe -> November 2020
§ AOT postponed to .NET 6
ASP.NET Core Blazor
Current State & Future

View Slide

64
ASP.NET Core Blazor
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 –
may evolve similar to JS
SPA frameworks, plus
commercial vendors.
The modern web with
PWA &
Web Components can
also work and live with
Blazor WebAssembly.
Blazor Server might be a
fit for internal
applications.
Stateful server-side
execution model.

View Slide

65
§ 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
§ 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
ASP.NET Core Blazor
Call-to-Action

View Slide

66
ASP.NET Core Blazor
Blazor WebAssembly Whitepaper (deutsch)
https://www.thinktecture.com/de/whitepapers/blazor-webassembly

View Slide

Danke!
Bei Fragen kontaktieren Sie mich gerne
Christian Weyer
https://thinktecture.com/christian-weyer
@christianweyer
[email protected]
Demoanwendung:
https://github.com/thinktecture/blazor-webassembly-demo
https://github.com/thinktecture/basta-2020-blazor
Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr:
https://thinktecture.com/de/newsletter

View Slide

68
§ 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/
ASP.NET Core Blazor
Resources

View Slide

ASP.NET Core Blazor: moderne Businessanwendungen mit C# & WebAssembly – Full-Stack & Cross-Plattform

ASP.NET Core Blazor: moderne Businessanwendungen mit C# & WebAssembly – Full-Stack & Cross-Plattform

Christian Weyer
PRO

More Decks by Christian Weyer

Other Decks in Programming

Featured

Transcript

ASP.NET Core Blazor: moderne Businessanwendungen mit C# & WebAssembly – Full-Stack & Cross-Plattform

ASP.NET Core Blazor: moderne Businessanwendungen mit C# & WebAssembly – Full-Stack & Cross-Plattform

Christian Weyer PRO

More Decks by Christian Weyer

Other Decks in Programming

Featured

Transcript

Christian Weyer
PRO