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?
WebAssembly and Web Standards
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.
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.
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.
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.
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.
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.
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:
- Telerik UI for Blazor - check out the Stocks Portfolio demo built using their components!
- MatBlazor - Material Design components for Blazor
- ChartJs.Blazor - A Blazor library that wraps Chart.js
- eShopOnBlazor - migration of an ASP.NET Web Forms app to Blazor
In the next article, I'll show how to build an interactive Blazor WebAssembly application and host it on GitHub pages.