Intro to Blazor: Frontend dev with C#
14 May 2024
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
- Reduced dependency on JavaScript: Developers can utilize familiar C# syntax to build web UIs and minimize extensive JavaScript coding.
- Component-based architecture: Components promote code reusability and maintainability.
- Full-stack development with .NET: Blazor seamlessly integrates with the .NET ecosystem and allows the capability to use the same language for both frontend and backend development.
- Improved performance: Both Blazor WASM and Blazor Server offer performance benefits depending on the application's needs.
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.