Blazor – Why To Choose Blazor For Your Web Development

Zartis Team
Software Development

This article will go through some of the reasons to choose Blazor for your new web application development. We will explore this topic mainly from the technical perspective, but also briefly considering resource management in your team.

What is Blazor?

If you have not heard about it before, Blazor is a Single Page Application development framework. It is open source and built on open web standards. Born in the hands of Microsoft, it combines the older Razor with the new .Net and WebAssembly, and it allows you to create both browser and server-side applications.

It is worth noting that as of today, the first release of Blazor was published 2 years ago, and the server-side part of it, barely a year ago. With this in mind, we just want to emphasize that Blazor is quite new, and must be kept in mind through the entire article.

WebAssembly and JavaScript

Blazor sets a new mode to play the game that WebAssembly brought to the table. The World Wide Web Consortium designed WebAssembly, providing a compilation target to other languages such as C++ or Rust back in 2017, working in all modern browsers, desktop or mobile, out of the box. To check if your browser supports it or not, you can go to Can I use… Support tables for HTML5, CSS3, etc.

What this means is that now it is possible to use .Net to fully develop your web application, limiting, if not eliminating completely, the use of JavaScript. For some, this might be a good enough reason to choose Blazor.

But, what if you want to use JavaScript? No worries, Blazor has you covered. It comes with JavaScript interoperability. With JS Interop, a Blazor app can invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions.

If this was not enough to cheer for the use of WebAssembly via Blazor, as I mentioned earlier, WebAssembly is a compilation target for a higher level language, as opposed to JavaScript, which is a just-in-time high-level language. The binary format of WebAssembly makes it run with near-native performance. Although there are studies where the claimed speed of WebAssembly has been questioned (1, 2), in general it still shows an improvement against Javascript ranging from 20% up to 34% as cited in the studies below (1, 2, 3).

1 – Not So Fast: Analyzing the Performance of WebAssembly vs. Native Code

2 – Mind the Gap: Analyzing the Performance of WebAssembly vs. Native Code

3 – To WASM or not to WASM? – DEV

To get more information about how Blazor and WebAssembly work, you can head to Introduction to ASP.NET Core Blazor.

And what about TypeScript with Blazor?

As with JavaScript, it is possible to use TypeScript in a Blazor project. After all, TypeScript is a superset of JavaScript, it builds on it and it is officially supported by Microsoft. When compiling your Blazor project, your TypeScript code will be transpiled into JavaScript and both files will live with each other. However, the JS file will be overwritten every time a new compilation of the TS file occurs, so keep that in mind. Of course, you can configure how MSBuild does this via the MSBuild properties. If you want to explore all the TypeScript compiler options, check the Handbook – Compiler Options in MSBuild.

Since we are talking about TypeScript and WebAssembly in the same article, AssemblyScript is worth mentioning. AssemblyScript is a TypeScript-to-WebAssembly compiler, and even though it doesn’t seem like Blazor provides support for this yet, nothing is stopping that from being an option in the future. So, you could generate WebAssembly instead of Javascript from your TypeScript code in your Blazor project. It could also happen that Microsoft decides to not include this as an option, in favor of using C# all the way instead of TypeScript. But we will have to wait to see if this becomes a reality.

Back-end to front-end Code Reusability in .NET

So at this point it is clear that, when using Blazor, we are using .NET throughout the whole development process. This brings the inherited benefit of being able to reuse code from the back to the front end and vice versa. Not to mention the ability for a developer to work in both areas without needing to know two different technologies.

At the same time, since you are using the same code, you have the option to place your code wherever you want it to run. Let’s look into this a bit more. Blazor can run your client-side code directly in the browser, or you can separate part of the code and put it on the server. If you decide to separate the code, it will send client UI events to the server (using Sigal R) and UI changes from server back to the client. This allows your client side to remain light weight or utilize your server side computation power to reduce processing time on the client side.

Thanks to .NET Standard, and because it has been out for a while, there are plenty of libraries out there of which you can take advantage in your server-side Blazor development.

To know if you should aim for client side or server side development on Blazor, you can take a look at this post by Fiodar Sazanavets: Pros and cons of Blazor for web development – Scientific Programmer

Support from External Vendors

Blazor is relatively new, but coming from the hands of Microsoft, it has quickly gained the trust of third-party vendors. This is nothing special, and it is nothing that other frameworks, based on JavaScript would not have, but it shows the commitment and the work that is being put in Blazor from the development community.

If you want to explore some, here you have a list: Telerik, DevExpress, Syncfusion, Radzen, Infragistics, GrapeCity, jQWidgets

Development Tools

As part of the Microsoft family, Blazor is supported by one of the best development tools in the market, Visual Studio Code. Not only one of the best, but also free. Available for Windows, Linux and macOS. Free Developer Software & Services – Visual Studio

.NET Skills

This might be too obvious, but Blazor takes advantage of all your current skills on .NET and allows you to start working on web development with just a little extra work, flattening the learning curve significantly. So if your team or your company has the proficiency in .NET and lacks JavaScript or web development knowledge in general, Blazor might be the way to speed up the production process.

So why would you choose something else over Blazor?

Counting the obvious ones: If your team or your organization lacks the .NET expertise and/or is used to working with another front-end framework and your project doesn’t need the extra performance WebAssembly could provide. There is no reason why you should drop that asset of knowledge and start a new steep learning curve on a new language and a new framework.

As good as Blazor might seem, we need to remember it was still a newborn a year ago, and as such, it needs to grow up and develop. Even though it is growing fast and becoming a very capable teenager, you would not replace your valuable senior engineer with a new genius kid still in school. Same way, if you have all your development in another technology, there is no reason for you to get in the mix and complicate your tech realm. Current popular front-end frameworks have been tested and excel on what they do, and they will not go out of business because of Blazor, so you can keep using them with ease of mind.

Final Thoughts on Blazor

Blazor is a sweet piece of technology that will do marvels for the experienced .NET Developers out there, cutting the learning curve into web development for everyone coming new into that world. If you are starting with a new project and have the .NET skills already, or you do not have any web development skills at all, and if you want to squeeze the performance out of the browser where your application will run, go ahead and give Blazor a chance!

On the other hand, if you already have a project using a JavaScript framework and a team of skilled JavaScript Developers, with a working application that doesn’t need the extra performance, there is no need to turn to Blazor. Not for your current project, and probably neither for the new ones with the same characteristics.

If you want to stay up to date on how Blazor evolves step by step, keep an eye into the Visual Studio Magazine: TypeScript, Blazor, ASP.NET Core How-To, News, Tips and Tutorials

This blog is developed by Carlos Fuentes, Senior Software Engineer at Zartis. If you have any questions regarding the subject or require additional resources we can connect you with the relevant team members, feel free to reach out!

—