In this article, I'll provide an overview of Blazor, Microsoft’s framework for building interactive client-side web UI using .NET code instead of JavaScript.

I’ll explain, how Blazor improves productivity and can reduce the amount of code it takes to deliver engaging, interactive websites.

Demand for a better user experience

Technology changes, and the demand for a better user experience has led to an increase in the level of sophistication required to build and deploy software for the web. Today's applications are expected to be scalable, resilient, interactive, and secure.

To meet these challenges, front-end frameworks and third-party libraries arrived to help us assemble engaging, modular applications using reusable components, but at what cost?

As more logic is put into the front-end of your application, you end up maintaining multiple frameworks. And if your back-end technology isn’t JavaScript then you’ll likely end up with code duplication of data entities and other concerns like state management, configuration, and deployment.

Perhaps that’s why, even as new font-end frameworks continue to arrive, interest and satisfaction in them is on the decline. The 2019 State of JavaScript Survey highlighted developer dissatisfaction due to bloat and complexity, steep learning curves, and having to learn new programming styles.

Source: 2019 State of JavaScript Survey

 

WebAssembly and Web Standards

As technology changes and new standards appear, old solutions and workarounds fall by the wayside. For example, jQuery became popular because it simplified working with the DOM. However, much of what jQuery provides is now baked into JavaScript and browser standards. So nowadays, we see a movement away from jQuery.

Unlike 15-20 years ago when web standards moved slowly and hampered progress, today's standards progress at a much faster rate thanks to working groups and greater collaboration.

One important recent addition to web standards is WebAssembly (WASM for short). WebAssembly is a standardized binary code format that is now supported by modern browsers.

You can refer to Mozilla WASM support reference and the WebAssembly feature support table to learn more about current support for WebAssembly.

WebAssembly provides a way to write code in your language of choice and compile it to WebAssembly which can run in a browser on any platform you like at near-native speed.

Its impressive performance is due to the small file size and because it is already in a native binary format when it arrives in the client. And although new, WebAssembly offers a fast path to adoption as it integrates with JavaScript at the ES6 module interface level. This means that any WebAssembly module has interoperability with existing ES6 modules.

Enter Blazor

In 2017, Microsoft started work on a new, experimental framework named Blazor. Blazor leans on ASP.NET and Razor to provide a component-oriented programming model which can then be compiled down to WebAssembly.

Using Blazor, .NET developers can develop rich, interactive client applications using C# and ASP.NET without JavaScript.

And because Blazor can compile to WebAssembly which is an open standard, Blazor applications run without needing plug-ins in any modern browser, including mobile browsers.

There are currently two primary deployment models for Blazor applications:

Standard SPA hosting (Blazor WebAssembly)

  • SPA (Single Page web Application) style - same as existing front-end frameworks such as React, Angular, etc.
  • Relies on APIs to request data
  • Uses a WebAssembly version of .NET to run in the client
  • Can be statically hosted on any CDN and including services such as Azure static sites and GitHub pages

Server Hosted (Blazor Server)

  • Like ASP.NET which requires a server
  • Does not need the full .NET WebAssembly payload to be downloaded to the client
  • Natively uses SignalR to communicate with the server

The good news is that Blazor is production ready. In September 2019 Microsoft introduced Blazor Server with .NET Core 3.0 and followed shortly after with the release of Blazor WebAssembly which shipped with the .NET Core 3.1 SDK in May 2020. November this year saw the release of .NET 5 which came with many enhancements for both Blazor Server and Blazor WebAssembly.

Why Blazor

With Blazor we can develop full-stack web applications without needing to learn new libraries, techniques, tools, or frameworks.

Client-side pages leverage the same hosting setup, configuration, logging, and dependency injection system as any other ASP.NET web application.

You will find familiarity with the same razor syntax, layout pages and ASP.NET routing services that you already know. And it integrates with .NET authentication and authorization security too.

Because it is just .NET code, you can use common libraries and share types between front and back-end code. This simplifies working with things like dates and time zones and allows you to use .NET types such as `HttpClient` when making HTTP requests.

In terms of tooling, you get full debugger support for full-stack debugging, CLI commands are supported and you will use the same build systems and package managers such as MSBuild, NuGet, and npm in your development workflow.

What next?

There is no better time to get started with Blazor than right now.

According to the current proposals for .NET 6, there are many new Blazor features under consideration. These include developer productivity enhancements and a new hybrid desktop application deployment model.

Blazor is supported by a rich third-party ecosystem of components and has a bright future due to new features and the inevitable growth in WebAssembly as it matures in the coming years.

You don’t even need to plan a complete redevelopment to take advantage of Blazor. You can use islands of Blazor code in existing ASP.NET MVC and Razor Pages applications to start migrating away from JavaScript today.

Conclusion

In this article, I’ve given an overview of Blazor and WebAssembly and described the productivity benefits they can provide.

If you need some inspiration, there are dozens of great sample sites and a rich third-party component ecosystem in place. Some examples to help get you started including:

In the next article, I'll show how to build an interactive Blazor WebAssembly application and host it on GitHub pages.