Blazor
What is Blazor and what can you use it for?
Develop web apps in .NET without Javascript!
There are several frameworks available that can be used to build an intelligent web app (also referred to as a SPA / Single Page Application). Commonly used examples of such frameworks are Angular, React and Vue. When using these frameworks your code has to be written in Javascript or Typescript, because until recently browsers only supported Javascript.
Having to pore over Javascript to build web apps is not ideal if you specialise in C#.NET and are able to develop backends using ASP.NET and native iOS and Android apps using C#.NET and Microsoft Xamarin. Fortunately, with Blazor this is no longer necessary.
Compiled .NET code in your browser
On May 19 of 2020 Microsoft officially released Blazor WebAssembly. Blazor enables you to run complicated .NET code in the browser you use. The entire .NET Standard Library is available to you and you don’t need a plugin, like you used to when using Silverlight.
Blazor is based on WebAssembly which supports all browsers, including iOs and Android browsers.
Sold
Initially, I thought the examples of Razor where HTML- and C#-code combined in one document looked very messy; click here to see what I mean. But in practice (unlike in the examples) HTML- and C#-code are divided into two separate documents, which Visual Studios keeps together. Once I put the program to practice, I was sold. The browser opens up an entire new world of possibilities.
Your HTML is built incredibly fast in your browser and you only have to communicate through your API with your ASP.NET Core server to exchange data. But the greatest benefit to Blazor is that you can write not only your code for your pages in C#.NET, but also your business logic, view(models) etc.
A world of possibilites
I’ve been working full time and intensively with Blazor for about nine months now and have discovered that it’s very different from Javascript/Typescript based frameworks. A whole new world of possibilities opens up to you because C#.NET is completely at your disposal through your browser. Without a doubt, experienced users will miss several Javascript-/Typescript-components. These components can still be used through Blazor Javascript Interop, but I recommend replacing them where possible with Blazor/Razor components. The compiler will keep the HTML- and C#-code organised for you.
We are here to help
Don’t hesitate to contact us for more information or if you require assistance. We’d love to help! Whether you need us full time, or once in a while; we can provide a helping hand on your terms.
A technical description
Your pages and web components are .razor components. These components can be made up of a combination of HTML- and C#-code (where the C#-Code is in @code block), as is the case on this Blazor webpage.
But your C#-code could also be placed in a separate C# (partial) class, which Visual Studio can keep organised. Your C#-code for the Counter.razor page could then be found under Counter.razor.cs. I only use the @code block with very simple and straightforward components; for anything other than that I use partial classes.
It doesn’t take much effort to develop reusable Razor-components in which the HTML- and C#-code is combined. You can even use your C#-properties as parameters within your HTML-code, which is also possible in your CSS. If one or more parameters change, you use StateHasChanged(). This will lead Blazor to determine what exactly changed within the HTML and it will send only those changes to the render tree in the browser. This is a different approach from the one used with WPF/Xaml/Xamarin forms where modified properties relay through PropertyChanged that the view has to be updated. As a result, the properties in your Blazor view-code are much simpler.