search

ClassicPress / ClassicPress-v2

NOT READY FOR PRODUCTION.
GNU General Public License v2.0
13 stars 4 forks source link

Replace jQuery UI in CP back-end: First Step: Draggable, Droppable, Sortable #241

Open KTS915 opened 1 year ago

KTS915 commented 1 year ago

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.

viktorix commented 1 year ago

I like the idea. My main question is, what happens if a plugin/theme enqueues those scripts? Will we continue to include them for backward compatibility?

HTML5Sortable disclaimer says:

A fair warning: this repository is currently not being actively developed. It works pretty fine, but if you find any issues you will need to fix them yourself. I try to keep the dependencies up to date and will happily help you fix issues and merge PRs for bugfixes or new features.

So if we find issues, we could submit PRs or fix our own copy of the library.

KTS915 commented 1 year ago

I like the idea. My main question is, what happens if a plugin/theme enqueues those scripts? Will we continue to include them for backward compatibility?

Initially, we'll keep the scripts in the CP bundle, so anyone using them in a theme or plugin wouldn't be affected. (This will, of course, mean that we increase the download size of CP a little as we add the new libraries, but we won't be loading the old scripts.)

If and when we get well along in this project, then I'd suggest we add a deprecation warning whenever someone uses jQuery UI, so that we could remove it altogether from the CP bundle the next time we release a major version. But it will take some time before we get there, and we could even write some blog posts on how (and with what) we've replaced jQuery UI modules, so that those currently using them would have a model on how to follow suit.

So if we find issues, we could submit PRs or fix our own copy of the library.

Yes, that's what I'm thinking too.