jQuery Plugin Elimination

[dannon]

Before we can remove jQuery itself, we've got a list of these plugins that we need to walk through and replace with modern methods. Some of these are straightforward -- walking through mouse wheel event binding and replacing it with modern events, etc., but some are going to be more involved.

• jquery.autocomplete
• jquery.event.hover
• jquery.event.drag
• jquery.event.drop
• jquery-mousewheel
• jquery.form
• jquery.rating
• select2
• jquery-ui
• farbtastic
• jquery.cookie
• jquery.dynatree
• jquery.wymeditor
• jquery.complexify

[hexylena]

ooh yay @ removing select2. that one causes me some complexities in the auto admin recording. Looking forward to what replaces it!

[nsoranzo]

What about visualization plugins? Is the plan to remove jQuery also from them or is that out of scope?

[OlegZharkov]

ooh yay @ removing select2. that one causes me some complexities in the auto admin recording. Looking forward to what replaces it!

Hi @hexylena, where is that select exactly? If you could create a paper-cuts issue, it would be awesome. I'd try to replace it with Vue-multiselect during next event

[hexylena]

Done, thanks @OlegZharkov!

[dannon]

@nsoranzo External plugins can continue to do whatever they want -- they've just got to ship their own libs like we've been doing more recently.

[nsoranzo]

@dannon That's what I thought, thanks for confirming!

[Nerdinacan]

There's another easy but less obvious way to avoid unnecessary jQuery and Galaxy imports altogether. As new code is written, if you simply modernize your utility imports, it's easy to remove a lot of implicit dependencies.

As an example, I recently ran into this, which I see a lot:

// instead of...
import Utils from "utils/utils";
Utils.bytesToString(raw_size);

// try this
import { bytesToString } from "utils/utils"
bytesToString(rawSize);

Seems harmless, but that utils file is a big bucket of imports that includes specifically jQuery which should not reasonably be a dependency of string formatter function like bytesToString. In theory, webpack's tree shaking should remove unused dependency imports but I think that plan gets ruined if you blithely import the whole utils module.

Regardless, all you need to do is separate bytesToString into its own file (or put all the string formatting functions with no dependencies into a stringFormattingUtils.js file) and import it independently. You remove an implicit dependency not only to jQuery but often to global Galaxy as well.

Long story short: Avoid overuse of "common" files unless you are closely paying attention to the dependencies. I'm not saying to put every function in its own file, but I AM saying try to put functions that share common global dependencies into files together to avoid this problem.

Anyway, it's easy to avoid, the fix is quick and this is an example of how spaghetti code is born.

Good luck!

[bgruening]

I labelled it with paper-cuts. @Nerdinacan examples seems easy to for new people to clean some code up. Mason if you see for of those things please docment them here, that is super useful I think.

[itisAliRH]

I don't find any file or component that used jquery.cookie then can be removed.

jquery.complexify is used in lib/tool_shed/webapp/templates/webapps/tool_shed/user/change_password.mako but we can replaced it with any password strength package or write our own. I recommend checking some basic password rules in the frontend and then re-evaluating them in the backend.

[itisAliRH]

Select2 is depended on jquery.autocomplete. Some of them were replaced with vue-multiselect in #11076. It is used in client/src/mvc/ui/ui-misc.js and client/src/viz/trackster/tracks.js, too.

[itisAliRH]

jquery.wymeditor is only used in PageEditorHtml. V1 pages will go read-only, no editing, and let user decide with content migration after 22.01.

[itisAliRH]

jquery.dynatree is not used in the client but @dannon believes it's used as a bundled in external tools. It's used in some toolshed .mako files.

[itisAliRH]

farbtastic is used in client/src/utils/config.js and imported in client/src/viz/circster.js and client/src/viz/trackster.js. #12867 here a new colour picker is implemented using Vue that can be replaced.

[itisAliRH]

jquery.rating is used in client/src/mvc/grid/grid-view.js and client/src/legacy/grid/grid-view.js and imported in client/src/viz/trackster.js.

[dannon]

I forgot to update this but I actually killed mousewheel and cookie in #11710. Updated now.

[dannon]

'complexify' was removed in #13228.