Nugget 13: Blazor and MVVM Design Pattern

 

In Nugget 9, a simple Blazor application was created using scaffolding with Entity Framework. This Nugget is about using the MVVM Design Pattern in this application.  Yes, I am squeezing this little app for all it's got!

Why bother?  You might ask.  The simple answer is "Separation of Concerns".  Applying this pattern to this simple app implies subdividing it into distinct sections, each responsible for a specific aspect or concern.

This design pattern offers numerous advantages, allowing different aspects of the application to be developed separately. It improves readability, maintainability, reusability, and, one of the most important, and sometimes overlooked, testability.

MVVM

In the Model-View-VideModel, the Model is an abstraction representing the data of the application.  This data could be from the database or provided by an API, or service, or a combination of sources.  

The ViewModel contains properties, business logic, and event handlers that the View binds to.  The ViewModel also notifies the View that it needs to update through notification updates. This is where user input is validated and UI events and commands that respond to user actions are processed. For example, filtering of data and searches.  The ViewModel is in communication with the Model to get the data it needs.

The View is the visible part of the app, containing all UI elements.  The view should not contain any business logic. 

Decoupling Index.razor Presentation from Its Code

Applying a design pattern to an application after the fact could be challenging.  Because this app is very small, this could be done easily. 

View-ViewModel

To start decoupling the component's view and its code, a ViewModels directory was created under the JobPostPages component, and three files were added: IIndexViewModel, IndexViewModel, and JobPostViewModel. 

IIndexViewModel is an interface abstraction defining the behaviors and properties of the ViewModel when this interface is implemented in IndexViewModel.


Note that all the business logic that exists in Index.razor Nugget 9, has been moved to the ViewModel. This includes the filtering properties and event handlers.  Decoupling the logic from the view leaves behind a  lean view in Index.razor.  The binding now is to the ViewModel.


Note that in the view, the ViewModel is not used directly but its Interface.  The ViewModel interface is injected in line 4 of the View.  

ASP.Net Core supports the dependency injection (DI) software design pattern, a technique to achieve IoC or Inversion of Control.  This is the Dependency Inversion Principle in SOLID, which allows an external framework to manage the creation of dependencies.  Note IndexViewModel gets the DbFactory injected thanks to this mechanism.


The other class in the ViewModels directory is the JobPostViewModel  I should rename this class JobPostIndexViewModel to differentiate it from the ViewModel for the Create and Edit views.  This ViewModel models the Model JobPost, and it does not need all the properties and it is a plain POCO.

Conclusion

In this post, using a design pattern, the View and the ViewModel of the Index component have been decoupled.  This is a very simple solution, however, this exercise shows its advantages. The solution is more readable.  It also shows that the ViewModel can now be tested.  

You might think that this is not a pure MVVM design pattern implementation and that it resembles the MVP (Model View Presenter) design pattern.  The fact is that these design patterns are closely related and pursue the same objectives: Single Responsibility Principle, the big S of SOLID.

References

  1. Model-View-ViewModel (MVVM):  This pattern was created by Microsoft to facilitate the development of desktop applications using the Windows Presentation Foundation classes (WPF).
  2. Dependency injection in ASP.NET Core

Comments

Post a Comment

Popular posts from this blog

Nugget 9: Building a JobBank App using Blazor. A Nugget with a Story.

Image
One of my daughters is about to graduate in a few days, and she has a contract lined up already as a Game Developer! As a happy Dad, I am very proud of her accomplishments.   " Dad, how do I keep track of the employment opportunities I have applied to? " Good question; you need to keep track of who you send your resume to. Your email application outbox doesn't work well because some job applications are submitted online, and most of the time, the platform that handles applications doesn't send you a thank-you email. Plus, you could see the same job elsewhere and apply again by mistake, which is detrimental to us. You could create an Excel document and use it as a job submission database. You could search, filter, and add notes and comments after a phone call or interview. You could also make a record of any topics you might need to review before the initial contact with the potential employer based on the job description. This is practical, but not as fun. " How ...
Read more

Nugget 14: Connection to MongoDB Atlas - SSL Alert 80

Image
  I'm using MongoDB Atlas (1) to host my NoSQL database. Creating an application with the MERN stack was very straightforward. However, after a few hours, when I tried to run the same application, Atlas displayed an SSL error message. How is this possible? What changed overnight? Something changed overnight, of course! When creating the cluster in Atlas, my IP address was configured (2), and by default, it expired after 6 hours. The error message was a bit misleading, although the problem was discovered after some investigation. Either re-whitelist your IP address or remove and re-add it to fix the error. I had a harder time finding the solution in Atlas, so I'm writing it down. Log in to Atlas, go to Network Access, and fix it there.  There is also an option to be able to access the app from any IP.  I prefer to restrict the IP. After the correction, it worked as expected. The Atlas MongoDB database is impressive (3, 4).   References & Notes MongoDB Atlas ...
Read more

Nugget 11: Adding Filtering to a Blazor QuickGrid

Image
  The best way to add filtering to a Blazor QuickGrid is by creating an expression tree representing the predicate of a LINQ Lambda Expression Where clause. In  Nugget 9  , a simple Blazor app that supports CRUDE operations was created using scaffolding and Entity Framework.  Because the app loads a collection of items from the database and index component containing a QuickGrid component was created to display the collection of items. The above code represents the Index.razor component, which was modified after it was created.  Directives are omitted for simplicity. The component filters the collection of JobPosts by two model properties: JobPost.ApplicationDeclined , and JobPost.JobType using a checkbox and an input field.  The input field is defined in the ColumnOptions for the JobType PropertyColumn  and is bound to a component string variable, jobTypeSearch . Because this variable is bound to the input field, the variable is updated whene...
Read more