micro frontends architecture problems and solutions
Portrait of author Ricki Hastings
Ricki Hastings

Senior Software Engineer (Product)

See All Posts

Our journey to Micro Frontends: Part 1

By Ricki Hastings on March 26, 2021 - 10 Minute Read

This engineering blog post is going to dig into why we’ve decided to migrate our monolithic frontend project into a micro frontend architecture. This post will be the first part of a series where we cover why and how we’ve implemented this. We’ll take a look at the technical details, as well as some of the problems we’ve encountered and how we’ve solved them.

What problems are we facing?

What’s the ideal solution?

Looking for more engineering content?

For more technical blogs from our Engineering team, check out our Medium account.

Entirely separate frontends for different solutions

Separating the frontend out into separate websites kind of felt like a backwards step, leaving our fast SPA behind and forcing users to refresh between each area within the app. There was also complexity involved in keeping the applications up to date with shared components (like the header, and navigation menus). Ultimately it would have left our users with a reduced experience and a website that performs worse due to duplicated npm modules. This was unacceptable for us.

Separate npm packages for different solutions

Module Federation with Webpack 5

It was by chance that we noticed Webpack 5 was being worked on with Module Federation when we started planning this project. This ticked all the boxes, and there was lots of community hype surrounding this, such as blog posts, YouTube videos, etc. This is exactly what we’ve been looking for; entirely separate builds and deployments, a unified SPA experience, shared packages, and — importantly — a full website experience when running the individual solutions.

Tips for your post-COVID business restart plan

What is Module Federation?

Are Micro Frontends the right solution?

First steps

Next steps

In the next post in this series we’ll cover how we took this proof of concept and turned it into a deliverable project that met all of our requirements, some of the difficult problems we encountered, some other cool things we’re pretty happy with, and what we’ve got planned for the future. Keep an eye out for the post, coming soon!

Stay in touch!

Subscribe to our newsletter to find out what’s going on at Peak

Subscribe today!