MicroFrontends With Blazor WebAssembly

Wael Kdouh
5 min readDec 22, 2020

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.

Source: Florian Rappl — DotNet Conf 2020

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…

--

--

Wael Kdouh

Principal Cloud Solution Architect at Microsoft. I assist enterprise customers in crafting exceptional architectures for success.