blazor, wasm, webassembly, netcore, c#

Blazor, a quick view

Blazor is a new framework for building interactive client-side webs with .NET.

updated on May 7, 2021

What’s new?

• You can write code in C# instead of JavaScript
• You can create components like other frameworks such as Angular or React (but without JavaScript)
• Now you share app logic across server and client
• You have the benefits from .NET’s performance, security and existing .NET ecosystem of .NET libraries

Blazor apps are based on components.

A component in Blazor is a piece of UI, such as a page, a modal, a form or it could be a little piece like a button (with it’s own logic).

Those components use the Razor markup and the files are .razor extension.

So you’ll see that the components are a combination of HTML, C# and Razor tags.

These components are classes build into .NET assemblies that:

- Define UI rendering logic.

- Handle user events.

- Can be nested and reused.

- Can be shared and distributed as Razor class libraries or NuGet packages.

Info taken from official page, link.

Two models of Blazor

Blazor WebAssembly (current .NET 5)

Is like a SPA (single-page app), you write your code in C#, it just uses open web standards, you don’t need plugins or code transpilation (like typescript to javascript), and it works in all modern web/mobile browsers. (browsers’ supported).

Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly is an open web standard and supported in web browsers without plugins.

WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability (or JavaScript interop). .NET code executed via WebAssembly in the browser runs in the browser’s JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Info taken from official page, link.

When you build a Blazor WebAssembly app, the code are compiled into .NET assemblies, and for ‘code’ I mean, C# and razor pages. After that, the .dll files are downloaded to the browser, WebAssembly bootstraps the .NET runtime and load the .dll for the app. WebAssembly runtime uses JavaScript interop to manipulate the DOM.

Blazor Server

As I see it, Blazor Server is a bit like WebForms but better, much better. Why as WebForms? Because the UI is rendered in the server (like WebForms) but updated throught SignalR now.

You’ll forget about working with update panels, don’t worry anymore if the page refreshing is working properly with nested update panels either. If you need to update UI, is now as simple as never was. You don’t need to use JavaScript or libraries like JQuery, don’t missunderstand me, I used to use them but now with Blazor the game has changed.

The main difference with the first model, is that this one doesn’t run on WebAssembly, all code is in the server, and the renderization of the UI happens through SignalR.

The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.

The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

Info taken from official page, link.

Let’s see an example

You can create a modal like those ones used on Bootstrap, let’s see how you can do that.

Here you’ll find the code: https://github.com/facaneo/BlazorAppWA

I’ve created a simple solution Blazor WebAssembly.

Steps:

1- Open Visual Studio 2019, (netcore 5)

2- Create a new project

3-Select “Blazor WebAssembly App”

4- If you didn’t install lastest version of Visual Studio, this might be different.

Here you can check “ASP.NET Core hosted” if you want to use .netCore as your backend.

And also you can try with “Progressive Web Application” if you want to go further on this example.

Let’s see the result first:

Now I have your attention, you should know this code is all written in C#, there is not javascript! anywhere!

That’s awesome, right?

So, to make this example, I’ve created a component for the modal, this is the code:

And I’ve added a page with a button, just to show the functionality:

Well that’s all for this post, I hope you liked it.