Blazor is a single-page web application (SPA) framework built on .NET that runs in the browser with Mono's WebAssembly run-time, or server-side via SignalR. Blazor features a component architecture, routing, a virtual DOM, and a JavaScript Interoperability (interop) API. Currently, Blazor is in an experimental state which allows for rapid development, iterations, and as implied, experimentation.

1. DevUp 2018
@EdCharbeneau #Blazor

2. Ed Charbeneau
Developer Advocate for Progress<Telerik>
Author<T>
Podcast => “Eat Sleep Code”
Twitter.Where(user == @EdCharbeneau)

3. Hello Blazor

6. What if…
@EdCharbeneau #Blazor

7. Client-side Web
Was C#?
@EdCharbeneau #Blazor

8. Previous Attempts
• WebForms
• Silverlight

9. C#/Razor + HTML
Blazor is an experimental .NET web
framework using C# and HTML that runs in
the browser.
Browser + Razor = Blazor

10. Just the FAQs
What it is
• Client Side C#
• Web Standard Technologies
• WebAssembly
• .NET Standard
• Experimental
What it’s NOT
• A Plugin
• ASP.NET WebForms
• Trans-piled JavaScript

11. Key Differences
Blazor
• .NET Standard Libs
• MS Build
• C#
JavaScript
• NPM Packages
• WebPack
• TypeScript / JavaScript

12. @EdCharbeneau #WASM

13. WebAssembly (wasm)
WebAssembly is a web standard that defines
an assembly-like format for executable code
in Web pages.
It’s what makes Blazor possible.

14. JavaScript
JavaScript (.js)
Parser
Compiler
JIT Interpreter
Native Web APIs
(DOM, file storage, etc)
HTML (.html)
Inline JS
JavaScriptRuntime
Browser

15. WebAssembly
JavaScript (.js)
Parser
Compiler
JIT Interpreter
Native Web APIs
(DOM, file storage, etc)
HTML (.html)
Inline JS
JavaScriptRuntime
Browser
WebAssembly
(.wasm)

16. WebAssembly
JavaScript (.js)
Parser
Compiler
JIT Interpreter
Native Web APIs
(DOM, file storage, etc)
HTML (.html)
Inline JS
JavaScriptRuntime
Browser
WebAssembly
(.wasm)
C++ RUST Go .NET

17. Blazor Apps
Parser
Compiler
JIT Interpreter
Native Web APIs
(DOM, file storage, etc)
JavaScriptRuntime
Browser
blazor.js
mono.wasm
Blazor Page (.cshtml)
mono.js
netstandard.dll app.dll
Interop layer

18. Blazor Framework Features
• Virtual DOM
• Components (MVVM like)
– Data Binding
– Event Handling
• Layouts
• Dependency Injection
• Routing
• JavaScript/C# Interop (bi-directional)

19. Components
<h1>@headingText</h1>
@functions {
private string headingText = “Hello World";
}

20. Routing
@page "/RouteParameter"
@page "/RouteParameter/{text}"
<h1>Blazor is @Text!</h1>

21. Dependency Injection
@inject HttpClient Http
@functions {
WeatherForecast[] forecasts;
protected override async Task OnInitAsync()
{
forecasts = await Http.GetJsonAsync<WeatherForecast[]>(uri);
}
}

22. @EdCharbeneau #Blazor

23. Prerequisites
• .NET Core 2.1 SDK (2.1.300 or later).
• Visual Studio 2017 15.7
• Blazor Language Services extension from the Visual
Studio Marketplace.

24. File > New Project
• Blazor
• Blazor (ASP.NET Core
Hosted)
• Blazor Server-Side
– Aka Razor Components

25. Demo Time
@EdCharbeneau #Blazor

26. Blazor Client-Side vs Server-Side
Blazor Razor Components
Shipping in ASP.NET
Core 3.0

27. Blazor on the desktop?

28. Ed Charbeneau

29. Twitch.tv/EdCharbeneau

30. Resources
• Links
– Blogs.Telerik.com
– EdCharbeneau.com
– Twitch.tv/EdCharbeneau
– Blazor.net
• Twitter
– @EdCharbeneau

31. Ed Charbeneau
Developer Advocate for Progress<Telerik>
Author<T>
Podcast => “Eat Sleep Code”
Twitter.Where(user == @EdCharbeneau)