Blazor Simplified: BLoC State Management For Blazor - Part-1
In this series, I attempt to display the current challenges I faced in developing large-scale applications using Blazor and the approach I took to overcome these challenges.
Blazor Current Challenges
Blazor, Microsoft’s groundbreaking tool for creating interactive client-side web applications using .NET, has gained considerable attention in the web development community. However, like any technology, Blazor also comes with its own set of challenges:
- Passing States Between Many Components
- Handling States Changes
- Lack of Simplified State Management Packages (as of now)
- Lack of Clear Design Pattern
Passing States Between Many Components
As your projects grows, your passing data techniques manually isn’t convenient as you divide your components into a tree of nested components that share the same data. Normally we would pass data either as:
- [Parameter]
- [CascadingParameter]
- EventCallback<T>
These approaches are good for few layers of components nesting for especially if your Data object that being passed not required to reactive to many Data State changes operations.
Handling States Changes
Due to its component-based architecture, a change in one component’s state may need to be reflected in other components. This can lead to problems with data synchronization and consistency, especially in large-scale applications with complex data interactions. In addition, you should have control of when/how to notify the other components of these data changes and decide manually when you want to rebuild the relying components.
Lack of Matured State Management Packages
In my opinion, I didn’t find a suitable state management package that simplifies the previous points without the implementation being complex or over-engineered solution (as of now).
Lack of Clear Design Pattern
Blazor is relatively new and as such, there aren’t yet universally accepted design patterns. This lack of clear design patterns can sometimes lead to disorganized and inefficient code.
The Solution
I published a package that aims to simplifies overcoming these challenges without major overhead in performance or boilerplate implementations.
As a developer coming from the Flutter development world, I personally use certain package for Flutter development that I like to use to tackle similar challenges that we have for Blazor, this package called flutter_bloc, which is a package that provide both a Design Pattern called Business Logic Component (BLoC) and a State Management solution. Shoutout to Felix Angelov for developing that package.
Inspired from that package, I converted it into a C# package that provide similar experience mainly based on the Cubit API available as Nuget package and the source code on github.
Therefore in Part 2 of this series, I will explain and display on how to utilize this package to overcome the mentioned Blazor challenges. Stay tuned.
