kiwix-js icon indicating copy to clipboard operation
kiwix-js copied to clipboard

Remove jQuery and use native DOM functions instead

Open mossroy opened this issue 6 years ago • 4 comments

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.

mossroy avatar May 09 '18 20:05 mossroy

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.

Jaifroid avatar May 10 '18 13:05 Jaifroid

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 avatar May 10 '18 19:05 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

mossroy avatar May 10 '18 19:05 mossroy

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.

Jaifroid avatar May 10 '18 19:05 Jaifroid

Is this ticket not deprecated?

kelson42 avatar Nov 13 '22 15:11 kelson42

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 avatar Nov 13 '22 15:11 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 avatar Nov 14 '22 09:11 Jaifroid

List of sub-issues or PRs of this issue:

  • [x] #916
  • [x] #918
  • [x] #919
  • [x] #920
  • [ ] #921

Jaifroid avatar Nov 14 '22 10:11 Jaifroid

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

mossroy avatar Nov 15 '22 10:11 mossroy

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 avatar Nov 15 '22 10:11 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!

Jaifroid avatar Mar 16 '24 13:03 Jaifroid