Migrating Udemy’s Homepage to Micro Frontends
By Eugenia Kato, Anthony Nichols, Sol Zhu, Eyupcan Bodur, Stephen Duke, David Gao, Michael Palisano, Izabela Bulska, Elaine Zhou, Matt Schaefer, Marty Note, Matthew Bise, Chris Nienhuis, Jilles Soeters, Trey Briggs, Seth Hodgson
Introduction
This blog delves into the migration of Udemy’s logged-out homepage from a monolith architecture to a micro frontends architecture, detailing the motivations behind the migration, challenges faced, and the impact on developer velocity and web performance metrics as a result of the migration.
Udemy’s logged-out homepage is the second most frequently visited destination, following the course landing pages. Our current focus revolves around professional skills development to cater the needs of professionals seeking upskilling and reskilling opportunities. However, the design and content of the logged-out homepage did not align with this focus. As a result, a new homepage was redesigned that aimed to showcase Udemy’s range of offerings and emphasize its commitment to professional skills development.
Beyond a mere facelift, the redesign presented an opportunity for us to transition the logged-out homepage from a monolith architecture to micro frontend architecture. With the enhanced web performance metrics, especially for international users, and increased development speed demonstrated in the previous blog post, we are motivated to adopt the new frontend architecture.
Preparing for the migration
We laid the groundwork for the new logged-out homepage by creating a new micro-frontend application, keeping it isolated from other existing frontend applications. This allows for a more streamlined and efficient development process, as React components and pages that are not relevant can be excluded.
As a preparatory step for the migration, we broke down each of the homepage modules into user stories. Then, we collaborated with our design and product partners to define clear and concise requirements for each module. This structured approach ensured that all stakeholders were aligned on the objectives, functionality, and user experience expectations, laying a solid foundation for a successful migration process. From there, we divided into small teams that worked together on delivering individual modules.
For each module, we identified existing React components from the monolith to be reused and migrated them to shared npm packages that are used across applications to mitigate the duplication of components across our monolith and micro-frontend applications.
Building the logged-out homepage
During the migration, we also refactored some of the components for enhanced reusability and versatility. For instance, the “professional skills” module had a similar structure to the one on the legacy logged-out homepage but featured additional content in the tabs. To address this, we refactored the unit to accommodate a broader range of layouts, ensuring greater flexibility in rendering content.
To address user-specific targeting of the hero module, we made adjustments to the rendering process on the new logged-out homepage. In the monolith architecture, hero content is retrieved server-side to ensure swift loading of above-the-fold content. However, on the new statically generated logged-out homepage, user-targeted content is fetched client-side. This difference in content delivery methods contributes to the decrease in largest contentful paint (LCP) between the monolith and frontend pages. Users experience a loading state for the banner during the fetching process, as they view either a newly designed hero or the existing design. Consequently, due to the variation in height between the two hero versions, there were only minor enhancements in cumulative layout shift (CLS) compared to the monolith logged-out homepage.
Challenges
The migration of the logged-out homepage presented some challenges to our relatively new micro frontend architecture.
The dual functionality of the udemy.com URL
Challenge: One such challenge revolved around the dual functionality of the udemy.com URL, which caters to both logged-in and logged-out homepages for users. A mechanism was necessary within Cloudflare to determine whether the user should go to the logged-in or logged-out homepage.
Solution: We have a route configuration object containing all routes in our frontend applications which is used by Cloudflare workers to route requests to the correct frontend application. To determine the route logic for requests to the new logged-out homepage, we enhanced the route configuration with options to check for the presense of the access token cookie.
Outcome: This new feature will allow us to route additional pages based on a user’s authentication status, such as our logged-in homepage.
Duplication of code across applications
Challenge: Migrating React components that we want to reuse from the monolith to npm packages led to duplication of code in the monolith and packages.
Solution: We spent time updating the usages of the migration components in the monolith, reducing redundancy within the codebases.
Outcome: We streamlined the sharing of components across applications. Teams are encouraged to develop and update shared components instead of building components in the monolith. While we have updated the usages of migrated components in the monolith, there are still other frontend applications we still need to update.
Circular package dependency
Challenge: The migration of the “Add to cart” button, utilized in the pop-up on course card hover, presented complexities due to its integration with an added to cart success modal containing another “Add to cart” button for users to add a bundle of related courses to their cart.
Solution: Due to time constraints, we temporarily created a package that contained a copy of the “Add to cart” button component to break the dependency.
Outcome: As we employed a temporary solution to address the circular dependency issue, it is important that we revisit and implement a permanent resolution in the near future for long-term sustainability.
Validating the redesign
To validate the changes and improvements, the redesigned modules above the fold underwent A/B testing against their counterparts on the old monolith logged-out homepage. Leveraging shared components for these new modules facilitated seamless integration across both our monolith and frontend applications.
Note that we deliberately chose not to migrate the monolith logged-out homepage first before A/B testing with updated designs so we didn’t spend time development components slated for replacement in the near future. This enabled our team to focus on the new modules.
Following the successful A/B tests of the above-the-fold modules, we shifted to the below-the-fold modules. Depending on their projected use cases, these modules were developed either within the frontend logged-out homepage app or as shared components, allowing their usage in other future micro frontend applications. The entirey of the new logged-out homepage was tested against the monolith logged-out homepage.
Performance metrics
In our A/B test comparing the monolith logged-out homepage to the micro frontends version, we noted performance enhancements for users in the U.S. We opted to launch the new homepage in the U.S. initially due to the availability of all Udemy subscription plans in this market. This decision allowed us to prioritize module development before focusing on localization efforts.
The new logged-out homepage has been successfully rolled out in the U.S. and India. The next phase involves expanding its implementation globally.
Conclusion
In this post, we discussed the migration of Udemy’s logged-out homepage from a monolith architecture to micro frontends as part of the redesign to reflect its wide range of offerings. Through rigorous planning and collaborate efforts, we successfully transitioned critical components to shared npm packages, reducing redundancy and facilitating smoother page migrations in the future. The outcomes of A/B testing underscored significant enhancements in performance metrics, validating the advantages of embracing a new micro frontend architecture.
Moving forward, our next steps include updating all usages of migrated components across our monolith and frontend applications. Additionally, we plan to update the modules to seamlessly integrate localized content from a content management system (CMS), enhancing the platform’s adaptability and user engagement across different regions.
