Building a Web App with ASP.NET Core Blazor WebAssembly

There are various options available today to create a web app, and usually at work, you can't pick up every new framework or technology that pops up. However, we can always experiment with one (or more) and build a hobby project. I've tried creating one such app with Blazor WebAssembly and also write my first article along with it.

What is Blazor?

Blazor is an open source client side framework to build web apps using C# instead of JavaScript. It can be considered, functionally, as an alternative to React\Angular etc. to write web apps\SPAs, though it is new and the tooling is evolving.

Why Blazor WebAssembly?

JavaScript (and the libraries\frameworks around it) is the more popular choice when it comes to web apps. There were other options like Flash, Silverlight etc. though not standardized (and not relevant anymore).

With WebAssembly, things get bit more interesting. WebAssembly enables code written in programming languages (C#, C++, Rust, etc) other than JavaScript to run on the browser and it certainly does help that it is an open standard as well. Also, all the major browsers - Firefox\Chrome\Edge\Safari, support WebAssembly already.

Coming back to Blazor, it has two hosting models for the app to run either on a browser or on the server with ASP.NET Core. I want to try build a web app, in the traditional sense that has all client code downloaded in the browser and talks to some REST endpoints, and see how it compares to building such an app using say React.

The Node.js Effect

I would like to draw a parallel with Node.js - the availability of JavaScript as a runtime on the server gained significant traction. But why even talk about that here? The evolution of WebAssembly and its support for various programming languages (specifically C# in this context), to me, feels like something similar on the client side of things. Say you have a .NET desktop app or a web service, if there is a reusable piece of logic, it can then be used pretty much as is on the web now.
Of course it is too early to say, but given the browser support and growing tooling, it could get widespread adoption.

Simple app with Blazor WebAssembly

Coming to the actual web application, it is a simple mutual funds portfolio tracker. You pick the funds you want to track, enter some details and save it. The app displays basic info like % returns, value trend, top gainers, top losers, ability to add\delete mutual funds and has few graphs. The funds are randomly picked, I'm not an investment expert and this is not investment advice :)

Some details about how the app is structured -

• The data is sourced from https://www.mfapi.in/
• I've picked a few prominent funds from the above website and stored the historical data into a MySQL database. JSON result from the above API source is parsed and the historical data is stored for these funds.
• The app itself is hosted in IIS on Windows 10
• I also have an ASP.NET Core Web API for my REST endpoints, which interfaces between the app and the database. This repo has the scripts for creating tables and inserting some of these funds data into it. Here are couple of screenshots from the app -

  

Project Structure

This is the Visual Studio project structure for the web app -

• The menu items are specified in the NavMenu.razor file which is included inside the sidebar div of the MainLayout.razor. This menu is responsive, if you resize the browser you can notice that it transforms to a hamburger menu.
• All references for your services and third party components are specified in the _Imports.razor file.
• Pages are the individual pages that are loaded, to which users are routed to based on the menu item that is clicked. Each page has the @page directive and that is the same value mapped in the NavMenu.
• I've made some changes to the app.css in the wwwroot folder to handle styling
• The services should preferably have an interface and the corresponding implementation for each, which I don't have as of now.

Also, the official documentation has some more details on the project structure.

Here are the links to the GitHub repo for the Blazor UI app and the repo for the Web API project

In the second part of this article, I go over some thoughts on development experience and conclude.