Blazor #1 - What is this Blazor thing all about?

Earlier this year, I was lucky enough to work on a couple of small Blazor based projects. I promised some of my colleagues at Kainos that I would share some of my learnings - I’m sorry its taken so long, but here is my first in what I hope will become a beautiful little series of posts.

What is Blazor?#

Blazor is a frontend framework from Microsoft that you can use to build interactive client-side Web UIs with C# instead of JavaScript. It supports both server-side rendering and client interactivity in a single programming model.

Blazor comes in 2 main hosting models:

  • Blazor Server
  • Blazor WebAssembly

Blazor Hybrid is also an option, where it can be used to build native client apps using a hybrid approach. Hybrid apps are native apps that leverage web technologies for their functionality.

Why Blazor?#

Using .NET for client-side web development offers some interesting advantages to .Net developers:

  • C# developers write in a language already familiar to them, which can improve productivity in app development and maintenance.
  • Projects can leverage the well established .NET ecosystem of .NET libraries.
  • Projects benefit from .NET’s performance, reliability, and security.
  • Development can develop on any environment of their choosingL macOS, Linux, or Windows.

What is the difference between Blazor Server and Blazor WebAssembly?#

Blazor Server and Blazor WebAssembly are both options for building client-side applications in C#. They differ in a few key ways:

Blazor Server:

  • Runs on the server in ASP.NET Core
  • UI interactions are handled over a SignalR connection
  • UI is rendered on the server in a headless browser
  • Code is executed on the server
  • Requires a connection to the server
  • Works with any browser that supports SignalR
  • Supports scenarios where the app needs to access existing web apps or web APIs running on the server

Blazor WebAssembly:

  • Runs in the browser on a WebAssembly-based .NET runtime (Mono)
  • UI interactions are handled directly in the browser
  • UI is rendered directly in the browser
  • Code is executed in the browser
  • Works with all modern browsers
  • Supports scenarios where the app needs to be a fully client-side experience

Generally speaking, Blazor Server apps:

  • Have lower bandwidth usage
  • Have lower latency
  • Have faster UI updates

Meanwhile, Blazor WebAssembly apps:

  • Have smaller download sizes
  • Have faster startup times
  • Can run in the browser without a connection to the server

Getting started with Blazor#

There are plenty of resources out there to get started with Blazor. I would recommend the following as a great starting point:

What is next?#

I am going to start a series of posts to share my learnings. I will be covering the following topics: