Chapter 1: The Role of Web Components

In this discussion, I won't delve into the debate over whether Web Components will overshadow Frontend Frameworks, nor will I explore the future of Frontend Frameworks in web development. I also won't entertain the notion that Web Components are obsolete. Instead, I’ll focus on how prominent tech companies are adopting Web Components.

We have previously examined how GitHub incorporates Web Components and how Salesforce develops components to strengthen their codebases. Various organizations utilize Web Components in unique ways, some more extensively than others. This article aims to investigate YouTube's specific use of Web Components. It's important to note that I am not affiliated with YouTube or Google, so insights from those who work there would be appreciated for accuracy in reflecting YouTube's technical landscape.

If you're unfamiliar with Web Components, I recommend reading this introductory article. For a more comprehensive exploration, you might consider following my series: The Complete Web Component Guide or Building Your Own Blog Portfolio with Web Components.

Chapter 1.2: The Polymer Library

The Polymer project aims to streamline the development of scalable applications utilizing Web Components. This initiative led to the creation of the open-source JavaScript library, Polymer, which is maintained by Google and adopted by various Google services, including YouTube. Polymer offers essential tools for crafting custom elements and addresses common challenges that developers encounter when creating Web Components with Vanilla JavaScript.

Notable companies leveraging Polymer include Netflix, Electronic Arts, Comcast, Nuxeo, ING, Coca-Cola, McDonald's, BBVA, IBM, and General Electric.

Polymer simplifies the development of encapsulated, reusable Web Components, facilitating quicker and easier creation of custom elements. At its core, Polymer employs the lit-element base class from the Lit library. Google suggests using LitElement directly, as it has proven to be the more successful alternative.

For those embarking on new projects, considering LitElement is advisable.

Here’s a brief illustration of what a custom element using Polymer could resemble:

Chapter 2: Dissecting YouTube's Use of Web Components

To understand YouTube’s architecture better, we can analyze its source code. Unlike GitHub, where Web Components might be less visible, YouTube clearly employs custom elements identifiable by a hyphen (-) in their names.

The entire application is encapsulated within a custom element named ytd-app. Many elements remain concealed until the user interacts with them. For instance, while watching videos on YouTube, you might notice the ytd-miniplayer, which is pre-rendered yet hidden until needed.

Another observation is that certain custom elements, such as yt-guide-manager, yt-mdx-manager, yt-playlist-manager, and yt-hotkey-manager, lack child elements. It appears that YouTube employs these elements to enhance the website’s functionality.

Examining the visible components requires expanding the div with the id "content", revealing additional custom elements like tp-yt-app-drawer, ytd-mini-guide-renderer, and ytd-page-manager.

Chapter 2.1: Reverse Engineering YouTube's Custom Elements

Let’s delve deeper into the yt-chip-cloud-chip-renderer, which represents a category chip beneath the search bar.

To conduct some reverse engineering, we can use the customElements.get method in the console to retrieve the constructor for any named custom element:

customElements.get('yt-chip-cloud-chip-renderer');

This command returns the constructor function, which can be explored in the DevTool's source tab:

We discover that the yt-chip-cloud-chip-renderer is defined in the desktop_polymer.js file, which YouTube loads from a specific URL. Consequently, we can load this script in a simple HTML file to create our own chip:

And there you have it! We’ve crafted our own YouTube chip:

Here is an example in a CodePen:

Chapter 3: Conclusion

YouTube, like many other companies, is increasingly embracing web standards. By encapsulating portions of their existing code into modular, flexible Web Components, they reduce coupling within their codebase. Most importantly, these components can be reused across different web environments, independent of any specific frontend framework. This strategy ensures that the extracted components remain resilient amid infrastructure changes, positioning YouTube for long-term success, irrespective of whether Web Components or frontend frameworks dominate the future.

I welcome any questions and am open to constructive feedback. Please feel free to connect with me via LinkedIn, follow me on Twitter, or subscribe to receive my updates via email.

For those interested in unlimited access to content on Medium, signing up through this link will support my work at no extra cost to you.

About the Author

I am a Software Engineering Analyst at Accenture Song. We are always on the lookout for talented developers, so don’t hesitate to reach out if you’re interested in joining our team!

What drives my passion is the desire to create tools that can significantly benefit and enhance the lives of others. For instance, if you're tired of sifting through your browsing history for information you encountered days ago, my Web Highlights Chrome Extension can assist you. It boosts productivity by organizing your research efficiently, similar to how you would highlight text in books and articles. Your highlights sync directly to the web app at web-highlights.com, making them accessible from anywhere.

Further Reading

Level Up Coding

Thank you for being part of our community! Explore more content within the Level Up Coding publication.

Follow: Twitter, LinkedIn, Newsletter

Level Up is revolutionizing tech recruitment. Join our talent collective!