9 : Going out in a Blazor of glory11 Feb 2022
Andy and Rowan discuss Blazor. We've been hearing about Blazor for a long time now and we've both looked into to get an idea of what it is and how it could be used. But since it has now has full support via .net 6 and Steve Sanderson did an updated demo at dotnet conf we wanted to discuss it again and see where it's heading.
Steve Jobs used sleight of hand at the first iPhone presentation.
The first iPhone presentation happened six months before the iPhone was set to hit the market.
At that time, the phone was too buggy to use, so Steve Jobs often had to switch phones behind his desk.
Otherwise, it would run out of RAM and crash.
Everyone agreed that Steve Jobs's iPhone demo back in January 2007 had been flawless—remarkable even. He'd taken a barely working iPhone prototype and, with some engineering sleight of hand, made millions want to buy one right away.
After watching Steve Sanderson dotnet conf Blazor demos, re-ignited interest in Blazor
First there was Blazor Serverside
Then Blazor WASM
.Net 6 - first .Net release with a full Blazor prod framework
What is Blazor and what is it good for
- What is WebAssembly - WASM - Code running in browser
- Currently 40 languages including
- Currently 40 languages including
Introduced in .Net Core 3 (2018)
- Created by Steve Sanderson and David Fowler - out of aspnet team
- Steve Sanderson 2017 demo at NDC in Oslo
Browser + C# + Razor = Blazor
2 different runtime models
- Blazor server
- Server-side Blazor renders the Razor components on the server and updates the webpage using a SignalR connection. The Blazor framework sends events from the web browser, such as button clicks and mouse movements, to the server. The Blazor runtime computes changes to the components on the server and sends a diff-based webpage back to the browser.
- Blazor WebAssembly (WASM) / Client side
- Client-side Blazor is composed of the same code as server-side Blazor; however, it runs entirely in the web browser using a technology known as WebAssembly. The primary difference in Blazor applications that are created in server-side Blazor versus client-side Blazor is that the client-side Blazor applications need to make web calls to access server data, whereas the server-side Blazor applications can omit this step as all their code is executed on the server.
- Because client-side Blazor with WebAssembly executes entirely on a user's browser, it is very fast for many applications.
- You can deploy a client side Blazor app to hosts like Netlify, Heroku, Render and run it for free - so it's easy to write simple C# apps (encoders/decoders, convertors, RSS parsers, call APIs) and then deploy them very quickly for other people to use.
- Blazor server
Tooling / framework support - Fully supported in VS2022 / new in .net 6?
- hot reload
- debugging - improved
- debug on the client (console output) - improved
- JS interop - calling JS from Blazor and calling Blazor from JS
- Dynamic Components
- AOT (Ahead Of Time) Blazor compilation in dotnet 6 is available
- .Net code is compiled to WebAssembly as part of compilation process
- versus now - .Net code being run by an IL interpreter in WebAssembly
- up to 5 times faster perf for cpu intensive work
- BUT comes at a cost
- another build tool, makes builds slower and makes the app size larger
- So sacrificing initial load time for faster runtime performance
- For components - Co-location with js, css - isolate everything
- Now manipulate querystring from Blazor, previously could read querystring
- Page x / y available from mouse events
- Render Blazor from within js - migration is easy now!!
- C# on the front and back ends
- Shared code / reuse existing libraries
- Really easy to test front end code in the same way you'd test normal C# code
- It's fast, faster than JS
- Integrate into WPF, ReactJS use components - recent demo by Steve Sanderson
- You basically get a C# PWA without having to do much - offline functionality after the first download
- It's Open Source - part of the open-source .NET platform
- Security - in WASM the code is all on the clientside so you need to be careful what is inside your code e.g. secrets people can decompile the code
- Large downloads of the runtimes (this is getting better with each release)
- New way of working - another framework to learn
- how it works - components, routing, security
- hosting model
- Who are the MS / community people to follow?
- Packages? Abstractions to make life easier
OS project/utility of the week
bUnit is a testing library for Blazor Components. Its goal is to make it easy to write comprehensive, stable unit tests. With bUnit, you can:
- Setup and define components under tests using C# or Razor syntax
- Verify outcomes using semantic HTML comparer
- Interact with and inspect components as well as trigger event handlers
- Pass parameters, cascading values and inject services into components under test
IJSRuntime, Blazor authentication and authorization, and others
bUnit builds on top of existing unit testing frameworks such as xUnit, NUnit, and MSTest, which run the Blazor component tests in just the same way as any normal unit test. bUnit runs a test in milliseconds, compared to browser-based UI tests which usually take seconds to run.