Blazor - An Introduction

Before we begin
● Blog post from last week
○ https://bit.ly/2EujDZu
● Because self plagiarism is
cool
● But I just cited my source,
so is it self plagiarism?

What Is Blazor?
● New tech
● Web Assembly
● .NET in the browser!
heresy
● Pretty cool
● ASP.NET Core 2.1
● Is currently at version 0.1.0
○ 0.2.0 is due in around a week
○ Date subject to change, obvs

● Not really
● Based on .NET Anywhere
initial commit: Aug 28, 2010
● Was left for 6 years
most recent commit: Jan 23, 2012
● Steve Sanderson ran with it
● Early demo @ NDC Oslo 2017
How New?

Vague Timeline - Not To Scale
August 2010
.NET Anywhere
initial commit
March 22nd, 2018
Public Preview
Announced
May 25th, 2017
Steve Sanderson
Blazor initial commit
Sept 3rd, 2017
.NET Anywhere is
abandoned
Summer 2017
ASP.NET Core team
hold an internal
hackathon at Microsoft,
working on Blazor
June 2017
Steve Sanderson
shows Blazor off at
NDC Oslo
April 3rd, 2018
ASP.NET Community
Standup showing off
Blazor public preview
March 27th, 2018
Internal hackathon/lab
at work using Blazor
March 2017,
Web Assembly 1.0
released
Today
???
Steve Sanderson
discovers .NET
Anywhere

How Does It Work?
● Web Assembly creates Mono env
● Mono env loads Your DLL
● Your DLL loads it’s dependencies
● Voila!
Kinda

Non-Pokémon Version
● ASP NET Core Middleware
○ app.UseBlazor<Client.Program>();
● Looks for
○ <script type="blazor-boot"></script>
● Is replaced at runtime by
○ blazor.js
● Which calls
○ Mono.js
● Which creates a WebAssembly instance
● Which loads the app

Warning!
● Before .NET Core 2.1 Preview 1:
○ No IL Shaking
○ Blazor apps were HUGE!
● After .NET Core 2.1 Preview 1:
○ Full IL Shaking
○ Blazor apps are small

IL Shaking
● Bloody Clever
● Looks at referenced DLLS
● Re-builds them; only what you’re calling
● Serves them in place of “full” DLLs

How Do I UI?
● Blazor Components
● Looks like Razor
● Dealt with like TagHelpers/Angular Components
<div id="search-area">
<RandomPokemonSearch OnGetPokemon=state.GetPokemon/>
</div>

Dan Roth
● Senior Program Manager on the ASP.NET team
● Is Steve Sanderson’s boss
Steve Sanderson
● Program Manager on the ASP.NET team
● Invented Knockout.js

Blazor components are a little different [to Razor Pages]. They are similar to stuff that you do on the server in that they're
both using the Razor syntax. You're using C# and HTML to decide, like, what markup you want.
But on the server what's really happening is your basically generating HTML as, effectively, a string, then you're sending it
down to the browser and having the browser render that HTML doing it's normal thing.
With Blazor components it's actually a little different. We take the Razor files, these cshtml files, and just like on the server,
they do get compiled into a class, and it's the class that basically has the compile functionality for generating the
corresponding markup.
But in Blazor those classes get downloaded actually into the browser as a DLLs. Whereas on the server side you're just
download a string, with Blazor you're downloading the compiled classes.
And then client side in the browser the Blazor runtime will ask components to render and those components will render
their markup, using the logic that you specify, into a Rendering Tree. And then Blazor's runtime will handle updating the
DOM in the browser, based on off of that rendering tree.
And as components change, and they re-render themselves, [Blazor’s runtime] will diff the new Rendering Tree that the
component just created with the current one and update the DOM accordingly, making it very efficient so you're not
touching the DOM too much. Like, you're basically doing it as little as you can.

It’s About to Get Technical
<div id="search-area">
<RandomPokemonSearch OnGetPokemon=state.GetPokemon/>
</div>

<div class="row">
<div class="ui two column centered grid">
<input type="text" @bind(PokemonId) />
</div>
<div class="ui two column centered grid">
<button @onclick(() => OnGetPokemon(PokemonId)) type="button" class="ui
secondary button">Search</button>
</div>
</div>
@functions
{
public Func<string, Task> OnGetPokemon { get; set; }
public string PokemonId { get; set; }
}

public class PokeState {
public Pokemon PokemonSearchResult { get; private set; }
public bool SearchInProgress { get; private set; }
public event Action OnChange;
private readonly HttpClient http;
public PokeState(HttpClient httpInstance) { http = httpInstance; }
public async Task GetPokemon(string id) {
SearchInProgress = true;
NotifyStateChanged();
PokemonSearchResult = await
http.GetJsonAsync<Pokemon>($"https://pokeapi.co/api/v2/pokemon/{id}/");
SearchInProgress = false;
NotifyStateChanged();
}
private void NotifyStateChanged() => OnChange?.Invoke();
}

Requirements? What Do I Need In Order To Blazor?

Tooling
● .NET Core SDK 2.1.300 Preview 1
○ OR .NET Core SDK 2.1 Preview 2
● dotnet new -i Microsoft.AspNetCore.Blazor.Templates
● Visual Studio 15 (2017) Preview
● ASP.NET Core Blazor Language Services (visx)
● That’s about it

Clients
● Any “Modern” Browser
○ Although IE and Edge don’t run Blazor at full speed

What Is Blazor Good At
● Single Page Applications
● Esp. if there’s an API to talk to
● Totally RAD and epically Agile
● I’m building a blogging engine with it!
○ Am I mad?
○ Yes!
○ Will it work?
○ Maybe!

Pitfalls Don’t Fall For These!

Lookout Below!
● Client => Make a change
● Server => stop and start
● There is no live reload
○ AKA Hot Module Replacement
○ Supposed to be in the 0.2.0 preview
○ “One update for the Blazor 0.2.0 preview release: we've hit a snag getting live reload working
properly, so it's not going to make it into 0.2.0. We'll revisit it again for a future preview
release”
● Docker!
○ Client’s wwwroot dir needs to be included manually
○ Otherwise Static files middleware steps in, with it’s big soviet boots

What Can Blazor Do?
● Anything JS can do
○ I can do better/I can do anything better than...
○ Whoops, everyone’s looking
○ Quick! Act nonchalant
● You can’t create TCP connections in Blazor
○ That’s a great example
○ Shh! They’re reading this bit

Exceptional Exceptions
● Remember:
○ Your .NET code is running within WASM
● When an exception occurs:
○ Bubbles up to WASM
○ WASM converts it to a JS error
○ JS error is reported via mono.js
○ JS error is printed to the console
○ App continues to run

Resources? Where Can I Learn The Things?

Learning The Stuff
● https://www.youtube.com/watch?v=_b_fUq5DU0U
○ Last week’s community standup
● https://learn-blazor.com
● https://codedaze.io/tag/blazor/
● https://github.com/torhovland/realworld
○ Is a clone of Medium (the blogging engine)
○ Uses a whole bunch of different technologies

Blazor Examples
● https://pokeblazor.azurewebsites.net
○ Clearly the greatest app in the world
● https://blazor-whois.azurewebsites.net
○ Pre IL Shaking
○ Takes 40-70 seconds to download
● https://kojin.azurewebsites.net/
○ Colleague’s App

Blazor - An Introduction

More Related Content

What's hot (20)

Similar to Blazor - An Introduction (20)

Recently uploaded (20)

Blazor - An Introduction

Editor's Notes