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?

Pledge

Blazor is just a framework that is using the razor language client side. They are not directly comparable, one is a markup langauge with c# and one is a project that allows you to run c# code and hence the razor view engine in the browser – Garamond

The big difference is that Blazor compiles some code to Web Assembly. (and I believe that .NET components are bundled with it) From what I've read so far, Web Assembly is slow when accessing DOM. Javascript is better in that respect. Web Assembly's speed improvement comes when you want animate something inside a canvas. – Simplicity

Here is a good article about it: telerik.com/blogs/difference-between-blazor-vs-razor – Wichman

is blazor going to be a replacement for razor? – Bicolor

Answer 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");
        }
     }
}

Republicanism

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

This answer could use an update :) – Palatalized

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

Answer 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.

Bette

Answer 3

You can call Blazor as Razor Components with extra abilities! The other variants of the Razor family are Razor views and Razor Pages. ASP.NET has merged them all together and you can just have them and use them all in one project. They are just services in ASP.NET Core and you can register or inject only stuff you want, It is a very nice feature of ASP.NET. Check the eShopOnWeb reference application. eShopOnWeb

Myrtamyrtaceous