Implementing micro frontends to overcome technical debt

Any company that is constantly innovating, upgrading and pushing out new products is likely to rack up technical debt. This debt consists of the time and resources it takes to modify or enhance systems. While some level of technical debt is healthy, too much can throttle innovation. And the longer you take to address it, the bigger the bill will be when you finally decide to pay it off.

My team at Trulia recently tackled our own technical debt by re-architecting the company’s codebase and the team structure.

Our ‘aha’ moment

Our company supports tens of millions of users each month, fulfilling thousands of requests per second. But we realized there was a problem: As we continued to grow, we were not moving fast enough or delivering the product at the pace consumers needed.

Our aha moment came at a gathering of engineers from across the organization. We realized that 13 years of technical debt — a byproduct of our rapid growth — was the problem. This was when it became clear we needed to significantly modernize our front-end architecture to continue improving the product. So we got to work.

Our solution: Project islands

We decided to restructure our team using micro frontends (what we call “project islands”) to streamline development and ensure consistency across the organization. These separately deployed “islands” of end-user experience allow us to streamline future development by empowering each team to own its destiny all the way to production. By breaking our large projects into manageable, autonomous components, our teams can work smaller and faster.

We created two new roles, architect and performance manager, to streamline work and ensure no one’s efforts were duplicated. Our architect and I intentionally sat next to each other so we could continuously interact to ensure consistency and communication among our teams.

In order to help prevent future technical debt, we also created two new working groups, Engineering Principles and Microservices Strategy, made up of engineers from across the organization. They are responsible for guiding engineers to better weigh the tradeoffs when making technical decisions and to outline what the technical architecture we’re working towards should look like.

Why islands work

Project islands have made a significant difference in how our engineering teams work. But what’s the secret? What it really comes down to is allowing our teams to work independently with flexible technology that gives them more freedom to innovate. The biggest win is time to deployment — we’re more efficient on islands because they involve less team coordination. Now, instead of a couple of releases a week, we can make daily, or even hourly, releases with the goal of a continuous delivery model.

In order to achieve this, we looked at the typical user’s journey through our site and packaged pages into natural groupings of code, or islands. Organizations looking to replicate this should start by developing a high-level model that shows where each microservice fits and allow developers to engage with the model to build and leverage a common platform.

Once you have a solid micro frontends model, you can develop application shells to implement changes without impacting another team’s code. Application shells insulate apps from frequent frontend changes to provide breathing room between islands and the underlying technology.

Some of our biggest takeaways from this project involved the technology we used to aid in our micro frontend deployment. We cut down complexity by utilizing GraphQL to allow developers to access only the data they need and in the proper format by integrating with backend services. We use Kubernetes and Istio to standardize metrics, monitoring, and traffic between microservices.

Other organizations can use these basics to implement a micro frontend strategy to work more strategically and efficiently while managing technical debt. This architecture enables structured and intentional planning and independent teams — and it lets engineers focus on innovation.

Deep Varma is VP of Engineering at Trulia.