Blazor is a new web framework that allows web applications to be written in C# instead of JavaScript. It uses WebAssembly to run .NET code directly in the browser. Developers write Blazor apps using Razor components with HTML and C# code. At runtime, the Blazor runtime compiles the Razor components to WebAssembly, which generates the app's rendering tree and updates the DOM efficiently as the app runs. Blazor provides a way to build interactive client-side web UI using .NET instead of JavaScript.
2. 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?
4. 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
5. ● 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?
6. 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
11. 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
13. 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
14. IL Shaking
● Bloody Clever
● Looks at referenced DLLS
● Re-builds them; only what you’re calling
● Serves them in place of “full” DLLs
16. How Do I UI?
● Blazor Components
● Looks like Razor
● Dealt with like TagHelpers/Angular Components
<div id="search-area">
<RandomPokemonSearch OnGetPokemon=state.GetPokemon/>
</div>
17. 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
18. 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.
19. It’s About to Get Technical
<div id="search-area">
<RandomPokemonSearch OnGetPokemon=state.GetPokemon/>
</div>
28. 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!
30. 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
31. 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
32. 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
34. 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
35. 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
Microsoft hackathon: https://github.com/aspnet/Blazor-Hackathon
.NET Anywhere abandoned: https://github.com/chrisdunelm/DotNetAnywhere/commit/083b831656fa37f39f37a05b08ccc98d84919366
NDC 2017: https://www.youtube.com/watch?v=MiLAE6HMr10
ASP.NET Community Standup showing off Blazor: https://www.youtube.com/watch?v=_b_fUq5DU0U
https://gist.github.com/davidfowl/8939f305567e1755412d6dc0b8baf1b7 <- devs should get this
https://codeshare.co.uk/blog/what-is-net-core-7-things-you-should-know/ <- point 7 (non-devs should get this)
1st gen: ASP.NET Core Middleware (UseBlazor<T>)
2nd gen: Looks for script tag (type="blazor-boot")
3rd gen: Is replaced by blazor.js
4th gen: Which calls Mono.js
5th gen: Which calls monno.wasm, creating a .NET platform
6th gen: Which calls your app
Have Rider open, with Pokeblazor loaded
Blazor.js loads Mono.js
Mono.js loads Web Assembly (via mono.wasm)
Web Assembly sets up a Mono environement
Mono loads your compiled .NET binary
You .NET binary loads all of it’s dependencies
Two fire icons are Blazor.js (left) and Blazor runtime (right)
Site: https://blazor-whois.azurewebsites.net/
“The Blazor components look a lot like Razor Pages, are they the same?”
For those who want to look it up, it’s at 22 minutes and 47 seconds
https://www.youtube.com/watch?v=_b_fUq5DU0U
Transition to https://pokeblazor.azurewebsites.net
Transition to https://pokeblazor.azurewebsites.net
Check out the code at https://github.com/GaProgMan/PokeBlazor
Blazor in docker issue: https://github.com/aspnet/Blazor/issues/376