Micro Frontends: The Evolution of Frontend Architecture

Have you ever wondered what’s the difference between monoliths, monorepos and Micro-Frontends?

When facing issues with scale, large companies turn to Micro-Frontends as a solution to decouple the monolith and hopefully improve their velocity and increase team autonomy; however, Micro-Frontends are at the far end of the decoupled and distributed frontend spectrum, and many alternatives should be considered first before committing to a fully distributed architecture.

This talk is a journey through the evolution of frontend applications at scale, starting from the Monolith, evolving to modular monoliths, integrated applications, monorepos and finally arriving at Micro-Frontends. We will explore each approach’s pros and cons and choose the best tool to help you scale your applications.

Interview:

What's the focus of your work these days?

I am currently a Staff Engineer at Postman, but since early in my career, I have always been really interested in distributed systems. I did a master's degree in distributed systems, and I always wondered how large-scale web applications were built. They are very complex, but they are possible. Applications have millions of users, and they don't break. I wanted to investigate how to get applications to scale to that point. 

There are two types of scale; the first part is obviously the architecture and the infrastructure, and the second part is people. People are a big part of how systems scale. I focused mainly on the frontend side of this, on the frontend, especially Micro-Frontends, because there has been a significant movement in the backend with microservices. But then I realized the frontend has also experienced something very similar, although very different in some aspects. So I have been looking at Micro-Frontends and distributed fronted applications since I was at American Express. I was working there with a big distributed frontend system and framework, and now I am at Postman where we are implementing this in a slightly different way but also just keeping the main goal in mind, which is decoupling applications and making sure they are decoupled before we can distribute them

What's the motivation for your talk at QCon London 2023?

People always ask me the difference between monolith and Micro-Frontends. if I want to implement something like Micro-Frontends, what are the benefits of this? What people don't realize is there are many different steps along the way that they should be exploring before jumping on Micro-Frontends and their architecture because many people think that the problems with scaling, especially scaling organizations, can be solved with a distributed system. Although that is correct, it is very complex, and many details could be missed. 

This talk is a journey I will be taking. I will be examining what the problems with the monolith are. Monoliths are fine sometimes. Then I'm talking through how we evolve applications, maybe trying a modular monolith, monorepos, and finally arriving at a fully distributed architecture, which is a Micro-Frontends. I’ll be examining the pros and cons between all of these approaches. So, is not one size fits all; architecture is always a tradeoff. We need to make sure that we explore all the different pros and cons of all these options until we can select the proper architecture for the specific use case.

How would you describe your main persona and target audience for this session?

I would like to target two types of persona with this talk. The first one is the developer who has senior management at the moment or someone that’s just telling them they need to solve these problems and they need a technical solution for these types of problems. For them, it would be really useful to understand the technical aspects of these implementations and of these architectures, finding out what particular technologies could be applied and finding out how to technically compose applications and all the patterns. 

The second persona is architects and decision-makers, who are also thinking, ‘Is this architectural pattern a solution for the problems that my organization is suffering?’ For them, it would be more like a high-level overview of the architecture's tradeoffs, what they can expect from this architecture, and what problems this architecture is meant to solve for their organization. 

So there are two parts. I will be going deeply technical in certain parts. It’s also a high-level overview of the architecture for people to understand that this is a very complex problem for large organizations. It is not just a tool that they can apply to this. The problem is this is a significant decision that they have to take into account.

Is there anything specific that you'd like people to walk away with after watching your session?

The first one is, do we need Micro-Frontends? Hopefully, I will be answering that question. You might have been thinking about Micro-Frontends. Is this a good idea? Hopefully, once you leave the session, you'll think ‘Actually, we need to try something else first.’ Or, ‘Actually, that's too complex for our use case.’ Or ‘We don't have a problem, and I don't need Micro-Frontends.’

The second is to ensure that people understand the different types of architecture and they understand the differences. Because one of the main questions I get a lot is what's the difference between a monolith and a Micro-Frontends, or what is that modular monolith, and how is that different from a normal monolith? So hopefully, those questions will be answered, and then people will know a little bit more about what they can try next, and what the benefits of those different types of architecture they can implement are.


Speaker

Ruben Casas

Staff Engineer @Postman

Ruben Casas is a Staff Engineer at Postman, specialising in micro-frontends and large-scale frontend applications. With a passion for tackling complex architectural problems, Ruben excels at designing and implementing practical and innovative solutions. He constantly seeks new ways to improve his skills and stay up-to-date on the latest technologies.

Read more
Find Ruben Casas at:

Date

Tuesday Mar 28 / 04:10PM BST ( 50 minutes )

Location

Whittle (3rd Fl.)

Topics

microfrontend monorepo architecture

Share

From the same track

Session monorepo

From Monorepo Mess to Monorepo Bliss: Avoiding Common Mistakes

Tuesday Mar 28 / 11:50AM BST

Monorepos have been around for a while but only recently gained popularity in the frontend community. Many developers are being confronted with them now and end up overwhelmed by the terminology and tooling. What are monorepos? Is it just about code colocation?

Speaker image - Juri Strumpflohner

Juri Strumpflohner

Sr. Director of Developer Experience @Nx

Session edge computing

Living on the Edge: Boosting Your Site's Performance with Edge Computing

Tuesday Mar 28 / 02:55PM BST

Edge computing is not a new concept, but in the past few years an increasing number of hosting providers have introduced the ability to run Javascript at the edge such as Edge Functions from Netlify and Vercel, and Workers from Cloudflare. 

Speaker image - Erica Pisani

Erica Pisani

Sr. Software Engineer @Float Financial

Session microfrontend

Beyond Micro Frontends: Effective Composable Decoupled Applications on Cloud Native Infrastructure

Tuesday Mar 28 / 05:25PM BST

The frontend ecosystem is regarded by other technologists as a world full of hype, new patterns, frameworks and ephemeral approaches.

Speaker image - Natalia Venditto

Natalia Venditto

Principal Program Manager @Microsoft, Lead DX JavaScript, Node.js on Azure

Session microfrontend

The Web's Next Transition

Tuesday Mar 28 / 10:35AM BST

The web. What started as a document sharing platform has evolved into an application platform. The web has been through a number of transformations over the years. From static HTML files to dynamic server-generated HTML responses.

Speaker image - Kent C. Dodds

Kent C. Dodds

Software Engineer and Educator, Creator of EpicWeb.dev, EpicReact.Dev, and TestingJavaScript.com

Session

Unconference: Modern Frontend Development and Architecture

Tuesday Mar 28 / 01:40PM BST

What is an unconference? An unconference is a participant-driven meeting. Attendees come together, bringing their challenges and relying on the experience and know-how of their peers for solutions.

Speaker image - Shane Hastie

Shane Hastie

Global Delivery Lead @SoftEd, Lead Editor for Culture & Methods @InfoQ