DEV Community

Miguel Teheran
Miguel Teheran

Posted on

3

Four Micro-Frontend Architecture Types You Can Implement With Blazor

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/

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay