How does Blazor Work?

Although any major UI design pattern, such as MVC or MVP, can be implemented in Blazor, it is especially well-suited for the MVVM pattern:

Blazor standard flow
  1. DOM event: The user triggers an event (e.g., 'onclick').

  2. Event relayed to View Model: Using a WebSocket connection, the event is sent to the server and then to the session View Model.

  3. State change: The View Model executes business logic and updates the model.

  4. View Model update: The View Model reacts to model changes, updating its state and triggering the HTML renderer.

  5. HTML rendering: The HTML renderer uses the bound parameters from the Model to generate new HTML and compute the difference with the current state.

  6. Visual delta transport: HTML differences are streamed asynchronously to the server, reducing data transfer and improving performance by updating only the necessary elements.

  7. DOM update: The view is refreshed by directly modifying the DOM with the received data.

Last updated