Part 1 of the Blazor Series

Browser + Razor == Blazor


.NET running in the browser. Yes that's right, No plugins. This is not JavaScript transpilation. This is our .NET code running in the browser.

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.

Blazor is a feature of ASP.NET, the popular web development framework that extends the .NET developer platform with tools and libraries for building web apps.

What does that mean in layman terms?

A typical scenario for building a web application using ASP.NET, is to drop .NET code on a server and that code generates HTML & JSON in response to requests from the browser.

In a nutshell

  • Blazor is a SPA framework
  • It’s relatively new from Microsoft
  • It means we can actually use C# to create client side web applications

First Class Citizen

It’s a core part of ASP.NET Core so basically a first class citizen now. As a result Blazor updates will be rolled out as part of the ASP.Net Core release cycle.

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux. - dotnet/aspnetcore
Blazor source code under the components feature set of ASP.NET Core

The Front-End landscape as we have known it

As developers, we have become accustomed to Full-Stack development with more platforms and frameworks emerging, particularly with JavaScript on the client and server.

It is not uncommon for our back-end logic to reside in a cloud with micro services, server-less or more traditional rest APIs using Net and Cloud and our clients to be written in a framework like Angular or a library such as React and obviously a whole host of other technologies permutations, the list of options is shifting constantly.

Some aspirational achievements

If we look back at the not so distant past for .Net we can even see the likes of Silverlight which had the unfortunate limitation of requiring an activeX runtime object which Apple decided flatly not to support. However the idea was born for being able to run cross platform Server side & Client side applications using .Net with re-use of the same .Net components.

The problem I am sure you will come across on a day to day with Full Stack Development is context switching. Bridging between different languages, and eco-systems adds cost and complexity.  One minute you are writing JavaScript or typescript and spending time working with the framework or library hierarchy and patterns to solve problems and then we are working on C# and .Net, each with their own package management and configuration issues.

Finally .NET, End to End

C# code running on a .NET runtime in the browser

Blazor is really set to revolutionise this workflow and enables us to write .Net code, much of which is shared both on the client and server, where that makes sense.

Using Blazor we can write responsive Web UI components with C# and Razor, share code between the client and server and when we need to call into JavaScript to utilise an API or Library, we still can with JavaScript Interop.

Hosting Models

Blazor can operate in a number of different modes or hosting models. At the time of writing this article i can count at least 5.

  • Blazor Server
  • Blazor WebAssembly
  • WebWindow
  • Electron + Blazor
  • Mobile Blazor Bindings (MBB)

Steve Sanderson refers to determining the most applicable hosting model using the Blazor spectrum.

There are two hosting models that i would recommend exploring in the first instance as a starting point as they are either in production already or very close and those are:

Blazor Server and Blazor WebAssembly.

The great news is that any investment you make in terms of learning either, will stand you in good stead for all the others. The reason for this is the components are mostly interchangeable. The differences you will encounter depending on the hosting models you choose are primarily around the way the site is delivered and the way the Blazor framework interacts with the DOM.

We will also be diving deeper into each hosting model and highlight some use cases for each but for now let's build on what we have looked at here and take a look in some more detail.

Our next two articles will break each of them down.