Rules to Better Blazor

There are numerous frameworks available for front-end web development, with different developers preferring different tools. Some people like Angular, some like React, and some prefer Blazor.

Due to Blazor using C#, your client and server can share the same model library - sharing behavior and data.

This will reduce the amount of code you need to write, and make it easier to maintain.

The AppState pattern is one of the simplest State Management patterns to implement with Blazor WebAssembly.

Implementing the INotifyPropertyChanged interface is one of the most popular and .NET native approaches to notify other components of changes to a shared state object.

When using two-way binding in Blazor with @bind-Value, you might want to execute code when the bound value changes. A common mistake is trying to use both @bind-Value and ValueChanged together, but this causes a compile error because ValueChanged is generated by the @bind-Value directive.

The correct approach is to use @bind-Value:after which triggers a callback after the value changes.

When creating Blazor components that communicate with web APIs it is often tempting to inject the HttpClient and use it directly to send requests. While this is quick and easy to accomplish, this tightly couples the component to the HttpClient and the specific implementation of the web API. The downside of this tight coupling is that the component cannot be easily refactored for breaking changes (e.g. routes, payloads, querystrings, auth, etc) then the blast radius of changes can be quite substantial. The problem grows even further if accessing the API from multiple components. Another downside is that the component is no longer unit testable. Integration tests will be necessary which will require more effort to implement.

When you create a Blazor component, view parameters are marked with the [Parameter] attribute to indicate that they must be supplied by the parent component. By default, this is not enforced, which may lead to errors where you forget to pass in parameters where you use the component.

You should use the [EditorRequired] attribute to mark parameters that are required in your Blazor component.

Unit testing is an essential part of the software development process, especially for Blazor applications. bUnit is a testing library specifically designed for Blazor components, making it easier to write robust unit tests. It is installed via a NuGet package and can be used with any testing framework such as xUnit.

When you use bUnit, you can simulate user interactions and assert component behavior in a way that is close to how your users will interact with your application. This can significantly increase the reliability of your components.