Blazor vs React Comparison 2021

Jason Beres [Infragistics] / Tuesday, May 11, 2021

Are you into modern web development? Then this blog will help you compare two of the most talked-about frameworks currently in the market: Blazor vs React. And it will help you decide which might be the better choice for your needs.

When you intend to develop Single Page Applications, you can choose from different frameworks. The three most common options are Angular, Vue, and React. However, with these frameworks, you need to use JavaScript or TypeScript. What if you do not want to deal with JavaScript? There is a solution:  Blazor.

In this article, you'll learn:

Blazor Overview – Present State/Features

While React has been around for years, Blazor is a new web framework. It is based on web technologies that already exist like CSS and HTML. But this framework also permits you to use Razor and C# syntax instead of JavaScript to develop a reusable and interactive web user interface. You can do this for client-based applications implemented under WebAssembly and Server side applications with ASP.NET. With both the server and the client written in C#, it permits you to share libraries and codes. It provides a platform for enabling the development of contemporary and vibrant single-page application platforms when using .NET.

The good thing about Blazor when comparing it with React is that it leverages the latest web standards. Further, Blazor doesn’t require add-ons or extra plugins to run it. This becomes possible with WebAssembly.

What is WebAssembly?

WebAssembly is generally referred to as WASM for short. It is a web standard that can run in modern web browsers. It brings language diversity to the web platform. Different than JavaScript, HTML, and CSS, WASM is a binary-instruction format for executable programs that is designed to be faster than JavaScript and very close to compiled languages. It’s still an interpreted language, but it’s designed to be interpreted by machines, not humans. WASM runs natively modern browsers.

Versions of Blazor

Developers have two options when developing a Blazor app – Blazor Server that runs in the context of ASP.NET on the server, and Blazor Client, which is a client-side WebAssembly execution model.

  • Blazor Server - ASP.Net Core Server is the host for apps developed in Blazor. This hosting is done in ASP.Net Razor format. As clients in remote areas function as thin clients, the server takes the heavy processing load. A web browser of the clients downloads a small page and updates its user interface. This happens over a single connection. This server was released as a part of .Net Core 3.

Blazor Server Example with SignalR

  • Blazor WebAssembly - In this mode, single-page apps are downloaded to the web browser of the client before running. Here, the download size will be larger as compared to the Blazor Server. However, there will be a difference based on the app. Also, the processing is done entirely on the client hardware. Rapid response time is the beneficial side of this app type. As you can understand from the name, the client-side framework is written not in JavaScript but WebAssembly. They can be used together as well.

Blazor WebAssembly Example

Learn more about Blazor WebAssembly and why it’s got a lot of buzz.

Key Features

As Blazor is relatively new , if you are not following developments in the Microsoft web ecosystem there is a chance that you have not heard of Blazor yet.  However, there are some common misconceptions around Blazor, so let’s take a look at what Blazor brings to the table.

CSS and HTML

One question that people often ask when they approach Blazor is about CSS. When Blazor uses Razor templates for the creation of components, the outcome is HTML-rendered in the browser. The CSS and HTML generated by Blazor are no different to the browser than other CSS or HTML. The meaning is that you can use all CSS features that include pre-processors like Sass, CSS Custom Properties, and responsive design in Blazor.

CSS Isolation

CSS Isolation is part of Blazor. This feature helps with preventing styling conflicts among libraries and components. This feature is generated at build time. During this time, Blazor attaches itself to an identifier to CSS Selectors that go with an HTML Attribute.

Form Components

Blazor has extra features to aid with HTML Generation like built-in input and form components. The common task of building a form with validation is abstracted away by these optional components. In the end, the components render standard HTML. They can fully use standard HTML Attributes like aria-, id, and class to name a few.

How does Blazor compare with React JS? Let’s take a look.

React Overview – Present State/Features:

React is a flexible, efficient, and declarative JavaScript library. It helps with building UI and UI components. Of course, when comparing React vs Blazor, both share the same feature of being client-side libraries/frameworks for interactive and rich modern client-side applications. But, when it comes to React, it uses JavaScript as its programming language. Not just JavaScript, when using this framework, web developers can continue to write the language they are familiar with if they do not know JavaScript. With React Native, web developers like you can develop iOS, Android, and web applications that share similar code snippets. 

When Facebook developed React, other technologies like Angular were already present. At that time, most developers were forced to do a lot of coding. Developers, who use other frameworks face the challenge of reworking most code. They looked for a framework that can permit them to break down complex components. They wanted to reuse the codes to finish their projects at a quicker pace. React made this possible for them.

