Blazor — the C# UI
Source: https://en.wikipedia.org/wiki/Blazor
Microsoft has been at the forefront of web development for years now but its history of front-end development has been a little shaky. Or so we believed, until Blazor was released. And Blazor seemed like a blessing to .NET developers as it allows to create UI experiences using HTML, CSS and C#. Yes, C#. With JavaScript being the de facto standard for front-end development, Blazor is also interop with JavaScript.
Why Blazor?
JavaScript has been the flag bearer of web development for years now. But let’s face it, the framework fatigue catches up after a point. With years of experience in .NET, one would still have to learn JavaScript for front-end and eventually Vue, Angular or React to be a full stack developer. Blazor does away just that. One programming language for both client and server side development. And Blazor has already started to show that it has potential as a highly efficient and productive programming model — as a direct competitor to JavaScript single page application (SPA) frameworks.
Could we be seeing the start of a single unified UI framework for building any type of application with .NET, be it web, desktop, or mobile? I certainly think that its an exciting prospect.
Behind the scenes
Hosting model
Blazor has a separation between how it calculates UI changes (app/component model) and how those changes are applied (renderer). This sets Blazor apart from other UI frameworks such as Angular or ReactJS/React Native that can only create web technology based UIs. By using different renderers, Blazor is able to create not only web based UIs, but also native mobile UIs as well.
This requires components to be authored differently, so components written for web renderers can’t be used with native mobile renderers. However, the programming model is the same. Meaning once developers are familiar with it, they can create UIs using any renderer. These renderers are commonly referred to as hosting models. We shall look into Blazor Server and Blazor Web Assembly for now.
Blazor Server
Blazor Server is a remote renderer for the web and was released in September 2019 with .NET Core 3, during .NET Conf.
Source: https://www.youtube.com/watch?v=KlngrOF6RPw(screenshot)
In this model, the Blazor application runs on the server on top of the full .NET Core runtime. When the user loads the application, a small JavaScript file is downloaded which establishes a real-time, two-way SignalR connection with the server. Any interaction that the user has with the app is then transmitted back to the server over the SignalR connection for the server to process. After the server is done, any UI updates are transmitted back to the client and applied to the DOM.
Blazor WebAssembly
This model offers a direct competitor to JavaScript SPAs such as Angular, VueJS, and React. By using WebAssembly, we are able to write our UI logic using C# and not JavaScript. It was released in May 2020.
A version of the Mono .NET runtime, compiled to WebAssembly, is downloaded to the client’s browser along with the application DLLs and dependencies. Once everything is in the browser, the Mono runtime is bootstrapped, and it, in turn, loads and executes the application DLLs.
Source: https://www.youtube.com/watch?v=KlngrOF6RPw(screenshot)
Currently, Blazor WebAssembly uses interpreted mode to load and run your application. In this mode, the Mono IL interpreter executes your applications .NET DLLs inside the browser. The only part of the process that is compiled to WebAssembly is the Mono runtime.
Blazor WebAssembly is built to be a direct competitor to modern JavaScript frameworks. Therefore, anywhere you would be looking to use one of those frameworks, you could consider Blazor. It’s also important to point out that using Blazor WebAssembly doesn’t require you to use .NET on the server. As in, if you have a backend written in Node, PHP, or Rails you can happily use Blazor as the front-end without any issues as Blazor WebAssembly compiles to static files.
App/Component Model
This is the core of the framework with all non-UI specific elements which make Blazor work. It has the programming model, routing and navigation, and the render tree, which is Blazor’s mechanism for calculating UI changes.
Blazor vs the threesome
By the time Microsoft launched Blazor, Vue.js, React.js and Angular.js cemented their place in the UI scene. What is it that each of these UI frameworks have or not have in common ?
Afterthoughts
Blazor is on its way to become a single UI framework for any .NET application. If all of the current hosting models for Blazor move into production, developers will have the option to learn a single programming model which they can use to create UIs anywhere. At a time where there are lots of discussions around the barrier for entry to .NET, Blazor could offer clarity when it comes to UI, a single programming model, learnt once and applied anywhere.
