Blazor WebAssembly Fundamentals

By having a strong fundamental, you can learn Blazor fast and effectiveness. Here is what you need to learn:

• Debugging Blazor WebAssembly.
• Component.
• Directive.
• Dependency Injection.
• Form.
• API interaction.

In this tutorial, you will learn:

• Blazor WebAssembly advantages.
• How Blazor WebAssembly works?
• Some misconceptions about Blazor WebAssembly.

Blazor WebAssembly advantages

Some advantages of Blazor WebAssembly are:

• Make use of static website hosting (CDN, cache, ...).
• Separation of concern: business logic, presentation, data access.
• Make your website become an app which mobile users can install and launch your website within one touch.
• Offline availability.

How Blazor WebAssembly works?

The following image illustrates how Blazor WebAssembly works:

Step 1: The browser sends an HTTP request to the file server.

Step 2: The file server sends a bunch of files, including blazor.webassembly.js.

Step 3: The browser receives the files, including blazor.webassembly.js.

Step 3: blazor.webassembly.js will responsible for updating the HTML, sending requests to the compute server, processing response from the compute server.

Some misconceptions about Blazor WebAssembly

• Use JavaScript when not needed.

Blazor WebAssembly can work with JavaScript. However, you should not use JavaScript when the operation can be done in Blazor. It will make your development process becomes complicated.

• Serving file outside wwwroot folder without configuration.
• Serving file in wwwroot folder but in the compute server.

The wwwroot is an important folder of Blazor WebAssembly, if you want to serve some static files, make sure you put the files in the wwwroot folder of the Blazor WebAssembly project. Otherwise, your files will not be served by default.