Blazor lets you build interactive web UIs using C# instead of JavaScript. … Both client and server code is written in C#, allowing you to share code and libraries. Blazor is a feature of ASP.NET, the popular web development framework that extends the .NET developer platform with tools and libraries for building web apps.
Blazor is a Single Page Application development framework. The name Blazor is a combination/mutation of the words Browser and Razor (the .NET HTML view generating engine). The implication being that instead of having to execute Razor views on the server in order to present HTML to the browser, Blazor is capable of executing these views on the client.
https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
https://blazor.net
Blazor Basics
- Available for .NET Core 3.1 and .NET 5.0
- Bundled starting with Visual Studio 2019 16.6
- Blazor Server App vs Blazor WebAssembly App
- ASP.NET Core hosted option
- Progressive Web Application option
WebAssembly Hosting Model
- WASM runs in the browser on the client.
- The first request to the WASM application downloads the CLR, Assemblies, JavaScript, CSS (React and Angular work similar).
- It runs in the secure WASM sandbox.
- The Blazor Javascript handler accesses the DOM (Document Object Model).
- When performance matters use WASM
- Offline support
- An API layer is required if you want to access secure resources
Server Hosting Model
- The C# code runs on the server.
- Javascript hooks are used to access the DOM.
- Binary messages are used to pass information between the browser and the server using SignalR.
- If something is changed the server sends back DOM update messages.
- Supports browsers which don’t support WASM like IE 11
- C# code is not sent to the browser
ASP.NET Core hosted option
After selecting the Blazor WebAssembly App template, you have the option of configuring the app to use an ASP.NET Core backend by selecting the ASP.NET Core hosted check box (dotnet new blazorwasm --hosted). The ASP.NET Core app serves the Blazor app to clients. An app with an ASP.NET Core backend is called a hosted Blazor WebAssembly app. The Blazor WebAssembly app can interact with the server over the network using web API calls or SignalR (Use ASP.NET Core SignalR with Blazor WebAssembly)
Progressive Web Application option
A Progressive Web Application (PWA) is usually a Single Page Application (SPA) that uses modern browser APIs and capabilities to behave like a desktop app. Blazor WebAssembly is a standards-based client-side web app platform, so it can use any browser API, including PWA APIs required for the following capabilities:
- Working offline and loading instantly, independent of network speed.
- Running in its own app window, not just a browser window.
- Being launched from the host’s operating system start menu, dock, or home screen.
- Receiving push notifications from a backend server, even while the user isn’t using the app.
- Automatically updating in the background.
The word progressive is used to describe such apps because:
- A user might first discover and use the app within their web browser like any other SPA.
- Later, the user progresses to installing it in their OS and enabling push notifications.
They are two hosting models: server-hosted, and client-hosted.
The difference is whether the app is hosted in server, or in client. Server hosting means your app logic runs in the server (you can think of it similar to what Web Forms is), you click on a button, an “Ajax” call sends the request, the server receives the request, and sends back the updated page. However, here it uses SignalR not Ajax, which is a low level socket communication (read efficient). And instead of updating a whole page, it updates only the relevant parts (thus it is a single page application).
On the other hand, client hosting means your logic runs within the browser. Think of it as if your C# logic is converted into JS, and it is embedded in the page. So the logic runs in the browser. This is possible after the introduction of WebAssembly which you might want to read about.
Comments