Micro frontends: The Good, The Bad and The Ugly

Vanessa Böhner

Vanessa is a Web Developer. Currently, she is a Senior Product Engineer at SinnerSchrader. Since 2019 she is the Vue Vixens Munich City Coordinator, helping women with their first coding and speaking experiences. She is a member of the JS Kongress Program Committee 2020. She created her first website at the age of ten and has been passionate about web development ever since. She studied Media Informatics with a focus on Human-Computer-Interaction. Now Vanessa is striving to provide customers with the best experience possible while creating modern and accessible web applications. When she writes code, she does it not for herself but for the next developer.

Summary

Everybody is talking about slicing up the monolith. The goal is to create scalable architectures. But how can we achieve that? We’ll discuss the benefits and tradeoffs of micro frontends, implement a basic example, have a look at the Mosaic9 stack and talk about organizational challenges.

Micro frontends: The Good 😻The Bad 😼and The Ugly 🙀

Everybody is talking about slicing up the monolith. The goal is to create scalable architectures. But how can we achieve that?

Project: Create something scalable

For one project, we have decided to give everything, using cutting edge technology, microservices, verticals, server-side rendering and more. Talking about upgrading the legacy code base, the plan was to have this greenfield project on separate URLs. The UI Component Library and shard JavaScript services were written completely new. In this talk we’ll go through the example of an online shop.

New kind of bugs

It was a bumpy road with ups and downs. But why? On the one hand, we weren’t mentally prepared for the new technical challenges. The big plus points people talk about when discussing micro frontends were true. No CSS bugs, no JavaScript bugs. But we did new mistakes. We had configuration mistakes in kubernetes configmaps and memory leaks.

Repeat yourself

When implementing standalone, self-contained verticals a lot of things we developers learn in university and in books, should not be applied to this architecture. We shared code where we shouldn’t have shared it.

So many questions

But there is more to talk about. Complex problems need complex solutions. But no micro frontend framework will be able to increase the developer experience before one has understand how they work in general. In this talk, I will start a basic example with iFrames before rushing into difficult frameworks. Armed with that knowledge, I will present Zalando’s Mosaic9 project. It’s an open-source framework for creating a complex micro frontend architecture. After understanding the technical setup of micro frontends, what about the organizational setup? In which vertical does which micro frontend belong to? How to manage the UI Component Library in different teams? Can we switch teams?

The benefits

Now it seems like micro frontends sound like a bad idea. Complicated, complex, over-engineered? What do we gain from them? Freedom. Autonomous teams. Less meetings and E-Mails. An always deployable master branch.