Why You Should Use Blazor over JavaScript Frameworks to Build Your Single-Page Application

12 mins read

Find out the benefits of Blazor over Angular, React and other JavaScript frameworks. Blazor enables sharing code across client- and server-side processes, server-side rendering functionality and more.

Contents

Click to jump ahead...

What is Blazor?

When building a single-page application, Angular or React are popular JavaScript frameworks to use. And up until now, the majority of client-side processes are written using JavaScript. However, there is an evolving framework that will allow you to write client-side processes using C#.

Blazor is a .NET framework for creating a single-page application that allows you to create your application using C#, Razor and HTML. The client-side of Blazor uses WebAssembly, which has been shipped with major browser engines, such as Internet Explorer, Chrome, Safari and Firefox. WebAssembly is an alternative to JavaScript in writing client-side code. And it can be converted using many different programming languages. In Blazor’s instance, it is converted using C#.

pipe-isometric3

Why Use Blazor over a JavaScript Framework?

The integration of Blazor and WebAssembly gives you a different way of building a single-page application with the same results. So why should you choose Blazor over a JavaScript framework?

Choice Between One or Multiple Applications
At present, Blazor comes with two hosting models.

The first is Blazor Server. Blazor Server allows the application to be executed at server-side. Layout changes, event handling and JavaScript calls are done through a SignalR connection.

The other is Blazor WebAssembly. Blazor WebAssembly allows you to run the application client-side with the use of WebAssembly. If you need to integrate server-side functionality, you can either run it alongside Blazor Server, or you can use a separate API application.

Below is an example of running Blazor WebAssembly through a separate API application. When the page is initialized, it will display a list of technologies. These technologies are loaded through the API. Additionally, we have a text box and a button. When we enter some text and press the button, our entered text is sent to the API and returns an updated list of technologies.

Unlike Blazor, with a JavaScript framework, you always need to have a separate application if you wish to have server-side functionality.

Possible to Code in One Language
As Blazor WebAssembly allows you to write client-side code in C#, this means that any developers working on your application may only need to know one language.

This can have many benefits, particularly if you are responsible for running a Blazor project. Only needing to know one coding language means knowing the skills that you need your team members to be proficient in. It also makes it easier to assign roles to your team members, knowing there won't be a coding language barrier.

We are going to put some client-side coding in action. We display the current time on the page. When we press the button, the time is updated with the current time. All written in C#. No sign of JavaScript anywhere!

Sharing of Code Both Client-Side and Server-Side
Blazor allows you to share code both at client-side and server-side, meaning methods that share both hosting models only need to be written once. Subsequently, if you need to modify code shared by both, it only needs to be modified once and will be reflected on both hosting models.

The following example demonstrates this. We have created a new dependency-injection singleton interface called ITechnologyService that is inherited by TechnologyService. Inside this service is stored a list of technologies. When the Blazor application is loaded, the ITechnologyService service is injected into the page and displays a list of all the technologies. When we enter some text and press the button, the ITechnologyService service sends our inputted text through an Add method, and the list of displayed technologies is updated.

An Enhancement for JavaScript

pipe-isometric3

It’s worth noting that WebAssembly languages such as Blazor WebAssembly are more likely to enhance JavaScript rather than replace it in the near future. Blazor relies on JavaScript to power some of its features. For example, JavaScript is used to power the SignalR connection between the client and the server.

At present, Blazor WebAssembly is currently still in preview. But when it's fully released, it's likely to give stiff competition to the popular JavaScript frameworks that are available and give developers an interesting dilemma as to which framework to choose.

Looking for more on Blazor?
Dig deeper into Blazor and learn the fundamentals of Blazor Component construction with our free guide: Blazor Components: The Definitive Guide

×
×
powered by Typeform
TOP