Skip to content

[meta] Eliminate jQuery library use in favor of modern alternatives.

Goals

jQuery has served its purpose well for a long time, ironing out the wrinkles between shoddy JavaScript and DOM implementations across the popular browsers of its day. However, we now live in a post-IE8 world, and much of what jQuery handled for us can now be done natively without loading a 250k (85k minimized) library.

Our aim with this meta-issue is to guide the eventual deprecation of this library in favor of Vue.js, complimented with other light utility libraries, polyfills, shims, and native function calls.

Process

  1. Update frontend guidelines.
  • emphasize native solutions and discourage jQuery use wherever possible
    • prefer document.querySelectorAll over jQuery selectors
    • prefer es2015 standards like for .. of over $.each()
  • link to resources for jQuery alternatives (e.g. youmightnotneedjquery.com)
  • link to Vue.js and es2015 learning resources for new contributors
  • forbid all use of jQuery within Vue.js components
  1. Triage and replace all jQuery-based libraries with ones which don't rely on jQuery.
  • remove jquery-ui (#18437 (closed))
    • remove jquery-ui/autocomplete
    • remove jquery-ui/datepicker
    • remove jquery-ui/draggable
    • remove jquery-ui/effect-highlight
    • remove jquery-ui/sortable
  • remove select2 in favor of gl-dropdown (#22223 (closed))
  • replace jquery.cookie with js.cookie (@mikegreiling !7085 (merged))
  • replace jquery.timeago with timeago.js (@ClemMakesApps #21793 (closed) - !6274 (merged))
  • replace / remove jquery.nicescroll
  • remove jquery.endless-scroll
  • remove jquery.highlight
  • remove jquery.waitforimages
  • remove jquery.atwho
  • remove jquery.scrollTo
  • remove jquery.turbolinks (after all event binding has been migrated off of jQuery)
  • remove jquery_ujs
  • remove jquery.ba-resize

  1. Refactor uses of jQuery selectors with document.querySelectorAll and iterate with for .. of. This should cover the vast bulk of jQuery usage.

  2. Replace all jQuery event binding ($.on(), $.off(), $.ready(), $.click(), $(function() { /* ... */ }), etc with el.addEventListener() and el.removeEventListener().

  1. Replace all jQuery .animate() calls with CSS3 animations. This should be both lighter and more performant and they are available in 100% of browsers GitLab currently supports.

  2. Replace all jQuery AJAX calls ($.get(), $.post(), $.getJSON(), $.ajax(), etc.) with a Promise-based library (e.g. axios)
    Native Promise is available in es2015 (with async/await on the way) and it will soon be the de facto standard over callback-based asynchronous function calls.

This is a long term goal. jQuery has been deeply integrated with our frontend code from the beginning, so this will be a slow systematic process. But we need to start moving in the right direction.