jQuery Plugin Elimination

dannon commented 3 years ago

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
[x] jquery-mousewheel
[ ] jquery.form
[ ] jquery.rating
[ ] select2
[ ] jquery-ui
[ ] farbtastic
[x] jquery.cookie
[ ] jquery.dynatree
[x] jquery.wymeditor
[x] jquery.complexify

hexylena commented 3 years ago

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

nsoranzo commented 3 years ago

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

OlegZharkov commented 3 years ago

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 commented 3 years ago

Done, thanks @OlegZharkov!

dannon commented 3 years ago

@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 commented 3 years ago

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

Nerdinacan commented 3 years ago

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 commented 3 years ago

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.