Blazor is used to create rich and interactive UIs with C#. Blazor applications are built using Razor components, which is an ASP.NET capability. These are files that contain C# and HTML.
Before we dive into Blazor, let's talk about web development in general.
Usually, you create a web application that runs on a server with code like Java , .NET, Node.js, or any other type of code.
Later Client Side framework is introduced and you start using frameworks like Angular or Vue or React to create your UI. These frameworks are great at developing fast and interactive UIs, and they all run on JavaScript, the scripting language of the web.
Wouldn't it be great if we could run C# in a browser. It works by having a .NET runtime that is compiled into WebAssembly bytecode. This .NET runtime runs in the browser and can run whatever .NET assemblies, so DLLs, that you give it, including C# code that we create in a Blazor application.
Why should we use Blazor?
Well, because if we use Blazor, we can run our app in any browser, including mobile ones, because WebAssembly is part of all major browsers. We are no longer dependent on plugins like we were back in the day with Flash and Silverlight. And we use Blazor because it allows us to reuse our C# skills.
C# is a great development langauage & strongly typed which means we can catch the error at compile time instead of runtime. Blazor is just a framework that runs on the .NET runtime, so we can use any library that we want to use, as long as it is compatible with .NET Standard.
This means that we can use our own libraries and also almost all public NuGet packages
There are couple of strong reasons, which indicate why we should use Blazor
- WebAssembly is supported by all major browsers
- Use C# for interactive web applications
- Reuse existing libraries
- Performance is near native
- Tooling and debugging
You can check and choose the tool as per your convenience. Below are options to get started with Blazor.
Let's discuss what is Blazor Server and Blazor Web Assembly,
Blazor WebAssembly runs on the client in the browser . It downloads everything that it needs to the browser including HTML, CSS, maybe some JavaScript, and possibly images. It also downloads the assemblies that make up the application, and it even downloads the complete .NET runtime that is converted into WebAssembly bytecode. All of this runs completely on WebAssembly, which is a part of all major web browsers, including mobile browsers. This type of Blazor application doesn't need a connection to a server. It just needs to load into the browser, and that's it. A Blazor WebAssembly app consists out of static files, so you don't need a full-fledged server to get this to the browser. You could host the static files on a content delivery network, or CDN, which is relatively cheap and is globally performant. You can also host it on a server in the cloud, in your own data center, or anywhere else.
Advantages
- Near-Native Performance, runing your app on webassemble is fast.
- App can work completely offline.
- No Server Needed, you do not have to maintain the server and keep architecture simple. it require resource processing at client device
- No Plugin required, WebAssembly is native part of all major browsers. it takes all static files into browser
- Run in all Modern Browsers
Downsides
- Restricted to capabiities of browser. It download everything into browser including .NET runtime.
- Browser does all the work.
- More to download intent to longer load time.
- Secret or Key need a connection to API, it need to downlaod at clientside and there is way to encrypt which is not safe.
- Required WebAssembly, Some time your app runing to old browser which does not have webassembly and app will not work in that case.
Blazor Server is a server-side Blazor app. App runs inside an ASP.NET website that runs on the .NET runtime. This website then serves the Blazor website and loads Blazor through a WebSocket connection that it uses through SignalR. Using this, UI updates are streamed from the server in real time. This sounds complicated, but you don't have to do anything special to make this work. This all comes out of the box.
Advantages
- Less downloading and loads fast .
- Complete ASP.NET Framework.
- WebAssembly not needed.
- Server Side Keys or Secrets are Safe to use.
Downsides
- No Offline Support
- Need an enviornment or server that run on ASP.NET Core.
- Higher Letency and Slower Application
Finally, Lets conclude, when to use what with couple of key consideration
| Key Consideration |
Blazor Web Assembly |
Blazor Server |
| Near Native Performance required |
Yes |
No |
| Connection required to Server Side Resources |
No |
Yes |
| You can't rely on the web assembly |
No |
Yes |
| Offline Capabilities |
Yes |
No |
| When you do not want to run on the ASP.NET Core Server |
Yes |
No |
| When you want to create fast , interactive web apps with C# |
Yes |
Yes |
I hope you enjoyed and learned something new in this article.