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:

• Microsoft Blazor tutorial
• Blazor University

What is next?

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

• Working with Sass in a Blazor project
• Creating custom form components
• Creating nested components
• Better form validation with FluentValidation