Scribd
Upload
135 views

Spa Revolution With Webassembly and Blazor: Rainer Stropek - Software Architects @rstropek

This document introduces Blazor, a new web framework using C# and WebAssembly. Blazor allows web apps to be built using C# and Razor components running directly in the browser instead of relying on JavaScript. It discusses how Blazor works, including how C# code is compiled to WebAssembly and interfacing with JavaScript. Examples are provided of basic Blazor app anatomy, data binding, routing, and hosting Blazor apps on both the client-side using WebAssembly or server-side using websockets. While immature, Blazor offers the potential to build full-featured web apps using C# instead of JavaScript.

Uploaded by

Chit Khun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
135 views

Spa Revolution With Webassembly and Blazor: Rainer Stropek - Software Architects @rstropek

This document introduces Blazor, a new web framework using C# and WebAssembly. Blazor allows web apps to be built using C# and Razor components running directly in the browser instead of relying on JavaScript. It discusses how Blazor works, including how C# code is compiled to WebAssembly and interfacing with JavaScript. Examples are provided of basic Blazor app anatomy, data binding, routing, and hosting Blazor apps on both the client-side using WebAssembly or server-side using websockets. While immature, Blazor offers the potential to build full-featured web apps using C# instead of JavaScript.

Uploaded by

Chit Khun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

SPA Revolution with WebAssembly and Blazor

Rainer Stropek | software architects


@rstropek
Samples:
https://github.com/software-architects/learn-blazor
https://learn-blazor.com
Blazor Introduction

Rainer Stropek
software architects gmbh

ASP.NET Browser

Blazor
Web http://www.timecockpit.com
Mail [email protected]
Twitter @rstropek

Saves the day.


https://commons.wikimedia.org/wiki/File:Images_200px-ISO_C%2B%2B_Logo_svg.png https://commons.wikimedia.org/wiki/File:Csharp_Logo.png
https://commons.wikimedia.org/wiki/File:Wikimedia_Foundation_Servers-8055_14.jpg

ttps://en.wikipedia.org/wiki/File:Google_Chrome_icon_(September_2014).svg
ttps://commons.wikimedia.org/wiki/File:Antu_firefox.svg
ttps://commons.wikimedia.org/wiki/File:Microsoft_Edge_logo.svg
https://commons.wikimedia.org/wiki/File:Silverlight_Logotyp.jpg
https://de.wikipedia.org/wiki/Datei:Unofficial_JavaScript_logo_2.svg
https://de.wikipedia.org/wiki/Datei:AngularJS_logo.svg

https://de.wikipedia.org/wiki/Datei:Angular_full_color_logo.svg
https://de.wikipedia.org/wiki/Datei:Node.js_logo.svg
WebAssembly
http://webassembly.org/

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

https://commons.wikimedia.org/wiki/File:Web_Assembly_Logo.svg
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
ASP.NET 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 BlazorDemo.csproj

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 BlazorDemo.sln)
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 ASP.NET Core
RestApi Sample
Show and discuss Startup.cs
Microsoft.AspNetCore.Blazor.Server 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\RestApi.Server\out:/app -w /app -p 8081:5000 microsoft/dotnet:2.1.4-aspnetcore-
runtime-alpine dotnet RestApi.Server.dll
Razor Walkthrough
Razor
Counter.cshtml Razor file
Show generated C# file Counter.g.cs → Razor becomes C#

BlazorComponent
Speak about Components-based architecture
Show DynamicRenderTree in BlazorPages app

Blazor templates quick tour (BlazorPages sample)


OneWayDataBinding.cshtml
TwoWayDataBinding.cshtml
EventBinding.cshtml
Initialization.cshtml
ManualRefresh.cshtml
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 window.say
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 Startup.cs in DependencyInjection sample
Open CustomerList.cshtml in DependencyInjection sample – @inject
Speak about DI basics
Open Repository.cs in DependencyInjection sample – constructor injection

HttpClient
Open FetchData.cshtml 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)
HelloUniverse.cshtml
HelloPlanet.cshtml
HelloWorld.cshtml

Links
MainMenu.cshtml
Talk about base tag in index.html
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 blazor.server.js reference in index.html
Show UseServerSideBlazor<T> in Startup.cs

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 [email protected]


Web http://www.timecockpit.com
Twitter @rstropek

Thank your for coming!


Saves the day.

You might also like