Context
jQuery UI provides a series of widgets, interactions, and effects that are used throughout the CP admin pages. It was built to provide tools that HTML4 and XHTML did not provide natively. But HTML5 provides many of these tools, and now that HTML5 is well supported by all modern browsers, it's time to be moving away from jQuery UI to take advantage of that fact.
Such a transition would assist accessibility, because users would then be using tools provided by HTML5 natively rather than tools specific to ClassicPress and Wordpress. In addition, jQuery UI was never designed to work with touchscreens, and using HTML5 would overcome that limitation. Making this change would also help speed up the CP admin pages, which can sometimes be very slow, because of the significantly reduced JavaScript to be loaded on each admin page.
Of course, not everything that jQuery UI provides is now provided by HTML5. In cases where some sort of JavaScript is still required, I would expect us to adopt much more modern, smaller, vanilla JavaScript libraries which not only do not depend on jQuery, but which also support touchscreen usage.
Possible implementation
This would be a longer-term project rather than a short-term task. Individuals would be free to pick an aspect that interests them. But I would like to get the ball rolling by replacing jQuery UI's draggable, droppable, and sortable interactions with HTML5 for the first two and a bespoke vanilla JavaScript library for the last one.
The draggable, droppable, and sortable modules total about 100kb minified, and they in turn depend on the core module, which weighs in at another 40+kb (on top of jQuery itself). So there is the potential for a significant reduction in the amount of JS loaded on each page where these modules are currently used.
Possible Solution
jQuery UI's draggable and droppable can be replaced by HTML5 natively. Sortable, however, would require a new JS library. I have been comparing two: SortableJS and HTML5Sortable.
SortableJS weighs in at 44kb minified; HMTL5Sortable at 16.1kb minified.
I had initially expected to want to use SortableJS because it's under very active development and it's very slick. Unfortunately, I have not found it at all easy to get the dragging animations to look right, while it also includes a lot of options we don't need.
HTML5Sortable, on the other hand, worked perfectly the first time I tried it out on the dashboard widgets and post/page metaboxes. I have only tried dragging, dropping, and sorting so far without attempting yet to make calls to admin-ajax
to register the new widget positions, but it looks as though it's exactly what we will need. (Touch support would be provided using the DragDropTouch library, which adds another 18kb.) Unfortunately, the developer announced after the latest release (in December 2022) that it's no longer being actively developed.
I am therefore looking for feedback on whether it would be fine to go with HTML5Sortable, on the grounds that, since it mainly leverages native HTML5, it is not so important that it be actively developed — DragDropTouch works perfectly fine despite not being updated for six years — or whether we should go with SortableJS (or, indeed, some alternative that I have not explored).
Will you be able to help with the implementation?
I would be happy to work on replacing jQuery UI's draggable, droppable, and sortable interactions. But I need some guidance on the right JS library to use for the sortable replacement before I can start work on this in earnest.