What is Blazor
- Blazor is an open-source framework supported by Microsoft as part of the .NET ecosystem, enabling developers to build interactive client-side web UI (SPA) with .NET.
- It was initially introduced in 2018 with the release of .NET 3.0 as Blazor Server, followed by the launch of Blazor WebAssembly in 2020 alongside .NET 5.
- Create rich interactive UIs using C# instead of JavaScript.
- Blazor is not like Silverlight and flash, it does not require any kind of plugin installed on the browser.
Overall, Blazor provides developers with the ability to take advantage of their C# skill for building single page application like react and angular. It’s currently has two hosting models: Blazor Server and Blazor WebAssembly
Blazor Server
Blazor Server is a server-side web application model that runs on the server using SignalR to provide a real-time web experience. The server-side Blazor model creates a long-lived SignalR connection between the client and the server. The client sends UI events and user input to the server, which then updates the UI and sends the updated UI back to the client over the SignalR connection.
Blazor Server apps render content differently than traditional models for rendering UI in ASP.NET Core apps using Razor views or Razor Pages:
- ASP.NET Core: when a Razor Page or view is rendered, every line of Razor code emits HTML in text form. After rendering, the server disposes of the page or view instance, including any state that was produced. When another request for the page occurs, the entire page is re-rendered to HTML again and sent to the client.
- Blazor server: once the initial page has been rendered and sent to the browser, the blazor.server.js file hooks into any relevant user interaction events in the browser so it can mediate between the user and the server. For example, if a rendered element has an @onclick event registered, blazor.server.js will hook into its JavaScript onclick event and then use its SignalR connection to send that event to the server and execute the relevant .NET code. After the .NET code has finished, Blazor will re-render the components on the page and then send a delta package of HTML back to the client’s browser so it can update its display without having to reload the entire page.
Blazor WebAssembly
Additionally, it is known as Blazor Wasm or Blazor Client.
Blazor WebAssembly is a client-side web application model that runs entirely in the browser, eliminating the need for a constant connection to the server. All the application codes are downloaded and executed in the client’s browser, allowing for a faster and more responsive user experience.
Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. It’s an open web standard and supported in web browsers without plugins and works in all modern web browsers, including mobile browsers. Browser compatibility: https://developer.mozilla.org/en-US/docs/WebAssembly
When a Blazor WebAssembly app is run
- The assemblies (.dll files) and the .NET runtime (.wasm file) are downloaded to the browser.
- Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app.
- The Blazor WebAssembly runtime uses JavaScript interop to handle Document Object Model (DOM) manipulation and browser API calls.
Why should we use Blazor?
Third-party libraries for Blazor are gaining increasing popularity, providing developers with a lot of powerful tools and resources to enhance their Blazor projects. In addition, WebAssembly is thought to be the future of the web. Here are several reasons, which indicate why we should use Blazor.
- Blazor is based on .NET, C#, .NET developers don’t have to learn new stack (Vue, Angular, React)
- Can leverage the existing .NET ecosystem and .NET libraries.
- Enable code sharing between frontend and backend.
- Benefit from .NET’s performance, reliability, and security.
- Easy building a Progressive Web App (PWA)
- Render the UI as HTML and CSS for wide browser support, including mobile browsers.
- The Blazor ecosystem provides a huge selection of amazing components from: Syncfusion, Infragistics, Progess Telerik, DevExpress. Alternatively, free components: Radzen, Blazorise, MudBlazor, Blazorstrap, Ant Design Blazor, ect.
Blazor Server or Blazor WebAssembly?
If you’re struggling made the decision between Blazor Server and Blazor WebAssembly. It’s important to consider the advantages and disadvantages of each approach.
The advantages
Blazor Server
- The app takes full advantage of server capabilities, including the use of .NET Core APIs.
- Fast initial load times, thin clients are supported. For example, Blazor Server apps work with browsers that don’t support WebAssembly and on resource-constrained devices.
- More secure: the app’s .NET/C# code base, including the app’s component code, isn’t served to clients.
Blazor WebAssembly
- It allows for offline capabilities and can be run as a Progressive Web App (PWA).
- Client resources and capabilities are fully leveraged.
- An ASP.NET Core web server isn’t required to host the app. Serverless deployment scenarios are possible, such as serving the app from a Content Delivery Network (CDN).
The disadvantages
Blazor Server
- Blazor Server requires a constant connection to the server, which can be a disadvantage if the user has a weak or unreliable internet connection. There’s no offline support.
- Implementing complex UI interactions can be more challenging since the UI updates are require for a round trip to the server.
- Scaling the application can be more challenging as it requires more server resources to support many users. Azure SignalR Service is recommended by Microsoft.
Blazor WebAssembly
- Download size is large, low initial load times (the very first time only, once the app is cached, everything should be fine).
- Unsuitable for large and complex web applications, as it can struggle to handle the high client-side processing required.
- Less secure since sensitive data and business logic are downloaded and executed on the client side. As you’re already knowing, it’s simple to read the code within a .dll file by decompiling it.
