I want to share my experience of using Blazor for redelevoping an existing website. Blazor is a framework that allows you to write web applications using C# and .NET, without relying on JavaScript. It has many advantages, such as faster performance, great security integration, and easier debugging.
I have dabbled with multiple Javascript front-end frameworks over the years and even wrote one of my own, many years ago, that sat on top of Asp.Net MVC.
I decided to use Blazor for redeveloping a website I have been polishing for a while. I did not want to go down the route of giving over total control, to a JavaScript-based interface, and wanted to start learning something that has a long future to the nth degree. The website was fully functional, but it had some issues with responsiveness, scalability, and maintainability. I wanted to give it a fresh look and feel, and also make it more interactive and user-friendly.
The first step was to create a Blazor WebAssembly project using Visual Studio. This project type allows you to run your C# code directly in the browser, using WebAssembly as a compilation target. I was impressed by how easy it was to set up the project and get started with coding.
The next step was to design the UI components using Razor syntax. Razor is a markup language that combines HTML and C# code. It is very similar to what I was used to in ASP.NET MVC, but with some differences. For example, Blazor uses a component model, where each UI element is a reusable piece of code that can have its own logic and state. This makes the UI more modular and testable. There are some issues on cross communicating between disparate components, but the solution is actually quite elegant (shared objects with event handlers).
One of the coolest features of Blazor is that it supports two-way data binding. This means that you can easily synchronize the UI state with the C# variables, without writing any JavaScript code. For example, if you have an input field that is bound to a C# property, any changes in the input field will automatically update the property value, and vice versa. This also applies to simply one-way fields. e.g. you change a list and the visualisation of that list re-renders automatically.
Another feature that I liked about Blazor is that it supports dependency injection. This means that you can inject services into your components, such as HttpClient for making HTTP requests, or NavigationManager for navigating between pages. You can also inject shared models, allowingh cross communication between different sections of the website. This makes your components more loosely coupled and easier to mock for testing.
The final step was to deploy the website to Azure App Service. This is normally very straightforward, thanks to the built-in tools in Visual Studio. You just had to right-click on the project and select Publish. The website should be up and running in minutes. Unfortunately I had tweaked the Azure B2C security settings incorrect and uncovered a 30 minute caching issue with AzureB2C which I outline on StackOverflow here.
I have to say that I have a lot of fun redelevoping the website using Blazor. It is a great learning experience, and I enjoyed staying with C# and .NET throughout the whole process. I think Blazor is a powerful and promising framework for web development, and I would definitely recommend it to anyone who wants to create modern and interactive web applications.
Blazor has taken years to reach the point I could use it for a production website, but I think it has finally got there. The pages I have completely absolutely scream "speed and responsiveness", making me very happy. As WASM (WebAssembly) is definitely the way of the future, and Blazor is the only C# solution so far, I think this is going to be a great experience.