We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long…
Overview
GitHub has successfully removed jQuery from its frontend code, marking a significant transition towards using standard browser APIs. This article outlines the history of jQuery's adoption, the reasons for its removal, and the incremental approach taken to achieve this goal.
What You'll Learn
1
How to replace jQuery functionalities with standard browser APIs
2
Why decoupling from jQuery improves code maintainability and performance
3
When to use Custom Elements for enhanced web components
Prerequisites & Requirements
- Understanding of JavaScript and DOM manipulation
- Familiarity with modern web standards and APIs(optional)
Key Questions Answered
What were the reasons for GitHub's decision to remove jQuery?
GitHub removed jQuery due to the evolution of web standards that made jQuery's functionalities redundant. Features like querySelectorAll(), classList, and the Fetch Standard replaced jQuery's methods, allowing for cleaner and more maintainable code without the overhead of a library.
How did GitHub approach the incremental removal of jQuery?
GitHub adopted a gradual approach by setting metrics to track jQuery usage, discouraging new jQuery imports, and creating automated tools to enforce this. They also maintained a custom build of jQuery to remove unused modules over time, ensuring a smooth transition.
What are Custom Elements and how did GitHub utilize them?
Custom Elements are a web standard for creating reusable components. GitHub began adopting them more widely after the Web Components v1 spec was released, converting existing functionalities like modal dialogs into Custom Elements to enhance performance and maintainability.
What polyfills did GitHub use during the transition from jQuery?
GitHub utilized several polyfills to support standard browser features during the transition, including github/eventlistener-polyfill and github/fetch. These polyfills were served only to outdated browsers to minimize performance impacts on modern users.
Key Statistics & Figures
Size of jQuery dependency removed
30 kB
This reduction in bundle size contributes to faster page load and execution times.
Technologies & Tools
Frontend
Jquery
Initially used for DOM manipulation and AJAX requests.
Frontend
Custom Elements
Used to create reusable components without additional library overhead.
Frontend
Fetch Standard
Replaces jQuery's AJAX functionality for making network requests.
Key Actionable Insights
1Transitioning from jQuery to standard APIs can significantly enhance code performance and maintainability.By leveraging native browser features, developers can reduce dependency on external libraries, leading to faster load times and improved user experiences.
2Implementing Custom Elements can streamline component management in web applications.Custom Elements allow for encapsulated, reusable components that enhance code organization and reduce redundancy, making it easier to maintain and scale applications.
3Monitoring and enforcing coding standards through tools like ESLint can help maintain code quality during transitions.By discouraging the use of outdated libraries, teams can ensure that new code adheres to modern practices, reducing technical debt over time.
Common Pitfalls
1
Rushing the transition from jQuery to vanilla JavaScript can lead to regressions and broken functionality.
A gradual approach allows for testing and validation of new implementations, ensuring that existing features remain functional throughout the transition.
Related Concepts
Web Components
Javascript Apis
Progressive Enhancement