Insights

Blazor versus Razor

An overview over the differences between the Blazor and Razor frameworks.

in IT Strategy, Software development By Pedro Borges, Software Engineer

Companies started shifting to more developer-friendly frameworks, and Microsoft (MS) took the vanguard by introducing the new open-source framework, Blazor. MS claims this framework simplifies further the task of building web applications.

The idea Blazor is the ability to combine HTML and .NET C# to build powerful web User Interfaces (UI's). However, Microsoft already has a technology called Razor that allows to use .NET C# in HTML. In this article, we will explore the definitions of Razor and Blazor and how the two are related.

What is Razor?

First, let's define what Razor is. Razor is a template markup syntax for embedding server-based code into web pages; in summary, it allows to combine C# code and HTML.Razor becomes very useful for creating logic inside the HTML without the need for Javascript.

As stated by Microsoft in their documentation, the default language for Razor is HTML. To combine HTML with C#, Razor files (files with the extension .cshtml) we have to use the reserved symbol, @, to transition from HTML to C#. In the end, everything inside .cshtml will be rendered as HTML.

Another concept that relates to Razor is the Razor pages. Razor pages have a direct relation with ASP.NET MVC (Model-View-Controller) than with Blazor, following the principle of code-behind.

In MVC, we have a Model that establishes the communication between a View (client-side) and the Controller (server-side), this way we can create a two-way communication channel between the client-side and the server-side.

The Razor pages use almost the same concept. However, they use more of an MVVM (Model-View-ViewModel), Razor pages dropped the Controller and introduced the PageModel/ViewModel. TheViewModel is a merge between the Model and the Controller. It contains all the information of a Model and has OnGet and OnPost methods to create a two way binding between the client-side and server-side, without the need to have a specific controller.

This approach, introduced in Razor by MS, is particularly useful when creating web pages since actions are directly related to the pages. However, Razor pages were not made to develop APIs, and this is where we need controllers.

What is Blazor?

Simply putting, Blazor is a free open source Single Page Application development framework. It uses C# instead of Javascript to create rich interactive web applications.

Blazor is based on components (much like React) to create UI elements that can be reused in different pages, in different applications (exported as libraries or NuGet packages), and can even be nested, and this means a component can use other components.

As of today, Blazor supports two different hosting methods: Blazor Server and Blazor WebAssembly.

The difference is where the code is run and processed.
In one hand, in Blazor Server, the bulk of the processing is done server-side. The client's browser downloads a small percentage of the page, and everything is updated via small connections called SignalR.

On the other hand, in Blazor WebAssembly, the entire page is downloaded to the browser, and the processing of the page is always done client-side, connecting to the server only when needed.

Choosing the hosting method will depend on the project necessities or deployment architecture because one is not directly better than the other. Both hosting methods serve different purposes depending on the context that they will be used.

Like other modern web frameworks, Blazor supports an array of features:

  • Routing;
  • Server-side or client-side rendering;
  • IntelliSense;
  • Forms and validations;
  • Dependency injection;
  • Debugging in browsers or the IDE;
  • And much more!

The relationship between Razor and Blazor

The relationship between Razor and Blazor is closer than we think! The name "Blazor" comes from "Browser + Razor", because Blazor has the possibility of executing the views on the browser, while Razor is strictly on the server-side.

Blazor uses Razor based components (the components mentioned previously in the article), these components can be whole pages or small elements like buttons, this way we can use C#, HTML, and CSS together.

The file extension .razor indicates that the file is a Razor component class, where we can write C#, HTML, and CSS.
These component classes go beyond the typical functionalities of Razor, and here we can define variables and methods that can be called by the client-side of the application. Because these classes are Razor, we can use all of its features, like the use the parameter '@' to write C# code.

The following example, taken from the official Blazor documentation, shows the basic structure of a Razor component class (file name: Dialog.razor):

  • <div>
         <h1>@Title</h1>

         @ChildContent

         <button @onclick="OnYes">Yes!</button>
    </div>

    @code {
         [Parameter]
         public string Title { get; set; }

         [Parameter]
         public RenderFragment ChildContent { get; set; }

         private void OnYes()
         {
              Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
         }
    }

As we can see in the example, everything after '@' is a C# variable or method. The two exceptions are:

  • @code { … } - behaves like a standard C# class and everything defined inside can be used in the HTML part;
  • @onclick - is one of the many Blazor primitives functions. This one specifies the behaviour of an on click event, in this case, calls the method OnYes.

After creating this component (Dialog.razor), we have to call it in other pages to use it, by simply writing <Dialog>, rendering the Dialog.razor inside the other page/component. We can even pass parameters to the components, and in this scenario, we need to use the tag [Parameter] as seen in the example code.

Conclusion

Blazor is much more than writing C# in HTML, is a new way to develop interactive web applications using the functionalities of .NET Core. In part, this was made possible thanks to an already existing technology, Razor.

Without Razor, it wouldn't be possible to mix the core of Front-end languages, HMTL and CSS, with the logic and versatility of a Back-end language like C#. It will also open the door for more Back-end developers to explore the Front-end world by using a familiar programming language and paradigms.

With the use of Blazor's component-based structure, features can be broken down into smaller components, that can be reused various times, even by different applications. This versatility will help companies and developers to create a more homogenous developing environment and also, cutting development time.

Get in touch