Blazor vs Razor

Question

With the invention of Blazor, I'm wondering if there are significant efficiencies (both in creation of code and in the actual compilation / execution of code) between these two languages?

https://github.com/SteveSanderson/Blazor

If anyone has actually implemented it, have you undertaken any performance tests, or have anecdotal (yes sorry, apologies I'm requesting this) feedback on the code-writing process, when compared with plain old Razor?

Solution 1

The information I am presenting below is mostly paraphrased from Steven Anderson's Feb. 2 Blog entry and my own understanding of the goals for the project:

Blazor is intended to combine ideas from the current .NET Razor stack with modern SPA framework architecture.

Code creation

is intended to be flexible and encourages component-based layouts, as seen in this example:

<div class="my-styles">
   <h2>@Title</h2>
   @RenderContent(Body)
   <button onclick=@OnOK>OK</button>
</div>

@functions {
    public string Title { get; set; }
    public Content Body { get; set; }
    public Action OnOK { get; set; }
}

which creates a reusable component in html markup:

<MyDialog Title="Ski Lift controls" onOK="DismissSkiDialog">
    Gondola @gondolaId is now <em>running</em>
</MyDialog>

Execution

Blazor is expected to be fast, because webAssembly is fast. It compiles to bytecode that is directly executed by the browser's wasm loader. In javascript, for example, the .js files need to be first loaded and separate files are combined, then parsed and tokenized and built into a tree structure, which can then be interpreted by a browser's javascript engine (chrome's v8 engine, for example).

For an in depth comparison of webAssembly and javascript execution, see this post.

SPA Architecture and Design

As there are great frameworks already built in javascript for the web, Blazor has been inspired by the ideas already used in modern frameworks such as React, Vue, and Angular, and will feature concepts detailed in the post such as:

• Layouts
• Routing
• Dependency Injection
• Lazy Loading
• Unit Testing

Note that while these concepts exist for the server-side in Razor, not all of them exist on the client side. Front end routing is not available in Razor, and has often been combined with a javascript framework to fill that scenario.

I've personally worked on enterprise applications serving Razor pages together with AngularJs. It can get messy at times, and never felt 'clean'.

In Summary

Razor is a solution for server-based architecture which can handle api logic and server-side templating, but it cannot offer client-side logic outside of javascript.

Blazor is the next step (and hopefully successor) that will allow the same server side functionality as Razor, but will integrate client-side logic using C# instead of javascript.

I am working on small test project at the moment with Blazor, and so far I am finding it easy to use. But as the warnings on the blog and GitHub page state, it is not even close to production ready.

3rd party edit from 2018-09-26

In the .NET Conf 2018 it was announced that Razor components ("server-side Blazor") will be part of .NET Core 3.0. This code was shown:

// inside index.cshtml - serverside use of blazor
<SurveyPrompt Title="How is Blazor working for you?" />
<div>
     <img id="bot" src="@imageurl" />
<div>
<button class="btn btn-primary" onclick="@changeImage">Click me</button>

@functions{

    string imageurl = "/images/dotnet-bot-1.png";

    void changeImage()
    {
        if(imageurl.Contains("1"))
        {
            imageurl= imageurl.Replace("1", "2");
        } 
        else 
        {
            imageurl= imageurl.Replace("2", "1");
        }
     }
}

Solution 2

In nutshell:

Razor is a popular template markup syntax for .NET. Blazor (Browser + Razor) is a .NET-based web framework that can run on the client using WebAssembly or running on the server via SignalR.

To give an example, Razor is the syntax you use when creating web apps with ASP.NET, which you’ve probably seen before:

<h1>
  Hello @Model.Username
</h1> 

The razor takes care of rendering your HTML based on the data in your model, while also supporting various conditionals and loops.

On the other hand, Blazor is a technology similar to ASP.NET Core & ASP.NET MVC in that:

It powers web applications It uses Razor as its template syntax for the creation of UI. A common point of misconception is that Blazor uses Razor. This was further exacerbated by two other similar terms – Blazor components and Razor components. Those are widely used interchangeably but the correct terminology is Razor Component. A component is the combination of markup (written in HTML) and logic (in C#) in a single Razor file (with the .cshtml extension).

You can find more information here.

Comments

[Nechemia Hoffmann]

You should be using code, not functions, in your examples.

[Pieter]

This answer could use an update :)

[Felipe]

I have not followed the development of Blazor since this answer was written. Please feel free to suggest/edit as necessary