Member-only story
MicroFrontends With Blazor WebAssembly
I recently embarked on a mission to uncover the details behind the implementation of MicroFrontends under Blazor WebAssembly applications. This post represents a summary of my findings along with a sample application that should serve as a good starting point as you start your own journey of introducing MicroFrontends to your Blazor WebAssembly project.
An excellent place to start understanding MicroFrontends is the following session from .Net Conf 2020 by Florian Rappl. In the session Florian goes through the different options available to introduce MicroFrontends to a Blazor WebAssembly application. I won’t go again over the problem statement of Monolithic Frontends or the possible solutions that Florian discussed as you can refer to his session. Instead in this post I will focus on the details of implementing MicroFrontends in Blazor WebAssembly utilizing the Modular distributed web application model which is demonstrated in the figure below.
As always the source code for the application can be found on my GitHub repo here.
In order to implement the above architecture I will utilize a new feature that was introduced to Blazor WebAssembly starting with .Net 5 called lazy loading. Lazy loading allows Blazor WebAssembly application startup performance to be improved by deferring the loading of some application assemblies until they are required. For example, assemblies that are only used to render a single component can be set up to load only if the user navigates to that component. After loading, the assemblies are cached client-side and are available for all future navigations
Here is the structure of the solution hosted on Github repo:
Note: The different projects that host the different business modules were created as a Razor Class Library (RCL) as it allows us to host the different components which get imported into the main shell.
How To Enable Lazy Loading?
Blazor’s lazy loading feature allows you to mark app assemblies for lazy loading, which loads the assemblies during runtime when the user navigates to a…
