Seamless transition to a headless CMS and decoupled GatsbyJS frontend
Since 2012, Happy Cog has partnered with Yoga International to transform and adapt its brand to the digital world. First, with its transition from print to online, and second, through the creation of their mobile app for iOS and Android. As a leading resource within the Yoga Community, Yoga already had a significant user base even prior to COVID-19. After the pandemic began and more people were spending time at home, Yoga’s online user base spiked even further. To ensure they could keep up with the growing demand, Yoga partnered with Happy Cog to implement a headless CMS that would power its website, mobile apps, and streaming TV apps; integrate a decoupled GatsbyJS frontend using GraphQL; modernize and optimize their auto-scaling AWS architecture; and import a decade’s worth of user data and content — all with zero downtime.
Migrating to a Headless CMS and Decoupled GatsbyJS Front-End
As demand for its services continued to grow, Yoga had reached the limits of its performance abilities within its previous CMS system. As a result, we wanted to be able to improve the performance delivery of Yoga’s tremendous volume of online content to its 500,000+ users in a fast and reliable way.
As their user base grew during the pandemic, as more people were staying at home, Yoga International also needed to find a way to modernize its tech stack and create a more unified brand experience across multiple frontends, including its website, mobile apps, and streaming TV apps. On the backend, Yoga was experiencing large new traffic spikes, so we needed to upgrade its previous CMS version to easily accommodate the load when this occurs.
Additionally, Happy Cog was tasked with seamlessly migrating Yoga’s extensive user database and content to a custom headless CMS with zero downtime along the way. Yoga needed more flexibility and power with the technology they were already using, so we set out to rewrite the way its APIs interacted between frontend and backend properties in a much more modern way.
Improving the Customer Experience with Zero Downtime
To prepare for a seamless transition, we had to work to maintain Yoga’s entire database of users, subscriptions, and billing data, and switch it over to a new system without it interfering with the frontend’s functionality. This presented an opportunity for Yoga to streamline their database, as it has gotten very large over time.
Our three main reasons for making the transition to a decoupled, headless architecture were:
- Performance, speed, and a more unified platform.
- All content platforms were previously separate, which had become a large barrier to maintenance and platform improvement that needed to be addressed.
- Modernization of Yoga’s code base to be able to improve its features and services in a seamless, more rapid pace than before.
Seamlessly Transition to a Modern Architecture
To ensure a seamless transition to a new content management system, we documented in detail all aspects of the site’s functionality, recreating them in the new platform without any effect on user experience.
Our thorough review of the existing site architecture allowed us to recreate it with a more efficient architecture. This helped shed years of technical debt (inefficiencies introduced over time, as features changed and the site grew past its initial vision).
How we did it:
- Migrated all existing content to a new, decoupled content management system focused only on content.
- Migrated user data from the previous CMS to a custom user database.
- Re-wrote the backend GraphQL server to work with the new headless CMS and user database.
- Utilized Cloudflare Workers to quickly route traffic to the new backend, allowing existing frontends (website, mobile app, and TV app) to operate as-is.
A Unified Brand Experience and Amplified Site Performance
Since the transition, Yoga International was able to reduce their monthly AWS infrastructure costs by 40%, as well as successfully speed up many of its processes on both the development side and the content side. Because of our migration to a new decoupled CMS and backend, Yoga can now enjoy a considerable increase in development efficiency as well as platform enhancements as the new system makes it a lot easier to build, test, and launch new multi platform features — especially on web and mobile.
All told, Yoga now has the tools and platform to work more efficiently while providing an accessible and unified brand experience for its customers — not to mention the faster time it takes to develop new features, lower infrastructure costs, and better site performance altogether.
We made this entire switchover with zero downtime. The Happy Cog team figured out a way to keep our user data synchronized while we were completing the CMS transition. We went directly from our old system to the new system without any periods of downtime, which was huge and a very big win for us. Happy Cog truly feels like an extension of our team, and we’re excited to be equipped with a great set of modern tools for the foreseeable future.– John Daskovsky, Chief Technology Officer, Yoga International