Remove jQuery and use native DOM functions instead

[mossroy]

Following the suggestions of @Jaifroid in #361, it would be interesting to see if we can remove the use of jQuery library.
The reasons why we introduced it (notably cross-browser compatibility) might not be relevant now. We make a basic use of jQuery.

If removing this library works on our target browsers, does not make the code much more complicated, and gives a few performance enhancement, it might be worth it.

[Jaifroid]

Here is a great resource for viewing the jQuery source code of any particular jQuery function:

https://j11y.io/jquery/

I think it would be difficult to complete a transition from jQuery to native DOM methods all in one go. I think it would have to be in stages. Some of the work has been done in the fix-TypeError-tests branch, which I have just rebased off the latest version of Fix-history-back-regression branch.

Related thought: It might be worth having some blue-sky thinking about experimenting with a contemporary app framework like React (with or without React-JSX). It is possible to use React to compile to a web app with node, but there is also React-native that will compile to Android, iOS and UWP native apps off the same JavaScript codebase.

[mossroy]

Thanks for this useful link.
What you already commited in the branch looks promising.
Why couldn't the transition be tested in one shot? Because I think it's necessary to check first that it's really feasible before doing it. In order to avoid being stuck half of the way with both coding styles everywhere in the code

[mossroy]

Regarding React, it's probably another github issue to create and discuss on. I don't really see what would be its benefits for us, for now

[Jaifroid]

I just thought it might be difficult to maintain two separate codebases in sync with each other for the amount of time needed to go through the hundreds of lines that use jQuery in minor form - things like $('btnTop').on('click', function(){…..}); which would need to be changed to document.getElementById('btnTop').addEventListener('click', function(){…});. There's a lot of that kind of code. Anyway, GitHub has some good tools for keeping things in sync.

As for React, the main benefit would be the possibility of having a single code-base in JavaScript that can compile to JavaScript, PWA, UWP, iOS and Android native apps. Kind of like a contemporary, UI-centred version of Cordoba. Anyway, it was just something that occurred to me as a long-term possibility to bear in mind. It's not worth creating an issue for it yet.

[kelson42]

Is this ticket not deprecated?

[Jaifroid]

It's old but still relevant. JQuery has fallen very much out of favour in the JS dev community becasue there are better tools (e.g. TypeScript and/or compiling with babel) that deal with browser differences at compilation stage, and allow developers to write everything with modern native code.

The problem is that we have masses of JQuery, and removing it is laborious. A higher, but somewhat related, priority is #554.

[Jaifroid]

This resource is useful: https://youmightnotneedjquery.com/ .

It might be worth breaking this issue down into more manageable sub-issue steps, I'll propose some as they occur to me.

[Jaifroid]

List of sub-issues or PRs of this issue:

• Remove jQuery hide and show statements for elements selected by ID #916
• Convert jQuery .on event listeners to their native JS equivalents #918
• Convert jQuery .click(), .focus(), .attr() and other homologous functions to their native equivalents #919
• Convert jQuery statements that manipulate CSS to their native equivalents #920
• Remove as much jQuery as possible from Bootstrap modal invocations #921

[mossroy]

In terms of priority, I would have set this issue (and sub-issues) as low.
I don't say it's not worth doing it, but take care of not being overwhelmed by tickets to implement, especially in this transition period where you'll be alone to handle many things.

Or maybe prioritize the code that will be kept in the long term, and don't spend too much time on refactoring what is only used by the so-called jQuery mode (now deprecated).

NB: it's only my point of view, you'll handle things as you wish, of course

[Jaifroid]

I agree it's fairly low but I see it as "low-hanging fruit", and in a way important for completion of #554, which I think is now becoming pretty urgent. Almost every helper software now presumes npm / yarn and modern code that will be refactored by the compiler, and not having to deal with jQuery as a dependency would be one less thing to worry about.

I deliberately broke this into parts because it means I can do it at my own pace, "in-between" more important things.

But many thanks for the advice, which I shall certainly bear in mind!

[Jaifroid]

Finally closed in #1225, but note our version of Bootstrap still requires jQuery, so we would need a separate issue to upgrade Bootstrap and finally be rid of jQuery!