Skip to content
micro-frontend.dev 2.0

Micro-frontends and composable frontend architectures

Micro-frontends are the result of breaking down large user interfaces into smaller, more manageable and independently deployable pieces, with benefits at an organizational level.

What is this site about?

Welcome to ✨microfrontend.dev✨. Throught out this website, I try to share with you all I have learned working as a full-stack developer and architect across multiple companies, for the past 20 years. You will find a lot of relevant information to frontend and cloud development, code samples, and references to a real life micro-frontends architecture. If this content helps you or inspires you, please let me know and share with others. 🙏❤️ Natalia

What is a micro-frontend?

If you arrived here confused about what a micro-frontend is, I am about to confuse you more. Is a button that hits an HTTP trigger, a micro-frontend? The short answer is, yes. Are a shopping cart and checkout feature a composed into one view or page a micro-frontend. Yes, it can be. Is a whole blogging micro-site in the context of a much larger platform with dozens or hundreds of capabiltiies, a micro-frontend? It can very well be.

This is why, although I will be using the term micro-frontends throughout this site, I prefer to think of them as composable decoupled frontends. Not all applications that may be considered a micro-frontend, are effectively micro. Please go to the micro-frontend patterns section, to understand why.

Do I need micro-frontends in my application project?

Let’s forget about the name for a moment. Doesn’t matter if we prefer to call them Decoupled frontends, or micro-frontends…Do we actually need to decouple our application, into smaller parts? What can help us better decide? The following feature offers you a dynamic set of sliders, to assist you in making a decision.

How to use the feature slider

For each item, slide all the way to the left for less, less often, less amount, and to the right for more, more often, more amount. eg: Application size. The application I’m trying to decouple is enterprise size, so I’ll slide it to the right. eg: Application components are in the cloud. The application is hosted on-prem, but the database is in the cloud, so I will keep the slider in the middle.

  • -+
  • -+
  • -+
  • -+
  • -+
  • -+
  • -+
  • -+
  • -+
  • -+
  • -+
  • -+

Creating solutions with micro-frontends

Micro-frontends -or decoupled frontends- solve problems. It is normal to feel curiosity and excitement about new tech, and if we investigate a new way of implementing a solution and it seems to be fun and innovative, it’s normal to want to use it in our app. But it’s important to understand what problem a technology exactly solves and make sure we have that problem. Micro-frontends should solve, first and foremost, organizational problems not technical ones.

Architects typically resort to exploratory and discovery sessions to identify problems and opportunities -scoping-, and then write down a list of requirements, an architecture decision matrix, and a set of constraints, to make sure the solutions they come up with are viable and fit the use-case, with a reasonable amount of effort and time -feasibility-.

Architecture and patterns

Learn about micro-frontends architecture, patterns and anti-patterns. Learn more!

Frontend frameworks and standards

Connect patterns to frameworks and tools and learn to get the most out of them. Learn more!

Micro-frontends pros and cons

What are the pros and cons of micro-frontend applications? Learn more!

Developing for user experience

User experience and micro-frontends Learn more!

Serverless and cloud-native

All apps need infrastructure. Learn how to deploy your micro frontends to the cloud. Learn more!

Additional resources

Find links to books, demos, blog posts and other resources by other subject matter experts. Learn more!