GitHub has finally finished removing the JQuery dependency from its frontend code. This was a result of gradual decoupling from JQuery which began back in at least 2 years ago. They have chosen not to replace JQuery with yet another framework. Instead, they were able to make this transition with the help of polyfills that allowed them to use standard browser features such as, EventListener, fetch, Array.from, and more.
Why GitHub chose JQuery in the beginning?
- Simple: GitHub started using JQuery 1.2.1 as a dependency in 2007. This enabled its web developers to create more modern and dynamic user experience. JQuery 1.2.1 allowed developers to simplify the process of DOM manipulations, define animations, and make AJAX requests. Its simple interface gave GitHub developers a base to craft extension libraries such as, pjax and facebox, which later became the building blocks for the rest of GitHub frontend.
- Consistent: Unlike the XMLHttpRequest interface, JQuery was consistent across browsers. GitHub in its early days chose JQuery as it allowed their small development team to quickly prototype and release new features without having to adjust code specifically for each web browser.
Why they decided to remove JQuery dependency?
After comparing JQuery with the rapid evolution of supported web standards in modern browsers, they observed that:
- CSS classname switching can be achieved using Element.classList.
- Visual animations can be created using CSS stylesheets without writing any JavaScript code.
- The addEventListeners method, which is used to attach an event handler to the document, is now stable enough for cross-platform use.
- $.ajax requests can be performed using the Fetch Standard.
- With the evolution of JavaScript, some syntactic sugar that jQuery provides has become redundant.
- The chaining syntax of JQuery didn’t satisfy how GitHub wanted to write code going forward.
According to this announcement, this step of decoupling from jquery will allow them to:
- Rely on web standards more
- Have MDN web docs as their default documentation to refer
- Maintain more resilient code in future
- Speeding up page load times and JavaScript execution time
Which technology is it using now?
GitHub has moved from JQuery to vanilla JS (plain JavaScript). It is now using querySelectorAll, fetch for ajax, and delegated-events for event handling; polyfills for standard DOM manipulations, and Custom Elements.
The adoption of Custom Elements is on the rise. It is a component library native to the browser, which means that users do not have to download, parse, and compile additional bytes of a framework. With the release of Web Components v1 in 2017, GitHub started to adopt Custom Elements on a wider scale. In future they are also planning to use Shadow DOM.
To read more about how GitHub made this transition to using standard browser features, check out their official announcement.
