Micro frontends

"An architectural style where independently deliverable frontend applications are composed into a greater whole"

What's this all about?

Web applications are getting more and more complex. Many organisations are struggling to maintain monolithic frontend codebases, and to scale their frontend development processes across multiple teams.

Micro frontends are just one approach to managing that complexity, by splitting products up into smaller, simpler applications that can be delivered all the way to production by independent, autonomous teams.

A flow diagram showing 3
        independent deployment pipelines for 3 different micro frontends, which
        are then composed into a single app after deployment

The pattern has been documented on the ThoughtWorks Tech Radar since late 2016, and has moved steadily from Assess to Trial and finally to Adopt in 2019.

Micro frontends on the ThoughtWorks tech radar

I want to know more!

You can read an extensive article on micro frontends at https://martinfowler.com/articles/micro-frontends.html. This article covers the purpose and benefits of the pattern, several different implementation approaches, and pitfalls to look out for. It also includes a detailed explanation of a live demo website built using micro frontends.

A wireframe of an example website,
        showing a container application that embeds a micro frontend within it

Have you written your own articles or case studies on micro frontends? Would you like to? We'd love to collect more perspectives and more examples of the pattern in the wild, so please get in touch!.

What's this about a live demo?

You can see an example of micro frontends right here at https://demo.microfrontends.com. The full source code is available on github, and you can read a detailed explanation of the code at the article mentioned above.

A screenshot of the demo site linked above

Who's behind this website?

This site is maintained by Cam Jackson, a software developer and consultant who loves solving both the technical and human challenges that arise when building web apps in large organisations. You can get in touch on Twitter or on LinkedIn.