Blazor Components Architecture

Published on Sunday, December 24, 2023

Blazor Components - Architecture

In the “Blazor way” of structuring an application, responsibilities are divided across presentation components, container components, services, and business functions.

Presentation components, like buttons or lists, should limit their functionality to accepting data via properties, and responding to user interaction with events. While presentation components can consult services to facilitate their operation, such as validating an email, they should not use those services to call any business function.

Presentation components are generally hosted by a container component, frequently a page. The page is responsible for fetching the data that is bound to the presentation components, and handling the events they generate. The page defers all other operations to one or more services. For example, imagine a portfolio page that is supposed to display details of ten stocks handed to it. If the presentation component fetched the data, that would be ten calls to the back end, but it would only require one call if the page handled it.

Services provide business functions by coordinating back end operations. Keeping business functionality in the services allows the components and the services to be written and tested separately.

Example:

  • A user fills out a form
  • When all required data is entered, the page enables the save button.
  • The user clicks the save button,
  • The event handler on the page calls a service method to perform the save.
  • The service may interact with one or more back end functions to achieve the business result; one might want a change to a record to also send an email, or raise a flag.