Next version of ASP.NET Core is getting better and better and with it we can use new tooling for Blazor applications announced yesterday at official ASP.NET blog. Blazor is Microsoft tooling to build WebAssembly applications using .NET languages. This blog post is short introduction to Blazor tooling and WebAssembly.
WebAssembly is already supported by most popular browsers (Firefox, Chrome, Safari, Edge) and there is no need for additional plug-ins to make it work. For more information about supported platforms please follow this link to Can I Use web site.
What is Blazor?
Blazor is WebAssembly tooling build by Microsoft. They introduce it as a single-page web app framework built on .NET that runs in the browser with WebAssembly. In ideal worlds it’s up to you which .NET language you want to use to build Blazor components. Blazor is component based and reminds me React.js a little bit. Here are features supported by Blazor:
- A component model for building composable UI
- Forms and validation
- Dependency injection
- Live reloading in the browser during development
- Server-side rendering
- Full .NET debugging both in browsers and in the IDE
- Rich IntelliSense and tooling
- Ability to run on older (non-WebAssembly) browsers via asm.js
- Publishing and app size trimming
Blazor is browser-agnostic and there’s no worries like how it works on different browsers. If borwser supports WebAssembly then it can run Blazor assemblies.
Before starting with real code we need some tools:
- .NET Core 2.1 Preview 2 SDK
- Preview version of Visual Studio 2017 (15.7)
- ASP.NET and web development workload for Visual Studio
- ASP.NET Core Blazor Language Services extension (Visual Studio Marketplace)
When tools are installed we are ready for real action.
New project types
With Blazor we get two new application types when creating ASP.NET Core application.
This is what these templates are about:
- Blazor – WebAssembly demo application, the minimum you need to run something in browser.
- Blazor (ASP.NET Core hosted) – WebAssembly demo application with server back-end,
Blazor counter example
I created basic Blazor application and ran it from command line using dotnet run. As Blazor tooling is not stable yet I wasn’t able to run applications using Visual Studio. From command line everything worked fine. Now let’s focus on simple counter demo built on WebAssembly. We get it out of box when creating Blazor application.
This is actually primitive demo but still effective. Clicking on button increases counter value.
Let’s open the view for counter example and see what’s inside. The view to open is located in Pages/Counter.cshtml file.
<p>Current count: @currentCount</p>
<button onclick="@IncrementCount">Click me</button>
int currentCount = 0;
We see here familiar Razor and HTML syntax but it is turned to something that runs in browser. There’s no ping-pong with server when button is clicked. This is something weird to see for web developers like me but it’s cool.
How it works?
When we build our application then Visual Studio creates whole folder tree with all files needed to run our Blazor application. For older browser that doesn’t support WebAssembly there’s asm.js library available (don’t be surprised if it doesn’t work well yet). The whole file tree of published application is here.
The loading of Blazor application starts in our case with browser requesting index.html file. There’s not much content inside this file. Notice how browser is instructed to load all assemblies our application is using.
<meta charset="utf-8" />
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
When Blazor application is loaded by browser then all required libraries are loaded from server. Here is the fragment of requests list captured with Firefox. You can see how all DLL-s needed for our Blazor application are loaded to browser.
As we see assemblies downloaded and run in our machine without any notice by browser we usually get extremely worried and it’s time to take the main question.
Is WebAssembly safe?
All these DLL-s and the fact that browser is running somekind of byte code makes us ask perhaps themost burning question: what about security?
WebAssembly and byte code used with it is not wild west like we experienced with Java applets and ActiveX components. Just remember the load of serious security issues these technologies introduced over time. There’s not way for WebAssembly applications to do too much in user’s machine. The industry has learned from past.
Blazor is framework for single-page applications that use WebAssembly. Applications are built using ASP.NET Core and special tooling for Blazor projects. In many aspects Blazor is today similar to Reactjs and for server-side web developers it should be good starting point to highly performant single-page applications. Blazor is still experimental technology and it is not ready for using in production systems. Still it’s time for web developers to jump in and start trying it out.