React uses JSX, which helps developers in promoting the construction of machine-readable codes. The platform even helps with compounding components into a single-time verifiable file.

React Key Features

While Blazor vs React performance is important, let’s review key features of React.

JSX

JSX, or JavaScript XML, allows developers to write HTML in React and place those HTML elements in the DOM without any createElement()  and/or appendChild() methods. When compiled, JSX converts HTML tags into React elements. While not required, using JSX makes it easier to write React applications.

Virtual DOM

React uses virtual DOM. In turn, developers can create apps that are faster in performance when doing Blazor vs React performance comparison. When developing React, the creators have rightly predicted that updating old HTML would be an expensive and time-consuming process. With this understanding, they created the idea of Virtual DOM. With this feature, the platform can know what exactly to re-render or when not to consider some particular parts of DOM. The reason is that the platform can identify when the data has changed. A promptly reacting user interface is highly important to provide the best user experience.

Ignite UI for React

Comparing Blazor and React

When talking to developers, it really depends on what they are comfortable with in their development skill when deciding on React or Blazor. 

  • If you are a .NET / Visual Studio developer, it is logical to choose a full-stack framework like .NET and Blazor.
  • If you are a seasoned JavaScript developer, you might choose React, which is just a UI library, and then choose other libraries to make up your own ‘React Stack’.

Both Blazor and React are open-source tools, and both have immense popularity among app developers.

Next, let's get into Blazor vs React performance where you’ll notice a significant difference between the two frameworks.

Performance Comparison:

Is Blazor better than React? When comparing the two, most head-to-head tests will show React will load and render faster than Blazor. When using Blazor as WASM, your app is downloading the entire .NET runtime together with application DLL Libraries to the browser. This gives the perception (and reality on at least the first render) that Blazor can’t keep up with the performance of React. This does not mean that Blazor is slow, but the download and render time that app developers experience in React will be better. If you take into consideration an app’s entire React stack, your React app could experience a slower first-time load. Every app is different, every experience will be different.

When comparing Blazor WebAssembly Vs React, both are good frameworks with an impressive set of features. You will find that most web developers support both these frameworks and are satisfied with the performance of both. So, when you do a Blazor vs React comparison, you should always do your own testing, and decide what performs best for your app experience.

 

 

React

Blazor

Type

Front-End Library – focuses on the client UI and interactions of your website.

Full Framework – client side (WASM) and server side (ASP.NET)

Developer

Facebook

Microsoft

License

MIT

Apache

Language

JavaScript/JSX/TypeScript

C#

Performance

Light weight with great performance.

Slow on the client side due to downloading .Net runtime. Reported latency issues. Server side relies on Signal R which has a history of performance challenges.

Learning Curve

Easy to Learn

Easy to Learn

PWA (Progressive Web App) Support

Yes

Blazor WebAssembly Only

Routing

Not included

Yes

Http Client

Not included

Yes

Dependency Injection

Not included

Yes

Requires an active connection per client

No

Yes

Stores the component state server-side for each client

No

Yes (Blazor Server)

Scoped styles for components

Yes

No

Static Deployment

Yes

Blazor WebAssembly Only

Server-Side Rendering

Yes

Yes

Optimized for SEO / Crawlers

Yes

Yes

Bundle Size

12KB gzipped

622KB for .NET Runtime

Tooling

CLI plus many 3rd party options.

CLI, Visual Studio and 3rd party options.

Production Ready

React is production-ready today with years of battle-tested deployments from companies such as Uber, Drop Box, Twitter, Paypal, Netflix, Walmart, and more.

Blazor is a new product and has yet to have widespread adoption.


Should You Choose Blazor or React?

Both Blazor and React are great options for your next project. It comes down to a few considerations:

  • Are you willing to deal with some bumps in the road with a newer, less mature platform in Blazor?
  • Are you willing to take the dive and learn React to get the benefit of a mature UI library?
  • Are you a C# developer that wants an easier on-ramp to modern web apps in the Microsoft .NET ecosystem?
  • Are you a seasoned JavaScript developer that would like to choose you own stack of libraries to support React app development?

We believe that no matter which you choose, there are tradeoffs, but you will be able to build beautiful, fast and responsive web experiences in either choice.

At Infragistics, we support both frameworks. Visit our Ignite UI for React and Ignite UI for Blazor pages to learn the details of each.

Read more: Blazor vs Angular Comparison in 2021