Micro Frontend Architecture to the rescue

Zencity is a data-driven decision-making platform. I work on a brand new development team that was created to develop a new survey-based product. But something exciting happened on the way, and instead of developing a new product from scratch, we acquired another company—Elucd—that offers survey-based products.

Both Elucd and Zencity offer client-facing dashboards. But we wanted to make sure our clients can enjoy both products under the same platform. So this was our team’s first focus.

Let’s start from the end

To clarify what our goal was, I would like to start from the end (sorry for ruining the surprise) and show you the outcome of our effort.

You can see above the screenshot of the embedded Elucd dashboard (inside the red box), which appears as a menu item within our Zencity platform. All the components outside the red box are Zencity’s.

This way, we allowed our clients access to both platforms in the same place — and saved them the headache of logging into two separate platforms.

So now that our goal is clearer, let’s talk about the solution!

But… How?

As our company grows with more products having their own development teams, we tried to think of a solution that will keep each product as independent and isolated as possible, while also co-existing in the same web platform

This is where Micro Frontends Architecture came into the picture. I personally didn’t know much about it before, and I assumed from the name that it’s somehow similar to the Microservices approach. It sounded like a good candidate to achieve our goals.

Micro Frontends Architecture takes the Microservices concept one layer up. If the Microservices approach is about creating isolated services, the Micro Frontends approach is about isolated frontend components — including all their logic (both on client-side and server-side). I recommend reading this great article, that gives a better understanding of Micro Frontends and discusses different approaches to implementing it.

I must admit that at some point I got cold feet using Micro Frontends. We had a tight deadline to finish embedding the two products, and we were about to use a new concept that we had no experience with. Meaning tons of things could go wrong.

At this point, Iframe also came up as a solution (and actually, it also implements the Micro Frontends approach!). But as Iframe has its limitations, we understood it would be only a hackish and temporary solution.

So after a lot of discussions, we decided to just jump into the water and go with a flexible and modern Micro Frontends implementation. The implementation we went with is Webpack Module Federation, a Webpack plugin that was introduced as part of the Webpack 5 launch.

The Architecture

After deciding on Micro Frontends architecture, there was another architectural consideration — how to handle user authentication and authorization. We didn’t want to keep the login layer in the Elucd dashboard (because we didn’t want users to have to log in twice inside our platform), but to use Zencity authentication instead.

So in the below diagram, you can see the solution we came with:

As you can see above, the Elucd dashboard client is not sending requests directly to the Elucd server anymore, but rather to a dedicated proxy in the Zencity Server. We are taking advantage of the fact that the Elucd dashboard is part of Zencity — which means that it can perform authenticated API requests against the Zencity backend. Then the proxy can send requests to Elucd Server, with the authenticated user information.

So with this approach, we didn’t have to modify or add an authentication layer in the embedded Elucd dashboard, we just used the Zencity authentication to verify the requests we get in Elucd are authenticated.

Difficulties on the way

Of course, there were some additional design decisions we had to make, but those were the most interesting to share.

Worth mentioning are some struggles we had when we implemented the solution:

1. Upgrading Webpack version from 4 to 5:

Webpack 5 came with many changes that required adjustment in our projects.

• Webpack Plugins: Most of the Webpack plugins didn’t work well with the new version. For some of them, upgrading their version was enough. But others required replacing with alternative plugins, as they didn’t have a Webpack 5 compatible version.
• Storybook: most of our stories in the Storybook were broken, as Storybook uses Webpack behind the scenes. It took us quite a while to understand what the problem was. The solution was easy, but the research was heavy and time-consuming. Check out this StackOverflow thread to see the cause and the solution that worked for us.

2. Difficulty troubleshooting

As Webpack Module Federation is kind of new, it was sometimes hard to find discussions on errors or issues we encountered.

Summary

Micro Frontend is a great concept, with multiple implementations. But it can also be an overhead to add it to existing projects.

For us, it is worth the overhead and the extra time — as we know it will pay off in future cross-team projects.