Blazor is a framework for building interactive client-side web user interfaces with .NET.
Currently there are a few hosting models:
- Blazor Server
- Mobile Blazor Bindings
- Blazor Electron
- Blazor WebAssembly
All of these models are in different stages of development. The only finished product for now is Blazor Server, but WebAssembly is not far behind with its preview stage.
On the outside, the rendered applications look similar to applications created in any other framework, but the code structure and the solution dictionaries are very different. By default, Blazor applications have files inside of the Pages folder that resemble View and Controller files from MVC applications, but they are merged together and have a .razor extension because they use Razor syntax.
The shared folder contains MainLayout.razor, which is the application’s master page, NavMenu.razor, which is the navigation bar code that was put in a separate file for simplicity purposes, as well as SurveyPrompt.razor. This improves code readability and allows for easier navigation between code. The NavMenu file is inserted in MainLayout as a custom tag helper that is replaced with code from the file in render.
Apart from the folders mentioned before, the solution’s root directory contains files like _Imports, App, and Program._Imports.razor contains namespaces that are used by the application. App.razor takes care of managing routing between pages and displaying errors if the client’s wanted page does not exist, just as it is illustrated in the example below. This file also contains DefaultLayout and Layout attributes that handle the usage of the selected layout in cases where the page does and does not exist. Program.cs is where the application takes care that it is correctly running.
A good example that represents new code structure on the default application is the Counter.razor page.
ASP.NET Core SignalR
ASP.NET Core SignalR is an open-source library that simplifies adding real-time web functionality to apps. Real-time web functionality enables server-side code to push content to clients instantly. This library is supported by Preview of Blazor WebAssembly version 3.2.0 and up.
This feature is one of the most interesting ones because it allows you to add real-time functionality to your Blazor application. This can be implemented in a variety of applications that contain notifications, frequent data updates or sending messages functionality.
The client connects to a hub which can be provided by your server; this handles the dispatching of messages to the clients. Communication between the client and the hub can be either JSON or a binary format based on MessagePack which will produce smaller messages.
An example for creating an application with implemented SignalR library like in the picture below can be found here.
Similarities/Differences to MVC
A regular ASP. NET Core MVC renders the user interface as blocks of strings. Blazor builds a render tree, which is not a string, but a representation of the DOM (Document Object Model) that is held in memory. Blazor keeps this representation. Any changes made to it will trigger a UI update for the affected DOM elements. This is a big difference in comparison to ASP. NET Core HTML Helpers and Razor Views, which render out strings.
- Allowing .NET code to run directly in the browser which means better performance
- Compiles to static files, meaning there is no need for .NET runtime on the server
- Apps can be run in an offline state (WebAssembly model)
- Requires download of the application's .wasm (WebAssembly) files and .NET libraries. This might take a few moments to download the first time the application is started, but afterwards the files are cached in the browser
- Still in preview
This framework looks promising in regard to revolutionizing the development process of web applications. Blazor WebAssembly is still in preview mode until May when it will be released as a finished product. There is still time for exploring all the functionalities of Blazor and SignalR until the finished product with new features and presumably better performance is here.