In past few articles, I have been writing about minimal APIs using .NET 7. Starting from this article, we are going to work on creating a basic Blazor web application, which uses those APIs. The next section in this article elaborates more on the planned articles.

What is the plan ?

In past few articles, we have built a minimal API which has basic CRUD operations. If you have not gone through those articles yet, you can find the links of those articles below.

• .NET 7 – Getting started on Minimal APIs
• .NET 7 – Configure Minimal APIs to use EF Core Database
• .NET 7 – Minimal APIs with Serilog Logging Providers
• .NET 7 – Minimal API and Dependency Injection
• .NET 7 – Using Configurations with Minimal API

Starting from this article, we will start building a Blazor application, which uses those APIs. In this current article, we will just get to know about some basics about Blazor.

We can add-on functionality slowly into this application. While adding features, we will go through various concepts which are essential for web app (or API) development using .NET. Once there is enough functionality, we will create a CI/CD pipelines using Azure DevOps (or GitHub actions).

That’s a rough plan as of now. Of course, if you want me to include any aspect of application development, and it is related to .NET / Any cloud platform, you can reach out via comments. Based on comments, we can adjust the plan.

Also, your comments / endorsements would help me know that you are interested in these articles and that will motivate me to keep going on in that direction.

So, let’s get started.

What is Blazor ?

Blazor is a feature of ASP.NET, the popular web development framework that extends the .NET developer platform with tools and libraries for building web apps. With Blazor, you can build interactive web applications using C#, instead of JavaScript.

Since past few years, we have seen Single Page Applications using JavaScript or some JavaScript based frameworks like Angular, Vue, React, etc. Single Page Applications have been popular choice as it helps minimize the interactions between server and client.

For all JavaScript based frameworks, the needed skills are HTML, CSS and JavaScript (of course). There has always been a challenge about the compatibility of these technologies with browsers. In last few years, browsers have started working on standardization, but the issue still exists (more or less). This issue may not be very big for B2B applications, where organization can control versions of browsers. But it is very big for B2C applications.

Blazor can certainly help to reduce (if not completely remove) such issues. We can create reusable components using HTML / CSS and C#. Yes, client side code can be written in C# and that’s the special thing Blazor offers.

Let’s try to create first project !

Let’s Open Visual Studio 2022 (17.4, currently in preview). Then select option for creating new project. In this “Create a new project” wizard, search for Blazor. We can see that there a multiple project templates matching this search result. The question now is – which one is better suited for our needs ?

Below are top 4 options for me for this search:

• Blazor Server App
• Blazor WebAssembly App
• Blazor Server App Empty
• Blazor WebAssembly App Empty

Now what is Blazor Server app and What is WebAssembly App ? How are they different from one another ? Let’s discuss briefly.

Blazor Server App

This type of project, as the name suggests, executes all the code on server-side in an ASP .NET Core Web App . So the runtime stays on the server. The UI updates are handled over a SignalR connection.

• So, server executes the request and creates the DOM (HTML) for the page.
• This page is sent to the client
• Client sends the UI events from browser to server
• Server then calculates the updates to the rendered component and then sent back to the browser

So, this type of project is not really a Sigle Page Application. Here, all the UI events are making calls to the server.

Although both Blazor Server and Razor web apps use same razor page syntax for the web pages, the way pages are rendered are completely different.

Razor web app re-renders complete HTML on receiving the new request. It does not hold any state between two requests.

Blazor server app keeps graph of all the components. Blazor evaluates the component graph to produce a binary representation of the markup, which is sent to the client for rendering.

After the connection is made between the client and the server, the component’s static prerendered elements are replaced with interactive elements. This kind of pre-rendering of components help to make the app feel more responsive.

Blazor WebAssembly App

Blazor WebAssembly is another type of project. Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps.

Blazor WebAssembly uses open web standards, without any browser-plugins. It does not even need to recompile / translate the code from C# into other languages. Blazor WebAssembly is supported by all modern applications.

Below is how the Blazor WebAssembly code is executed:

• C# code files and Razor files are compiled into .NET assemblies.
• The assemblies and the .NET runtime are downloaded to the browser. If the application is too big, Blazor optimizes the download packages to provide better user experience by reducing the download times.
• 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.

Wrapping Up

So, in this article, I have tried to compile basic difference between Blazor Server App and Blazor WebAssembly App. Of course, this is just a summary of the things which I thought were important to know. For knowing more, you should refer documentation.

I hope you find this information helpful. Let me know your thoughts.