At Qim info, we like keeping an eye on new technologies. That’s why we got interested in Blazor.
What is Blazor ?
Blazor is a relatively new Framework, introduced by Microsoft, allowing to develop browser-based single-page applications using .NET and C#. The name comes from Browser + Razor. If you are familiar with Razor, you already know that Razor views had to be executed on the server-side to render HTML in the browser. Since Blazor uses WebAssembly (Wasm), it enables client-side to execute Razor views. With Blazor, you can now develop both client-side and server-side using .NET and C#!
In comparison with Angular, which is one of the most used Web framework at Qim info, there’s almost nothing Blazor can’t do. Each framework has its own advantages and disadvantages.
Component example
To give you a brief overview of Blazor’s syntax, this is an example of component we can create:
UserComponent.razor:
<div>
<p>Hello @Username</p>
</div>
UserComponent.razor.cs:
public partial class UserComponent
{
[Parameter]
public string Username { get; set; }
}
And this is how we would use this component:
Index.razor:
<UserComponent Username= »Qim info » />
Pretty handy, right?
Blazor performances
The major downside of Blazor lies in its performance regarding to the other Web frameworks as Angular and React for example. If Blazor is efficient when it comes to compilation, we can’t say the same thing for execution.
When running in the browser for the first time, it downloads dotnet.wasm (about 1Mb), the Blazor runtime that makes everything work. Then, it downloads some of the fundamentals .NET class libraries and other third-party libraries used in your project, for a total of at least 2Mb. This can seem relatively low, mostly compared to website using large images for example, but keep in mind that nothing can happen until the runtime, so the user will be watching a loading message until everything is loaded.
Fortunately, caching can alleviate part of the problem by letting you download the runtime once and then reuse it across other requests and sites.
Furthermore, Blazor is still an early-stage technology, with plenty of optimizations left to be made, so we can be optimistic regarding its evolution in the future.
Blazor’s pros and cons:
Let’s resume Blazor pros and cons.
Pros:
- No need to learn JavaScript
- Same technical stack between frontend and backend
- Share server-side and client-side logic
- Leverage the existing ecosystem of .NET libraries
- Benefit from .NET’s performance, reliability and security
- Does not require browser plugins
- Enables full .NET debugging
- Uses the latest web browsers capabilities
Cons:
- New framework, will take some time to bed in and gain adoption
- Sizeable initial download of .NET framework to browser on first load
- Smaller community (tutorials, help) compared to other framework (React, Angular)
- Depends on WebAssembly support in the browser
Conclusion
Blazor is an exciting and promising technology, as Silverlight was, before being abandoned by Microsoft. For that reason, we may not invest right away into Blazor, but we will keep an eye on it, as this could become a really good alternative to JavaScript when optimizations are made.
Besides, Microsoft is already planning the future of Blazor. In a recent .NET Conf event, Microsoft revealed plans that could take Blazor out of the browser and bring it to native applications – therefore without WebAssembly.