Replace jQuery UI components with something more modern

[jhawthorn]

We use only a few jQuery UI components in the admin. jQuery UI is a bit dated and is no longer being regularly updated (but we are on an older version even so). The few places we do use it do not fit into our UI well, even though some have received some customization.

There likely exist better, more modular, purpose built libraries that can replace the widgets we are using.

Our current use of jQuery UI probably weighs about 100k of JS (minified), 20k of CSS (minified), and a half-dozen small images. This isn't the main motivation to remove it, but we can likely do better.

• Sortable Replace jquery ui's sortable with Sortable.js #2523
• Datepicker Switch from jQuery UI datepicker to flatpickr #2477, Switch from jQuery UI datepicker to flatpickr #2506, Remove jquery-ui datepicker #2510
• Autocomplete Use datalist instead of jquery-ui/autocomplete #2509

Sortable

Probably the hardest to replace, this is used in two different ways:

• Allowing admins to sort items in tables
  • generically on all tables with class "sortable"
  • sorting products within taxons
• Arranging taxons into a tree (which is a bit more demanding and complicated)

Potential alternatives:

• https://github.com/RubaXa/Sortable
• https://johnny.github.io/jquery-sortable/
• https://github.com/lukasoppermann/html5sortable
• (many more)

Datepicker

We use the datepicker in a few places, both to represent a date range (a start and end date), and to represent a single date. Ideally we would avoid including Moment.js as part of this (which is a great library, but huge).

Potential alternatives:

• <input type="date"> (browser support is too patchy to use this without polyfills or something for IE11)
• ✔️ https://github.com/chmln/flatpickr (suggested by mdesantis)
• https://github.com/dbushell/Pikaday (looks quite good)
• http://bootstrap-datepicker.readthedocs.io/en/latest/
• https://fengyuanchen.github.io/datepicker/

autocomplete

We use autocomplete only in one place: filling in product properties. It uses ajax to fetch the possible property names.

Potential alternatives:

• Nothing? we might not need this functionality
• ✔️ HTML5 datalist (browser support is patchy but maybe we are happy with progressive enhancement)
• https://github.com/twitter/typeahead.js/ (looks dead, but there are popular forks)
• https://leaverou.github.io/awesomplete/
• https://github.com/bassjobsen/Bootstrap-3-Typeahead

[bbuchalter]

This is a nice idea John. I wanted to make a comment about date selection: let's make sure there is good time selection support too. In my store, we've added customizations to give admins better control over the exact time and date something might be scheduled to occur. Would be nice to know going forward that the UI library for this will be compatible with those customizations (or future Solidus features). One noteworthy feature I'd like to see in this area is good presentation of timezone data; I don't need the UI to let me change the timezone (although that would be nice), but I want to be confident that it's clear what timezone is being chosen. ❤️

[mdesantis]

Hello! I propose this one: https://github.com/chmln/flatpickr

It has time selection too, while none among https://github.com/dbushell/Pikaday, http://bootstrap-datepicker.readthedocs.io/en/latest/ and https://fengyuanchen.github.io/datepicker/ seem to have time selection (feel free to check, maybe I couldn't spot it reading their documentations).

I used flatpickr in a Rails project recently, so I know how to integrate it in a Rails project, and I know that works well with turbolinks. It works great on mobile too.

I'm gonna try to integrate it into a solidus sandbox and see what happens :-) in the meantime, happy new year!

[aaronlifton]

Why not use angular or react for the backend instead? A collection of jquery code has made it kind of hard to add more js features to the backend, at least for me. I ended up putting angular in the solidus backend.

[jhawthorn]

Why not use angular or react for the backend instead? A collection of jquery code has made it kind of hard to add more js features to the backend, at least for me. I ended up putting angular in the solidus backend.

I've tried to avoid including any of the heavier frameworks, because regardless of their pros/cons the opinions of them are very polarized between developers (angular especially so). They also would require more (and more specialized) knowledge for any developers to be able to contribute to the admin.

I'd love to give react a more serious consideration. As far as I can tell it is the clear winner of the "framework war". I also personally have enjoyed using it. But I fear its inclusion would require extra work from developers to get react-rails (or similar) behaving correctly in their stores.

In any case, including a heavier framework doesn't remove the need for these components. We would still need them and additional libs to make them play nicely.

[jhawthorn]

This is done and will be shipping with Solidus 2.5