The Buzz Around Blazor WebAssembly

Due to its potential to modernize web app development, Blazor WebAssembly is gaining huge traction, and the interest and adoption of the framework are growing every day. Not too long ago, C# programmers had to rely on JavaScript for high-end web app projects and use JavaScript to write code for browsers; however, things have drastically changed since Microsoft announced their WebAssembly technology at Build 2020.

With it, the possibility of writing C# or running .NET code in the browser without add-ons and plugins is now possible.

To help you understand the buzz around Blazor WebAssembly and how Blazor WebAssembly works.

What Is Blazor?

Blazor is Microsoft’s response to the ever-growing .NET developer community that wants to build high-performing single-page application (SPA) apps fast and modernly, just like apps developed in other popular front-end frameworks like Angular and React.

In essence, Blazor is a free, open-source web framework used for creating interactive and reusable web UIs with the help of C#, HTML code, and Razor syntax instead of JavaScript. This is possible for client-based apps implemented under WebAssembly and Server-side applications with ASP.NET.

Blazor puts key things on the table: CSS and HTML rendered in the browser, CSS isolation that prevents styling conflicts among libraries and UI components, and built-in input and form components.

What Is Blazor Server?

To understand Blazor WebAssembly, you first must understand Blazor Server. In general, Blazor Server is a hosting model that allows for the execution of a Blazor app on the server. It makes use of a standard ASP.NET Core, which enables you to integrate server-side functionality, for example, integrating a SQL Server database through Entity Framework (an open-source, object-relational mapping framework).

The Blazor Server communicates with the client-side browser through SignalR, establishing a connection with the server side. This means that SignalR channels this information to the server whenever a client-side interaction occurs.

What Is SignalR in Blazor?

Used by ASP.NET developers, SignalR is a library that streamlines how real-time web functionalities are added to an application. With such a real-time messaging framework, the server code distributes content to connected clients right after it becomes available instead of having the server wait for a client to request new data. A Chat application is a common SinglarR example.

When it comes to Blazor and Blazor Server apps, in particular, the application runs on the server from within an ASP.NET Core app. To communicate UI updates, event handling, and JavaScript calls, it uses a SignalR connection. 

What Is Blazor WebAssembly?

Blazor is a powerful niche, especially for Microsoft developers who love C# and .NET. And with the release of WebAssembly, it just got even more powerful. In essence, Blazor WebAssembly also referred to as Blazor WASM for short, is production-ready and represents a web standard used for creating client-side apps that run directly in modern web browsers.

In this mode, the processing is done on the client's hardware. Keep in mind that WASM is a low-level assembly-like language with a binary-instruction format and is meant to be interpreted by machines. The compact binary format allows you to run code written in multiple languages like C/C++, Java, and Rust on the web with near-native performance.

Using Blazor WebAssembly, You Can:

• Execute your client-side C# code in the browser without plugins or add-ons.
• Re-use code and .Net standard libraries from server-side parts of your Blazor app.
• Get rapid response time and strong runtime typing.
• Build client-side apps that can work in offline mode without requiring a connection to the server.
• Deploy your app as a standalone static site, or host it with ASP.NET Core.

How Does Blazor WebAssembly Work?

Blazor WebAssembly uses open web standards and doesn’t require that you use any plugins or add-ons or that you recompile code into other programming languages. And it works on all web and mobile browsers. When working with Blazor WebAssembly, single-page apps are directly downloaded to the client's web browser before running, and the processing is done on the client's hardware. 

Compared to the Blazor Server, the download size, in this case, is larger, which some may consider a drawback, but, in the end, it depends on the app itself. However, plenty of features compensate for this and are the reason for the buzz around Blazor WebAssembly.

Here are several key factors that draw developers into using Blazor when building contemporary and fast-performing projects:

• Leverage the productivity of C#.
• Build on the stable and mature .NET ecosystem.
• Shared component model with Blazor Server apps, implemented in Razor component files.
• Build Progressive Web Apps (PWA) with offline capabilities and native OS integration.
• Built-in support for authentication.
• Integrated globalization and localization support.
• Environment-based configuration.
• IL trimming and build-time precompression.
• Full stack debugging.
• Great tooling with Visual Studio, Visual Studio for Mac, and Visual Studio Code.

The goal when Microsoft created WebAssembly wasn’t to replace JavaScript frameworks entirely but to allow their technology to coexist with them. Blazor WebAssembly apps function similarly to Angular or React, only that WebAssembly apps are meant to become faster.

To illustrate what Blazor (WASM) can do when, for instance, you want to build an interactive dashboard, here is an example of a sample application that features Blazor Data Grid, Blazor Tree Map, and Blazor Map.

Blazor WebAssembly vs. Angular: What’s the Difference?

While Angular leverages JavaScript to develop for the web, Blazor WebAssembly has a binary-instruction format for executable programs. 

Angular tooling arrives with full debugging support in IDEs like VS Code and is more mature as it’s been around for many years. Whereas WebAssembly, despite the fact it is production ready, is still catching up.

An advantage of the WASM is that it is optimized for fewer boilerplate and is easy to get started, while the JavaScript framework has lots of boilerplate to get started and takes plenty of time to learn.

Another difference between WebAssembly and Angular is the bundle size. Angular takes 50KB (Ivy with gZip), while for .Net framework in a client-side WASM app, it can take up to 780kb (Note that Microsoft is constantly improving the impact of the WASM download to the client, which is a one-time hit, not every time you run the application).

Blazor WebAssembly vs. React: What’s the Difference?

One of the biggest differences between an app built in Blazor WebAssembly and a React application is the first-time app load, which with WebAssembly seems to be heavier due to a larger payload size. For most apps, though, the difference will be imperceptible.

Again, the difference is in the bundle size. With React, you get 2KB gzipped (a client render framework, not full stack), while the Blazor WebAssembly requires as low as 393kb and up to 780kb.

To Sum It All Up

Deciding which one is the most viable option for you comes down to several factors and questions:

• Are you a .NET developer with C# experience looking for an easy on-ramp to building modern, single-page applications?
• Do you have the time to learn a new framework like Angular or React, which are more mature than something like Blazor? 
• Or are you a JavaScript developer to the bone that would never even consider using .NET for the web?

No matter which one you choose, all three - Blazor WebAssembly, Angular, React – have their advantages and strengths. But the fact that many developers are willing to shift to Blazor WebAssembly shows that it is on the right track.