SPA Revolution with WebAssembly and Blazor
Rainer Stropek | software architects
@rstropek
Samples:
[Link]
[Link]
Blazor Introduction
Rainer Stropek
software architects gmbh
[Link] Browser
Blazor
Web [Link]
Mail rainer@[Link]
Twitter @rstropek
Saves the day.
[Link] [Link]
[Link]
ttps://[Link]/wiki/File:Google_Chrome_icon_(September_2014).svg
ttps://[Link]/wiki/File:Antu_firefox.svg
ttps://[Link]/wiki/File:Microsoft_Edge_logo.svg
[Link]
[Link]
[Link]
[Link]
[Link]
WebAssembly
[Link]
Binary instruction format
for a stack-based VM
For Browser and beyond
Portable compilation target
for high-level languages
like C/C++/Rust
Open Standard
Why?
Performance
Safe
[Link]
Some Facts about WASM
Very different from .NET‘s IL
Much simpler
Linear memory
No GC
Cannot access the DOM = no UI
(…yet)
JavaScript interop exists
WASM calls JS
JS calls into WASM
WASM and the CLR
C++ can be compiled into WASM
The .NET CLR is written in C++
Can the .NET CLR run on WASM?
Yes, it can – with mono
Blazor
Built on the Mono WASM Runtime
[Link] Razor Template Syntax
The .NET Core you know and love…
Demos
Anatomy of a Blazor app
JS Interop
Data Binding
Router
RESTful Web APIs
Demo
Anatomy of a Blazor App
dotnet command line
dotnet new blazor
dotnet build
Add to a new solution
dotnet new sln
dotnet sln add [Link]
Publish Solution
dotnet publish -c Release -o out
Review content of out folder
VS2017
Open VS2017 and show how to create Blazor app there
Show Blazor language service extension
Open project in VS2017 (start [Link])
Running a SPA Blazor App
dotnet command line
dotnet blazor serve
F5 in Visual Studio – show .csproj
Look at Network tab in Chrome Dev Tools
Static hosting
Prove SPA nature by hosting app in Chrome Dev Web Server (chrome://apps)
Speak about rewrite rules
Anatomy
of a Blazor App
Loading
HTML, CSS, JS
WASM (Mono)
.NET DLLs
Hosting in [Link] Core
RestApi Sample
Show and discuss [Link]
[Link] in UseBlazor<T>
Show and discuss shared library (Shift+F12)
Publish and discuss result
dotnet publish -c Release -o out
Run hosted app in Docker container: docker run -v C:\Code\GitHub\learn-
blazor\samples\RestApi\[Link]\out:/app -w /app -p 8081:5000 microsoft/dotnet:2.1.4-aspnetcore-
runtime-alpine dotnet [Link]
Razor Walkthrough
Razor
[Link] Razor file
Show generated C# file [Link] → Razor becomes C#
BlazorComponent
Speak about Components-based architecture
Show DynamicRenderTree in BlazorPages app
Blazor templates quick tour (BlazorPages sample)
[Link]
[Link]
[Link]
[Link]
[Link]
Anatomy
of a Blazor App
Razor Code Generation
JavaScript Interop
Basics
Open two-way-data-binding in BlazorPages sample
Break on node removal at You are an administrator
Trigger node removal and speak about call stack
Coded JS Interop
Open interop-basics in RestApi sample
Set breakpoint in [Link]
Trigger breakpoint and speak about call stack
Open auto-complete in RestApi sample
Set breakpoints in fillAutoComplete and select callback
Trigger breakpoint and speak about call stack
Anatomy
of a Blazor App
Rendering
JavaScript Intertop
Dependency Injection
Basics
Open [Link] in DependencyInjection sample
Open [Link] in DependencyInjection sample – @inject
Speak about DI basics
Open [Link] in DependencyInjection sample – constructor injection
HttpClient
Open [Link] in RestApi sample
Speak about HttpClient standard service
HttpClient(HttpMessageHandler) Constructor
HttpClient creation in Blazor (Browser)
BrowserHttpMessageHandler in Blazor (Browser)
JS implementation using fetch API
Show call stack for Web API calls in RestApi service
Router
Basics (in RouterDemo sample)
[Link]
[Link]
[Link]
Links
[Link]
Talk about base tag in [Link]
Server-Side Hosting
Client-side
Browser Server All benefits of a SPA
Restrictions because of WASM
UI Thread dotnet Maturity of tooling and runtime
Larger initial download
Blazor
Blazor
(JS) WS
Server-side
Same Blazor programming model
Full .NET environment
Smaller initial download
More server resources
No offline support
Server-Side Hosting
Create new Blazor app with Server-Side Hosting
Code Walkthrough
Show [Link] reference in [Link]
Show UseServerSideBlazor<T> in [Link]
Debug
Run app
Show WebSockets traffic in Chrome Dev Tools
Set breakpoint in counter increment, show it hitting
What else is in the box?
Debugging
Early prototype
Layouts
Master pages
Many details about component model
E.g. Child content
So what?
Is Blazor the Angular/React/Vue Killer?
Should I use it?
JS-based Frameworks Blazor
TypeScript C# and JavaScript/TypeScript
Huge ecosystem of tools and components Limited community
Mature Immature tools
Feature-richness Limited functionality
Proven for small and large projects (B)Leading Edge
Web development skills necessary Less web development skills necessary
No reuse of C# code possible Reuse of C# code possible
Maturity of C#/.NET
Learning More…
THANK YOU FOR COMING!
Blazor Intro
Rainer Stropek
software architects gmbh
Q&A Mail rainer@[Link]
Web [Link]
Twitter @rstropek
Thank your for coming!
Saves the day.
