By Morgan Cheng, Architect, Matt Wong, Senior Software Developer, and Patrick Fitzgerald, Principal Software Developer
When Hulu made its debut in 2007, the web experience was powered by a monolithic application written in Rails and jQuery. This architecture benefited Hulu at the startup stage by simplifying development and deployment efforts, but as our company and product and engineering teams grew, new architectural challenges emerged.
With the rapid growth of Hulu, engineering teams needed to increase the pace of feature development and delivery. Ultimately, changes to our development processes and system capabilities were required to sustain Hulu’s growth. The change needed to allow our engineering team to scale to meet business needs. This brings us to Hulu’s new web stack.
Design Requirements of Hulu Web
One of the key requirements for Hulu’s website was to reduce the time between product definition and deployment. With just one team working in one monolithic code base, it is hard to keep up with the pace of business needs. Our team knew it was more efficient to have multiple teams empowered to develop and deploy in parallel, but we needed a way to support this independent scaling of the web team.
Another requirement was to build UI with a componentized approach. The UI is expected to evolve continuously, so it’s critical that components are flexible. In addition, the internal change of one component should have little impact on the system as a whole.
And finally, the last requirement was a stable, client-side state management solution. At the end of the day, UI is about management and rendering according to application state. Since there are multiple teams working on different components within the same application, a proper application state manager is needed to avoid conflict.
New Web Stack
Our team believes that philosophy and principles take precedence over the selection of specific tools and technology, so we started the process by identifying the principles that would define the design of Hulu’s new Web architecture.
- Isolation of Efforts
The architecture must support multiple teams to work in isolation. That is, multiple teams should be able to develop and deploy at their own pace with minimal conflict and dependencies. The sum of all efforts should enable Hulu Web to evolve faster.
- Common infrastructure
There are several efforts that are shared among teams. In order to avoid unnecessary reinvention and overlapping, a common infrastructure system should be implemented to heed solutions.
- Applied Constraints
One thing that we carried with us from our Rails days is that we believe that constraints play a key role in the application of conventions. By having an enforced and consistent means to build features, it is much easier to construct stable and performant features across all teams.
- Convergence of tech stack across teams
Our goal is to converge our tech stack in such a way that it becomes seamless for teams to share knowledge and relocate developmental resources with other teams, ultimately improving internal cohesion.
After identifying our architecture principles, we ultimately chose the following technologies:
We chose React as our UI library. Initially, Vue.js and Angular were considerations, but React best aligns with how we feel web applications should be built. React has its own component state, and solves the challenge of state management.
To push the envelope of web performance, server-side rendering is preferred. We chose next.js as the underlying framework.
Since React is the UI library, we chose Jest and react-testing-library as our primary testing tools. Ever since the first commit, we’ve required 100% unit test coverage. This practice has ensured that developers are thinking consciously about how to test their code while developing new features, which has helped ensure high quality of the experience.
How We Built It
- Infrastructural Support
To build the infrastructure, the web development staff is divided into one platform team and multiple application teams. Each application team is responsible for different aspects of the experience. To achieve parallel development, components of the experience are isolated to be deployed as independent applications. There are many common functionalities shared between the isolated applications. The platform team maintains a framework to host all these shared functionalities within an npm package, enabling each application team to only focus on their application-specific features.
Since the Hulu Web experience is served by multiple applications, it is critical to dispatch requests to the corresponding applications. Ideally, each URL can be easily mapped to a unique application.
Each URL can go to a separate application if a user is logged in. Additionally, Hulu’s marketing team needed canonical URLs to be readable (i.e. www.hulu.com/the-handmaids-tale). We ultimately needed to provide a way to surface different users experiences if a user was logged in. Therefore, a one-URL-to-different-application mapping needed to be configurable).
- Cross Module Collaboration
The key to successful cross module collaboration is to have a proper boundary among modules. The boundary should ensure the interface is as simple and stable as possible, which reduces possible impact between modules.
The video player is an example of good cross module interface design. The player is hosted in the browse page, but has little connection with other modules. The interface is simple and stable. The input to the player module is well-defined metadata, and the output is a URL change after content rollover. The simple and stable interface ensures the frictionless parallel work.
The change to Hulu’s new web stack involved not only new technologies, but also significant improvements to user experience. Given the scale of the changes, we rolled out the changes incrementally over a period of several months. During this time, we collected and analyzed user feedback to optimize the experience.
Hulu’s new web experience was initially available on beta.hulu.com, which offered Live TV to web users for the first time. Viewers using the previous version of Hulu.com were invited to try out the new experience through an opt-in link provided via banner notice.
Once the new Hulu Web experience was feature complete, cohorts of users were gradually redirected to the new experience. Full cutover of all users was complete in the fall of 2018.
What We Learned and What’s Next
We learned a lot during this journey. The number one takeaway from our development of this technology is to prioritize parallel development and deployment. The Hulu experience on web cannot be built or improved on by a single team. Streamlined collaboration across teams is and will continue to be the key to our success.
We’re extremely proud of what we’ve built. Our new web stack empowers faster evolution down the road and enables us to continually iterate and build a better experience. Additionally, we’re thrilled to have received so much positive feedback about the new Hulu.com experience — in fact, we recently won the People’s Voice Webby for the new Hulu.com experience.
What’s next for Hulu Web? We’ll invest heavily in technology modernization. PWA will be our focus to bring a native-like experience in Hulu Web. Given that web has the fastest deployment to end users and allows us to respond rapidly to feedback, we’re looking forward to evaluating and rolling out innovative ideas for the Hulu experience on this platform.
We’re excited for what’s to come, so please stay tuned.
If you’re interested in working on projects like these and powering play at Hulu, see our current job openings here.