9 : Going out in a Blazor of glory

Random fact

Steve Jobs used sleight of hand at the first iPhone presentation.

January 2007

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.

Introduction

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

  • Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components - like most of the current frameworks small components are created and used together to for the bigger application - implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.
  • What is WebAssembly - WASM - Code running in browser
    • Currently 40 languages including
      • C, C++, Python, Rust, Java, Go, Javascript (via Ductape), Kotlin, Lisp, Perl, Php

• 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.

• 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!!
    • builder.RootComponents.RegisterForJavaScript<Greeting>(identifier: "my-greeting");

• Pros

  • 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

• Cons

  • 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
    • structure
    • hosting model

Community?

• Who are the MS / community people to follow?
  • Steve Sanderson
  • https://chrissainty.com/
  • https://jonhilton.net/
  • Carl Franklin's Blazor Train
  • Lots of videos following dotnet conf
• Packages? Abstractions to make life easier
  • https://github.com/Blazored
  • https://www.matblazor.com/
  • many more....

OS project/utility of the week

https://bunit.dev/

https://github.com/bUnit-dev/bUnit

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
• Mock 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.