logo

Doris's Tech Blog

Welcome to my tech blog, where I share my knowledge and insights on all things web development.

Doris Siu

Intro to Blazor: Frontend dev with C#

14 May 2024

Doris Siu

Doris Siu

I’ve always wanted to write an article designated for Blazor, now it’s the time! Although I might not have the opportunity to use this technology in the future, it is always good to allocate a space (which is my tech blog) for this piece of knowledge and consolidate what I have learned so far. To clarify, I’m not an expert! But it is worth sharing what I was confused about when I started to learn about Blazor.

C#

.NET

Frontend

While JavaScript has dominated the world of web development for years, Blazor has emerged to break this practice and it offers the capability for developers using C# to craft interactive web UIs instead of relying heavily on JavaScript. You can leverage familiar tools like Visual Studio to create Blazor applications and take advantage of the vast .NET ecosystem.

Blazor is a component-based web framework that integrates with ASP.NET Core which is developed by Microsoft and it leverages WebAssembly (WASM) to run .NET code in web browsers and enables rich client-side functionality.

Advantages

Single-Page Application (SPA)

Blazor application is a SPA that loads a single HTML page initially and updates content dynamically using the framework. This provides a smoother user experience compared to traditional web applications like ASP.NET MVC which reloads the entire page for each user interaction.

It offers two primary modes for building SPAs - Blazor WASM (provides the full SPA experience) and Blazor Server (the browser receives rendered HTML for faster initial load).

While Blazor isn't as widely used as React or Angular, it's a growing option for building modern and interactive SPAs with the benefits of the .NET ecosystem and is particularly appealing for .NET developers.

Differ from ASP.NET MVC

ASP.NET MVC (Model-View-Controller) is primarily a backend architectural pattern that separates an application into three parts. While I won’t go deep into MVC and its components, I’d rather clarify some tricky points.

Although MVC does have some involvement with the front end through Razor views (cs.html files) which combine HTML with C# to generate HTML content dynamically on the server side and then send it to the browser for rendering, it's still considered a backend framework because its primary concern is on the server side and doesn't directly handle the user interface logic and interactivity - which still belong to the responsibility of frontend frameworks like JavaScript, Angular or Blazor.

Here's a simple summary of how ASP.NET MVC flows:

Handle User Requests -> Route to Controller -> Controller interacts with Model -> Controller interacts with View -> Generate Dynamic Content by the Razor view -> Send the response to Browser -> Frontend webpage rendering

Server-Side Rendering (SSR)

In simple terms, SSR involves the server generating the complete HTML content for a webpage in response to a user request. The pre-rendered HTML is then sent to the browser for display

While Blazor WASM doesn't involve the server in rendering the initial HTML content or subsequent UI updates but Blazor Server does involve SSR to a certain extent.

Although Blazor Server doesn't generate the entire webpage like traditional MVC, it generates the HTML for the Blazor UI components in response to UIs. The server actively participates in rendering the UIs, even though it's not the entire webpage. It leverages a form of SSR specifically for Blazor UI components, which strikes a balance between server-side processing and interactive frontend development with C#.

Interested to learn more?

Check out the official Blazor documentation from Microsoft to get started - https://learn.microsoft.com/en-us/aspnet/core/blazor/tutorials/?view=aspnetcore-8.0

Visual Studio also offers built-in Blazor project templates for quick and easy project creation.



Disclaimers