Introduction
Blazor is a programming framework to build client-side Web applications with .NET. It allows .NET developers to use their C# and Razor knowledge to build interactive UIs running in the browser.
Unlike Angular, ReactJs or VueJS which is a development platform, built on TypeScript/JavaScript and change process takes place on client side. Blazor built on C# and the change process occurs on server side. This article is review how that process doing.
Architecture
The scenario of interaction between server and client:
1. Initial Request: The client initiates a request to the Blazor web server.
2. Initial Response: The Blazor server responds with the initial HTML, CSS, and blazor.web.js, the browser renders the DOM with these content.
3. WebSocket (or SignalR) Connection: the blazor.web.js establishes a WebSocket connection with the server using SignalR.
4. Server side In-Memory State: The blazor server creates the in-memory tree representing the initial state of the webpage.
5. Client Interaction: The user does interaction with the page, like clicking a button or typing input text.
6. Blazor.web.js: blazor.web.js captures the interaction and sends it as a binary message through SignalR to the server.
7. Server In-Memory Tree Presentation Update: The server received the binary message, deserialize then processes the interaction and updates the in-memory representation, to create a new in-memory tree presentation.
8. Server In-Memory Change Process: The server compares the new tree with the old tree to identify the differences.
9. Change Creation: The differences between the old and new trees are packaged into a binary message.
10. Send Changes to Client: The server sends this binary message back to the client through SignalR.
11. Blazor.web.js: the browser receives the change, then blazor.web.js applies the changes to the existing DOM, updating only the modified parts.
12. Changes Reveal to User: The modified DOM updated, it means UI elements updated without a full-page refresh, quick responsiveness.
Explanation
Blazor.web.js
This file is responsible for setting up a real-time communication channel (web socket) between the browser and the server. This JavaScript file include functions to manipulate DOM to ensure the changes are updated in the browser without the need to reload the entire page.
Server Side In-Memory Tree Presentation
Blazor Server uses a concept known as render trees. A render tree is a lightweight, abstract representation of the DOM that represents the layout and state of UI components.
Current Tree: The render tree created by the latest interaction with the server. It captures the state of all components and their DOM structure.
New Tree: When user interacts with the UI like clicking a button, a New Tree created that reflects the updated state after the interaction.
Diffing Process
Blazor server performs a diffing operation, comparing the Current Tree with the New Tree to identify changes. This diffing is highly efficient, as it only looks for differences between the two trees rather than re-rendering everything.
Patching the DOM changes
Once the differences are identified, Blazor server packages these changes into binary messages and sends them back to the browser through the SignalR channel.
On browser receives these updates and patches the existing DOM accordingly, blazor.web.js ensuring only the modified parts are updated.
SignalR Connection
SignalR uses the new WebSocket transport where available and falls back to older transports where necessary. While you could certainly write your app using WebSocket directly, using SignalR means that a lot of the extra functionality you would need to implement is already done for you.
Conclusion
The Blazor framework works differently from other TypeScript frameworks on the perspectives of communication between client and server and the change process. We should consider the challenge of SignalR when go through Layer 7 of Front Door network and authentication.
References
Blazor | Build client web apps with C# | .NET
ASP.NET Core Blazor JavaScript interoperability (JS interop)
Real-time ASP.NET with SignalR | .NET
Source: Tran Ba Don – Senior Software Engineer
