In this article, we will describe how you can implement micro-frontend architectures using Blazor, an open-source framework for creating web applications using C# and Blazor WebAssembly (Wasm). Much like micro-services architectures do for services, micro-frontend architectures break up web applications into small, functional, and scalable components. Micro-frontend approaches can help you avoid creating spaghetti code, improve code structures, and avoid coupling between components. They can also help teams work on front-end code more efficiently. There are four primary ways you can implement micro-frontend architectures with Blazor, and let’s take a closer look at each.
For large and complex applications, micro-apps is an excellent approach to micro-frontends. With micro-apps, you have multiple apps with a shared session and parameters, or even styles. Sharing both the session and account or general information across different sites or applications makes the user feel comfortable and safe because they won’t need to start any new sessions or give more information to every app they need to use.
A good example of this concept is the Google productivity suite, GSuite. Working through a user’s Google account, GSuite makes different apps available to the user (YouTube, GMail, Google Photos, Calendar, Meet, and so on). GSuite provides a consistent user experience across all the apps by using the same styling throughout. To do this with Blazor, every app is a Blazor project and they have shared session information between them (see illustration below).
Example of a micro-app micro-frontend approach, in which every app is a Blazor project and they have shared session information.