DEV Community

loading...

Four Micro-Frontend Architecture Types You Can Implement With Blazor

mteheran profile image Miguel Teheran ・2 min read

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.

Method 1: Use micro-apps with a shared session and parameters

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).

Micro-apps
Example of a micro-app micro-frontend approach

Example of a micro-app micro-frontend approach, in which every app is a Blazor project and they have shared session information.

Continue reading here:
https://gorillalogic.com/blog/four-micro-frontend-architecture-types-you-can-implement-with-blazor/

Discussion (0)

pic
Editor guide