Table of contents

1. Example of monolithic frontends
2. Example of teams organized into verticals
3. What are the main benefits of using this type of architecture
4. And what difficulties can we encounter when using micro frontends
5. Strategies for applying micro frontends
6. Good usage practices
7. Technological autonomy
8. Isolated code
9. Pre-established nomenclatures
10. reference to native browser features
11. Resilience
12. Summary

The term Micro Frontends first appeared on ThoughtWorks Technology Radar in late 2016. It extends the concepts of microservices to the frontend world. The current trend is to build a powerful and feature-rich browser application, also known as a single-page application, which is based on a microservice architecture. Over time, the front-end layer, usually developed by a separate team, grows and becomes more difficult to maintain. This is what we call a Frontend Monolith.

The idea behind Micro Frontends is to think of a website or web application as a composition of resources owned by independent teams. Each team has a distinct business area or mission that they care about and specialize in. A team is cross-functional and develops its capabilities end-to-end, from the database to the user interface.

Example of monolithic frontends

Example of teams organized into verticals

What are the main benefits of using this type of architecture

1. Framework independence.
2. Codes that are easier to test.
3. Single responsibility.
4. Independent deployments.
5. Greater scalability.
6. A way to evolve legacy frontends.
7. Possibilities for upgrading, updating and rewriting small parts.
8. Smaller, more cohesive codes.

And what difficulties can we encounter when using micro frontends

1. Application and payload size
2. Complexity
3. Shared responsibility
4. E2E Tests
5. Maintain the application style

Strategies for applying micro frontends

1. Server Side
2. Iframes
3. Run-time with javascript frameworks
4. Run-time with web components

Good usage practices

Technological autonomy

Each team must be able to choose and update its technology stack independently.

Isolated code

Each team’s code must be isolated and self-contained, without shared states or global variables.

Pre-established nomenclatures

Where idea 2 is not applied, there must be a convention in naming local storage, cookies, events and other resources to avoid conflicts.

reference to native browser features

Favor native browser features over custom APIs to communicate between services

Resilience

The developed feature must be resilient and usable even if there are problems loading the javascript code.(ssr)

Summary

Using micro frontends can be a great option, but this will depend a lot on the context and maturity of the teams, so it is important to assess whether it really is the right time for this, and whether it makes sense.

For more content I recommend reading the website MicroFrontends.org.