[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
- 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()
- prefer
-
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
- 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 ofgl-dropdown
(#22223 (closed)) -
replace jquery.cookie
withjs.cookie
(@mikegreiling !7085 (merged)) -
replace jquery.timeago
withtimeago.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
-
Refactor uses of jQuery selectors with
document.querySelectorAll
and iterate withfor .. of
. This should cover the vast bulk of jQuery usage. -
Replace all jQuery event binding (
$.on()
,$.off()
,$.ready()
,$.click()
,$(function() { /* ... */ })
, etc withel.addEventListener()
andel.removeEventListener()
.
-
polyfill window.CustomEvent for IE (@filipa #24018 (closed) - !7204 (closed))
-
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. -
Replace all jQuery AJAX calls (
$.get()
,$.post()
,$.getJSON()
,$.ajax()
, etc.) with a Promise-based library (e.g. axios)
NativePromise
is available in es2015 (withasync
/await
on the way) and it will soon be the de facto standard over callback-based asynchronous function calls.
-
Issue #24011 (moved)
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.