Kit Wai Chan – Fotolia
Blazor WebAssembly is the principal hosting model for Blazor applications. Choosing this option means your application runs entirely inside the client’s browser, making it a direct alternative to JavaScript SPA (single-page application) frameworks. To understand how this hosting model works we’re going to walk through the process of initializing a Blazor WebAssembly application shown in Figure 1.
The process begins when a request is made by the browser to the web server. The web server returns a set of files needed to load the application; these include the host page for the application, usually called index.html, any static assets required by the application such as images, CSS and JavaScript, as well as a special JavaScript file called blazor.webassembly.js.
At this point, you may be wondering why we have a JavaScript file. One of the big selling points of Blazor is the ability to write UI logic using C# instead of JavaScript, right? Yes, this is true, but as of right now, WebAssembly has a fairly large limitation — it can’t alter the Document Object Model (DOM) or call Web APIs directly. These features are planned and being worked on for the next phase of WebAssembly, but until they land, JavaScript is the only way to perform these tasks.
In order to manage this current limitation, part of the Blazor framework resides in JavaScript and it’s contained in the blazor.webassembly.js file. This part of the framework does three main things:
It’s possible that in the future this file will no longer be required, but this depends on how fast features are added to WebAssembly and adopted by browsers. For now, it’s an essential part of the framework.
Now we’ve cleared that up, let’s get back to our booting Blazor app. I want to point out that the files returned from the server are all static files. They haven’t required any server-side compilation or manipulation. This means that they can be hosted on any service that offers static hosting because there’s no requirement for a .NET runtime to be present on the server. For the first time, this opens up free hosting options such as GitHub pages to .NET developers (applies to standalone Blazor WebAssembly applications only).
Once the browser has received all the initial files from the web server, it can process them and construct the DOM. Next, blazor.webassembly.js is executed; this performs many actions, but in the context of starting a Blazor WebAssembly app, it downloads a file called blazor.boot.json, which contains an inventory of all of the framework and application files that are required to run the app.
Most of these files are normal .NET assemblies; there’s nothing special about them and they could be run on any compatible .NET runtime. Another type of file is downloaded called dotnet.wasm.
The dotnet.wasm file is a complete .NET runtime — the mono .NET runtime to be exact — which has been compiled to WebAssembly.
At this point in time, only the .NET runtime is compiled to WebAssembly; the framework and application are standard .NET assemblies. In the future, a feature called AOT (Ahead of Time) compiling will be introduced, which allows developers to compile parts of their applications into WebAssembly. The benefit of this is performance: Any code compiled to WebAssembly is many times more performant than the interpreted approach used today. This comes with a tradeoff, which is size. AOT compiled code is bigger than the standard assemblies, meaning a larger overall download size for the application.
Once the blazor.boot.json file has been downloaded and the files listed in it have been downloaded, it’s time for the application to be run. The WebAssembly .NET runtime is initialized, which in turn loads the Blazor framework and finally the application itself. At this point we have a running Blazor application that exists entirely inside the client’s browser. Aside from requesting additional data (if applicable), there’s no further reliance on the server.
We now understand how a Blazor WebAssembly application boots up, but how do UI updates get calculated? As we did for the initialization process, we’re going to follow a scenario to understand how this happens and what Blazor does (Figure 2).
For our scenario, we have a Blazor WebAssembly application with two pages, Home and Counter. Neither of these pages have anything on them except a heading saying either Home or Counter, respectively. The user is on the home page of the application and will click on a link to go to the counter page. We’ll follow the process Blazor goes through to update the UI from that of the home page to the counter page.
When the user clicks on the counter link, the navigation event is intercepted by Blazor on the JavaScript side. This event is then passed over to Blazor on the WebAssembly side, and it’s processed by Blazor’s router component.
The router checks its routing table for any routable components that match the link the user has attempted to navigate to. In our case, it finds a match with the Counter component, and a new instance of that component is created and the relevant lifecycle methods are executed.
Once complete, Blazor works out the minimum number of changes required to update the DOM to match that of the Counter component. When this is complete, those changes are passed back down to the Blazor JavaScript runtime and that applies those changes to the physical DOM. At this point, the UI updates who the user is on the Counter page.
All of this has happened client-side in the user browser. There was no need for a server during any point in this process. It’s fair to say that in a real-world application, you would probably make a call out to a server at some point in this process. This usually happens during the execution of the lifecycle methods of the component being navigated to in order to load some initial data for the component, but this depends on the individual application.
Now that we know a bit more about how the Blazor WebAssembly hosting model works, let talk about the benefits and tradeoffs of choosing this model. Let’s start with the benefits.
Nothing is a silver bullet. Let’s understand some tradeoffs of this model.
To summarize, Blazor WebAssembly is the hosting model to choose if you’re looking for a direct replacement for a JavaScript SPA framework such as Angular, React or Vue. Although there are a few tradeoffs to consider, there are some substantial benefits to choosing this model.
There are many variations to the role of the software architect in today’s IT teams, and a lingering debate is over whether they …
Despite the benefits, microservices will introduce profound security issues. We review the biggest microservices security …
It has become increasingly important for software architects to understand the mechanics behind remote procedure call (RPC), …
In his new book, a senior software engineer shares his in-depth hands-on knowledge to both prep readers for cert exams and guide …
Backlog grooming is essential for smooth Agile software development. Here’s what it takes to get user stories straight and …
Chaos engineering tool options include the original (Chaos Monkey), open source projects like Chaos Toolkit and Chaos Mesh and …
Google Distributed Cloud Edge, available in preview, takes the company’s cloud computing infrastructure to the private data …
In a cloud initiative, the difference between disappointment and success is connected to the quality of the contract. Consider …
An organization deciding whether to run a workload on premises or in the cloud must carefully evaluate security, reliability, …
Organizations in every industry can be targets of cybercrime for profit. Get expert advice on ransomware prevention, detection …
Barracuda researchers examined exploitation activity and attack patterns for two remote code execution vulnerabilities affecting …
Cybereason and Google Cloud have teamed up to combat future security threats with accelerated XDR capabilities.
Think you’re ready for the AWS Certified Solutions Architect certification exam? Test your knowledge with these 12 questions, and…
Amazon said its van monitoring system is designed solely for driver safety. But many industry experts have concerns regarding the…
Amazon would like to strengthen its global footprint, but the e-commerce giant faces roadblocks and challenges today that did not…
All Rights Reserved, Copyright 2000 – 2021, TechTarget

Privacy Policy
Cookie Preferences
Do Not Sell My Personal Info

source