Brief Summary
Shawn Wildermuth explores Blazor WebAssembly (wasm) to determine if his previous reservations about it were justified. He examines a client-side Blazor application, discussing its structure, the use of C# for web development, and the performance implications. He concludes that Blazor wasm is a viable option, especially for developers familiar with the Microsoft ecosystem, but notes some tooling and optimization challenges compared to traditional JavaScript frameworks.
- Blazor wasm allows building client-side web applications using C# instead of JavaScript.
- The framework leverages web assembly to execute .NET code in the browser.
- While Blazor offers a familiar environment for .NET developers, it has tooling and optimization challenges.
Introduction
Shawn Wildermuth introduces the topic of Blazor, reflecting on his past opinions and deciding to re-evaluate it, particularly the client-side web assembly (wasm) aspect. He mentions his upcoming workshop on asp.net core architecture. He expresses initial skepticism towards Blazor's early server-side rendering approach using SignalR, but acknowledges the shift towards web assembly for client-side development.
The Project
Shawn demonstrates a simple Blazor project in Visual Studio, emphasizing that it's a client-side application without server-side components. He highlights his experience in building similar websites using JavaScript and TypeScript, and aims to compare that experience with using C# in Blazor. The application calls rest services to function.
Project.cs
Shawn explains the structure of the Blazor project, starting with Program.cs, which sets up the application. The root component, "app," is added and mounted to an HTML element with the ID "app," defined in index.html within the wwwroot folder. This setup is similar to other Single Page Application (SPA) frameworks, where markup is built inside code and mounted into an HTML object. The project uses services to build up different components, connecting to an API in Azure and instantiating a client to use it.
App.cs
The "app" class contains markup that defines the application's structure. It uses a route view to handle routing, similar to view. The class includes a "not found" page for unmatched routes. Components like layout view and page title are C# classes.
Open Web?
The layout uses razor syntax to inject the page body. Tailwind CSS is used for styling, integrated through npm and post CSS. The task Runner Explorer extension runs Tailwind in the background, with bindings set to run when the project is opened. The build process is similar to other asp.net core projects.
Pages
Shawn discusses the pages within the Blazor application, noting that while many pages consist of markup, it's common to include code blocks as well. He prefers keeping code in a separate class for testability. He shows the homepage with razor syntax for conditional rendering and data binding.
State
Shawn addresses state management, explaining how to share state across different components. He uses a simple class, "app State," injected into the service collection to ensure all components receive the same instance. This class manages lists of films and years, with methods for loading data and updating the state.
Data Binding
The "app State" object is injected into pages, allowing data binding to populate elements like select dropdowns with data. The state object provides options for years, and film data is displayed using components.
Components
Shawn introduces the "film view" component, a thin razor page with markup defining the film's appearance. This component is used to display film information in a consistent manner across the application.
Under the Covers
When running the application, a message indicates that linking tree shaking is disabled, resulting in a larger application size during development. The core of Blazor wasm is the blazor.webassembly.js file. The build output includes .net js, Blazor js, and wasm files. The framework loads wasm files, and the size of the application is larger due to the lack of tree shaking. Web assembly is central to Blazor, but initially, only the framework and CLR were wasm, with other components loaded from dlls.
Wrapping It Up
Shawn concludes by revisiting his initial question about Blazor. He acknowledges that his opinions have evolved with new information. While he might not use Blazor for all web applications, he sees its value for developers accustomed to the Microsoft ecosystem or those needing to build web applications without extensive JavaScript knowledge. He notes tooling issues, such as the need to restart the project frequently, and concerns about optimizing web experiences due to the black-box nature of Blazor wasm. He suggests that Blazor wasm needs further polishing, particularly in the JavaScript wasm bridge. He believes wasm is more beneficial for tool vendors needing efficient memory management. Despite his reservations, he encourages discussion and acknowledges that Blazor meets specific needs, especially for organizations within the Microsoft ecosystem.
