I ❤️ .NET

In this article, let's learn about what is Blazor WASM and why to go for Blazor WASM and how it differs from JavaScript SPA's like Angular, React and Vue.

Table of Contents

1. How Blazor idea was born?
2. How Web Applications work?
3. Running any code in browser
4. Why use Blazor?
5. What is Blazor?
6. Ways to develop Blazor application
7. What is Blazor Web Assembly?
8. Benefits and Drawbacks of Blazor Web Assembly
9. Summary

How Blazor idea was born?

Gone are the days where I used to develop server side razor components in ASP.NET MVC or Razor Pages and the other developers around me used to develop client side components in Javascript using Angular, React or Vue. All these JS SPA's were dominating the UI world. And these requires us to master JS(Javascript) or TS(Type Script). I used to wonder why not all these are possible with .NET. Luckily few years later from that point of time, Steve Sanderson (Father of Blazor) from Microsoft introduced the idea of running razor components in browser using web assembly. Thus browser + razor = blazor was born.

How Web Applications work?

Usually we have a business logics built with .NET, JAVA or Node JS running on server to serve the user interaction and needs in browser using client side technologies like Angular, React or Vue. This works well but there is a disconnect between server and client that you cannot reuse server side code with client side code that you use to buld UI. You cannot reuse your skillset and mastering UI framework need a steep learning curve. But nowadays the good news is that you can run any code in browser using Web Assembly.

Running any code in browser

Web Assembly is a way to run byte code in browser inside the javascript runtime sandbox. You can compile any code (C#) to Web Assembly byte code and run inside browser in a near native speed without any plugin and that is because Web Assembly is part of all major browsers including mobile browsers. Yep we can run C# in browser. It works by having .NET runtime compiled into WA byte code and this .NET runtime can run any .NET assemblies.

Why use Blazor?

Why should we still go for blazor? that's because,

• WA is part of all major browsers including mobile browsers.
• We can reuse our skill set with C# which is a strongly typed (unlike Javascript) and evolving language.
• We can resue Nuget libraries as long as they are part of .NET standard.
• Performance is near native and over and above for image processing, browser based games and graphics/video editing.
• We have an unmatched tooling (Visual Studio / Visual Studio Code) support backed by Microsoft.

What is Blazor?

Blazor application consists of razor components from ASP.NET which contains HTML, CSS and C# to make a website up and run. You can see Dialog.razor component which contains a button and on click of it OnYes event will be invoked. We can also nest component like how we have Dialog.razor component inside Index.razor component.

When Blazor application is built, it produces .NET standard assemblies (.dlls) which will be converted to Web Assembly byte having .wasm extension by the .NET runtime. This will have all the necessary dependencies and .dlls like System.dll, Microsoft.AspNet.dll and ofcourse your blazor app .dll to run blazor app in browser.

In browser, .NET runs in Web Assembly and Web Assembly runs in Javascript runtime sandbox just like any other JS code. Here it runs the .NET like mono.wasm which runs the dlls of your app. As this runs in Javascript runtime, you can get access to browser capabilities like Web Sockets, File API, other capabilities and DOM which is used to update UI. This can also interact with other JS code which means you can call JS from .NET and JS can call .NET methods.

Ways to develop Blazor application

The most common ways to develop blazor apps is by using,

• Visual Studio
• Visual Studio Code
• .NET CLI
• Jetbrains Rider

What is Blazor Web Assembly?

Blazor Web Assembly is one of the architecture that you can use to build your blazor web application. Blazor Web Assembly is a kind of blazor that runs in client in browser. When the blazor app loads, it downloads everything needed to run inside browser. This includes HTML, CSS, images and sometimes JS files along with all .NET .dll's and complete .NET runtime that is converted into Web Assembly byte code. It consists of all static assets and no server connection is needed to run the app. This means it can be server from,

• CDN as static content
• Server
• Azure Static Storage Website
• GitHub Pages

Benefits and Drawbacks of Blazor Web Assembly

The benefits are,

• Near native performance or exceptional performance for browser based games, image processing or video editing.
• Can work offline.
• No server neede. A technology to serve static file is enough.
• Makes completed use of client side resources.
• Runs in all modern browsers.

The drawbacks are,

• Restricted to capabilities of browser.
• Browser does all the work.
• Longer load time when there is more to download.
• Not able to maintain client side secrets.
• Web Assembly is required.

Summary

Blazor Web Assembly is a incredibly powerful SPA from ASP.NET family which is used to build web apps using HTML, CSS and C# instead of JavaScript. This runs completely inside browser using Web Assembly without a need for server. It can work offline and gives near native performance. This can be used for browser based game development, image/video processing to give unmatched performance. Above all it is opensource and backed by Microsoft and .NET community.