User:JSherman (WMF)/An ES5-centric Approach to JavaScript in MediaWiki

Summary
While the Moderator Tools Team worked to enable Special:Preferences (an OOUIHTMLForm) for the mobile site, we realized that our JavaScript was becoming unnecessarily jQuery-centric. OOUI objects feature jQuery configuration (e.g `$content` and `$element`) which cause jQuery objects to spread through the rest of the code if we directly use those features as documented and demonstrated in examples. The mobile layout for Special:Preferences is in core, so IE11 support is a must, meaning that some jQuery (such as OO methods providing `jQuery.Promise`) is still valuable. We found that we had no need for jQuery's features outside of the methods provided by OOUI objects, and that moving to ES5 where possible provided us with an extra opportunity to understand how our code was working and to optimize performance. ES5 code also precludes future jQuery upgrade work. We used YouMightNotNeedjQuery with IE11 support as our starting point for quickly moving back towards ES5.

Select and work with DOM elements where possible
Only use jQuery and OOUI where they provide unique utility

Extract DOM elements from OOUI objects
Use the OOUI features as needed, then extract the DOM element for passing to functions or inserting into the DOM if possible.

Individual jQuery method replacement
By following the advice above, jQuery methods will be unavailable to most of your code; if it has as much jQuery scattered throughout as our did, it will break. To instead extract DOM elements to replace individual jQuery method calls (which is repetitive, but won’t break your code all at once):

Show/Hide
Take advantage of utility classes to change the display of elements instead of using jQuery methods.