React vs Blazor: What you said

by John Browne, on Feb 8, 2023 3:46:15 PM

Last week I promised to let you know what you--that is, at least some of you--told me what you thought about React or Blazor as a front-end replacement for Web Forms applications. 

blog-ReactvrsBlazor-GAP-Mobilize

If you haven't read it, the TL;DR is I asked folks about their preferences and Blazor took the win by a large majority. I will say, however, that a considerable percentage were on the virtual fence: don't care, don't know, or not applicable.

Before I get into specifics, let's take a peek at the differences between these two web front-end solutions. Note both of them are client-centric, as opposed to a lot of more traditional (ASP.NET I'm looking at you) architectures that require server round trips for much of the UI view updates.

What is Blazor?

Blazor is a web framework developed by Microsoft that allows developers to build web applications using C# and .NET. Blazor eliminates the need for JavaScript and enables developers to leverage their existing knowledge of C# to build full-stack web applications. Basically Blazor runs C# in the browser, using something called WebAssembly. Moving from Webforms to Blazor means you (theoretically) can re-use a lot of your existing app's C# code. WebAssembly is a .NET runtime that works in all modern browsers and runs .NET assemblies. Think Adobe Flash without the malware. Cool, huh?

Just like ASP.NET and Webforms, Blazor code lets you mix HTML and C# code together, like in the following example, where you have HTML calling a C# method to increment a variable.

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

 

Blazor has gained a lot of traction since launch, mainly because of the tight integration with .NET and also because it is fast. 

What is React?

React is a widely-used front-end framework developed by Facebook. It is a JavaScript library that allows developers to build user interfaces for web applications. React follows a component-based architecture, where reusable components are created and composed to create complex UIs.

React uses a virtual DOM (Document Object Model), which allows for efficient rendering of UI components. React updates only the necessary parts of the DOM when changes occur, resulting in improved performance and a smoother user experience. This is similar to a technique we (Mobilize.Net) use in our WebMAP architecture, where we update UI elements selectively. 

Another aspect of React is its support for JSX (JavaScript XML), which allows developers to write HTML-like code directly within JavaScript. This simplifies the process of creating UI components and enhances code readability. Or so they say. Anyway, some of the biggest apps like Facebook, Twitter, and Airbnb use React for their front-end code.

Here, courtesy of react.dev/learn is a React sample that declares a JS function and then displays/formats it in HTML. Also cool, huh?

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

 

So let's cut to the chase, and find out what you--the developer public--actually said.

What you said about Blazor vs React

What did folks say about their choices? Some of the more common or interesting points I heard below:

  • React is more common, used everywhere and also by mega-large platforms (think Facebook and Twitter)
  • React lets you code in Typescript (so basically Javascript) while Blazor is great for the C# crowd as they don't have to learn a new language
  • React transpiles to Javascript so it runs natively in browsers, while Blazor uses web assembly. Web assembly doesn't always run perfectly as it's not native.
  • "Concerned about Microsoft yanking the rug out on something like that..."
  • "Blazor is about 5 years old...big question is will it be around in 10 years? You know how Microsoft gets all excited about new technology and then ditches it when something else catches their eye."
  • "A distributed UI platform has been a moving target since the advent of the web...we are fine with either but going with Blazor.  At some point we will diversify, but feel good with WASM being a standard."
  • One person was happy with Blazor server, so thought he would go with Blazor for front-end as well.
  • "I think you should convert over to React. In all my time working in observability space ... I saw Blazor exactly once (just last week) and not in any positive way. Meanwhile, half of the sites in the world are on React, for better or worse. Go for it."
  • "We are moving forward with React for new projects as well as migrating to React from existing web applications that are on older tech stacks."
  • "Most of the customers I work with would be fine getting to Blazor, and then over time adding new functionality as React or Angular, since it gets them off Windows, moves to the ASP.NET Core (which Blazor uses)."
  • "By adopting Blazor (and its various flavours: Server, WASM, Hybrid,…), .NET developers have a single technology stack (.NET) to learn in order to build every kind of applications that they can think of."
  • "I can totally see where you’re coming from with Blazor. It’s still so new, and without a long history of being supported by Microsoft, implementing it is risky. Given that, and the sheer scope of the implementations of React / Angular, it would make significantly more sense to me for you to go that route."
  • "Microsoft is making big bets on Web Assembly and Blazor.  Blazor components can now be used inside of Angular and React applications. Blazor can be used in Maui, and it will likely show up in other .NET frameworks as well in the future.  So the answer really is if you are targeting a .NET audience, Blazor is the future of the front end on .NET. If you are targeting a more general audience then React seems like a valid way to go, but the javascript ecosystem evolves quickly and there is no guarantee that React is the future, vs something like Vue or whatever new technology comes next. "
  • "We had initially done our backend work in asp.net core and our front end in React.  The complexity of React made us re-evaluate what we were doing and switched all of our front-end web to Blazor."
  • "For me, Blazor has been working great, and since I decided to integrate .NET MAUI with Blazor, it helped me reduce the need of code duplication, or use lots of different technologies."
  • "Both are good. My recommendation would be Blazor. Devs coming from a web forms background will feel right at home."

And finally, this response: We don’t have any have legacy ASP.NET web forms apps. One thing in our favor.

There you have it, right from the source.

Got Web Forms? Want something better? Check out our offerings here

 

Topics:BlazorASP.NET Web FormsReact

Comments

Subscribe to Mobilize.Net Blog

More...

More...
FREE CODE ASSESSMENT TOOL