GitHub's Embrace of Web Components

GitHub has stated, "We're using Web Components extensively at GitHub" — github.blog. Since its inception over a decade ago, GitHub's frontend codebase primarily relied on jQuery. As their codebase expanded, the need for better encapsulation became evident to prevent the frontend from becoming unwieldy. They opted for Web Components due to their existing component-like structure in the codebase. This approach allowed for experimentation with Web Components without the need for a significant shift to a new framework.

However, GitHub encountered several challenges while transitioning to a frontend infrastructure utilizing Web Components. Common issues such as server-side rendering and accessibility are hurdles that developers generally face with the current state of Web Components.

To address these challenges, GitHub developed its own Web Components library named Catalyst, tailored to meet the needs of its developers. This library draws inspiration from Google's Lit library and Stimulus. Additionally, they are transitioning parts of their Rails codebase by utilizing ViewComponent, a framework designed for creating reusable components within Rails.

Catalyst: GitHub's Custom Library

Catalyst is an open-source library designed to simplify the creation of Web Components — github.blog. Migrating from a monolithic frontend to a more modular micro frontend architecture is a gradual process. GitHub routinely evaluates its codebase to identify suitable components for extraction. These components are then refined into robust, dependency-free Web Components.

One of the key advantages of using Catalyst from the outset is that it helps mitigate common pitfalls associated with writing Web Components and promotes best practices — github.blog. Notably, GitHub begins by implementing the Catalyst library within the monolithic structure. Once tested in production, the components are later moved to their own repositories. However, components may retain specific application code when used in different contexts, leading to a coupling with the monolithic application. To ensure reusability across various environments, the components must be adaptable and generalized.

You might wonder why GitHub chooses to remove the library that facilitates writing Web Components — github.blog. The rationale is that while Catalyst is beneficial, the goal is to create components with no dependencies. This approach reduces friction for external developers contributing to the components, as they won't need to familiarize themselves with Catalyst.

Moreover, eliminating dependencies and boilerplate code enhances performance and reduces the size of the components.

Open Source and Community Contributions

Currently, GitHub has extracted 17 custom elements into its open-source repository, GitHub-Elements. Where can you find Web Components within the GitHub ecosystem? Let's examine a GitHub page for custom elements. At first glance, it appears that GitHub has limited use of Web Components.

By inspecting GitHub's open-source repository, we discover a clipboard-copy-element that many developers have likely used to copy repository clone links. Upon examining the source code, we see that GitHub distributes this component using a custom element:

Custom Element: clipboard-copy

GitHub passes the value to be copied, user success feedback, and various attributes to the component. This element is robust and follows strict behavioral guidelines. Its flexible design allows for easy reuse in other web applications.

Furthermore, an analysis of the element's package.json file reveals that it is entirely dependency-free:

package.json

Only development dependencies are included for component testing and to enhance the developer experience with tools like TypeScript and eslint.

Registering a Web Component does involve some boilerplate, but GitHub simplifies this through naming conventions and the use of TypeScript decorators — github.blog. You can easily integrate this component into your project by installing it with:

$ npm install --save @github/clipboard-copy-element

And then importing it as an ES module:

import '@github/clipboard-copy-element'

In the node_modules folder, you'll find that the dependency is a mere 3,000 bytes—an impressive feat that would be challenging if GitHub had relied on a library for component creation.