Getting Started with Blazor WebAssembly

17/12/2019

Blazor, the new framework on the block for .Net developers, allows is to build interactive web apps, either running in client side or server side. In this post I will give a brief intro to the WebAssembly implementation of Blazor and how to get started.

In recent years, a lot of the logic in our web apps is moving to the client side, allowing us to have dynamic user interfaces. From when we would previously have server calls and page refreshes to update content, we now have “single page apps” where any calls to the server happen behind the scenes and the user journey is more dynamic. As a backend .Net developer, I have noticed my applications changing from MVC based to WebAPI controllers feeding a rich Javascript application. For me this has meant learning a few different JS frameworks over the years  (mainly Angular & ReactJS). So can you imagine my excitement when I heard about Blazor?! Dynamic client side applications written in C#...

 

 

Joking aside, as a .Net developer I was curious about Blazor so decided to learn more and keep track of it’s roadmap and uptake in communities.

 

Since the launch of .Net core, we can host C# applications anywhere, seeing a big change from the locked down to MS framework we have been working with for years. With Blazor being built upon that, it gives us even greater flexibility with us being able to have our logic on client or server side.

We can even utilise the shared libraries for regular .Net applications as both .Net core and Blazor run using .Net standard libraries. I think this will help with adoption of the technology as developers can use the libraries they are familiar with even if working with a new framework.

 

Client side Blazor

As mentioned, Blazor can run on the server or in browser, client side both using C#. The client side implementation uses WebAssembly and Mono (an open source implementation of .Net Framework) to allow us to run C# in browser.

 

WebAssembly

 

WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together. 

 

When a Blazor WebAssembly app is built and run in a browser:

 

* C# code files and Razor files are compiled into .NET assemblies.

* The assemblies and the .NET runtime are downloaded to the browser.

* Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

(https://docs.microsoft.com/en-gb/aspnet/core/blazor/?view=aspnetcore-3.1)

Getting Started

The Microsoft documentation is great and kept up to date with examples and notes on changes as the framework evolves. Visual Studio 2019 has “file-> new” starter templates where you can get a basic example application installed when setting up a new Blazor application. As WebAssembly Blazor is still in beta, you may need VS2019 preview. 

Have a look at the sample solution structure created, you will see the component based approach to page and widget set up. If you are a .Net developer you will probably be surprised to only see 2 .cs classes, both are for application setup.

 

The Index.razor file shows how routing works in Blazor, but also how to utilise components:

In SurveyPrompt.razor you’ll see what’s rendered when this component is called and also a look at how we can use C# in the front end code. The @code{ } section is where we can define any C# objects, variable and logic.

In the FetchData.razor file we can see how to call logic on load of your page, this is where we would have a server side Controller file in MVC land. Anything in OnInitializedAsync() is called on page load.

The HTML on this page only renders the data once the object has been populated:

As you can see, we can use “@inject” to make sure we have the libraries required by the C# code in the file. In this example, we can call via HTTP to get our sample data.

 

Production Ready?

No. As of .Net core 3.1 it’s still not in full release and still in preview. As per latest release notes in earlier in December: “Blazor WebAssembly will ship as a stable release at a future date.

 

Conclusion

So, am I ready to build my next big project in Blazor?... not just yet. I think it has great potential and would like to see what the adoption and community uptake of it is like once Blazor Web Assembly is officially launched.

 

Some resources if you would like to learn more:

 

* Intro to Blazor: https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor

* Blazor hosting: https://docs.microsoft.com/en-gb/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1

* Getting Started: https://docs.microsoft.com/en-gb/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio

* Awesome Blazor: https://github.com/AdrienTorris/awesome-blazor