Transforming Frontend Architecture: A Journey from Monolith to Micro Frontends at Udemy — Part 1 of 3
By: Chris Nienhuis, Hamza Erbay, Matthew Bise, Nathan Chapman, Seth Hodgson, Trey Briggs
Introduction
At Udemy, we have over 67M learners and over 75K instructors, and we’re working on a fast and accessible experience for them.
Our underlying application architecture is a monolith — a single, unified codebase that houses our marketplace, consumer subscription services, and business applications. The engine that powers our global platform is constantly being improved by our dedicated teams working to enhance the learning and teaching experience.
In the spirit of innovation, we pitched an idea at the 2021 hackathon to decouple frontend engineering from the monolithic structure. The concept resonated with the hackathon committee (Shark Tank Council), earning a decisive nod. Thus began our odyssey toward a more modular, resilient, and scalable frontend architecture.
Motivation to migrate monolith to micro frontend
At the heart of our decision to migrate from a monolithic architecture to micro frontends was the need to address critical pain points impeding our ability to scale and innovate effectively.
Development Speed and Scalability
Our monolithic application served us well in the early days, but as we scaled, it became a double-edged sword. Development speed slowed to a crawl due to two main bottlenecks:
Complex Release Process
Deploying our code was a difficult and time-consuming process. Any changes to the code had to go through a slow and tedious cycle of review, approval, and queuing, which often took several days, especially during release freezes. This slow process was not sustainable for a growing global team generating many experiments.
In 2022, we improved the experience of the release process on the monolith. We eliminated the steps of “release queue” and “running release script”.
Inefficient Use of CDN
With the monolith, we faced challenges in leveraging Content Delivery Networks (CDNs) effectively. CDNs play a crucial role in delivering content quickly across the globe. However, due to our monolithic structure, which involved dynamic content generation and A/B testing, we were unable to utilize CDNs to their full potential.
User Experience and Performance
Our website traffic mostly originates from non-US countries, with a significant portion coming from mobile web users. However, our pages are served from the US, which results in a poor experience for our non-US mobile web customers. This also harms our search engine optimization (SEO) and ultimately reduces conversion rates. (Google and McKinsey research)
Poor performance causes our 👩🏽💼 human customers to bounce and not convert.
Poor performance causes our 🤖 bot customers (ie. Googlebot) to drop us in search rankings (ie. SEO).
Summary
In this section, we introduced Udemy’s current monolith frontend architecture and discussed our motivations for planning to migrate to a micro frontend architecture. We touched upon some pain points that are impeding our ability to scale and innovate effectively, such as Development Speed and Scalability, Complex Release Process, Inefficient Use of CDN, and User Experience and Performance issues.
In the coming sections, we will be delving into an exciting event, the Udemy Hackathon, where our journey towards a more modular frontend architecture began. We will walk you through our preparations, decisions, and the challenges we overcame during this event, the dramatic transformation this brought to our development and release process, and the significant performance enhancements we achieved as a result.
Thank you for reading Part 1 of our series. To ensure you have the complete picture and don’t miss out on further valuable insights, you can continue reading:
