moj-frontend icon indicating copy to clipboard operation
moj-frontend copied to clipboard

Remove dependency on jQuery

Open gregtyler opened this issue 4 years ago • 6 comments

Summary

It would be nice to eliminate our dependency on jQuery, instead using native browser functionality (e.g. setAttribute instead of attr, querySelector rather than find).

Motivation

There are a few reasons I think this is beneficial:

  • It removes a dependency
  • None of the jQuery functionality we use isn't achievable in a (fairly) modern browser
  • It removes a barrier to entry for contributors: they wouldn't need to know jQuery
  • The code is more aligned to current best practices, documentation and tutorials

Describe alternatives you've considered

We can just keep using jQuery and accept the concerns above for now.

Additional context

We'll need to add polyfills for functionality that isn't available in all browsers > IE8. (e.g. Opera Mini and IE9/10 don't support HTMLElement.dataset) We may be able to detect and polyfill automatically as part of the build process.

We may also need to bulk out the IE8 polyfill if that's not already done by the GOV.UK Design system polyfill.

We shouldn't attempt this without unit tests (#132) as it would be difficult to spot regressions.

gregtyler avatar Jan 08 '21 16:01 gregtyler

If this is going to take some time (it doesn't sound trivial) then in the meantime it would be nice to make the dependency on jQuery explicit. (I can't see it mentioned in the docs or the package.json)

DanCorder avatar Jun 16 '21 16:06 DanCorder

Good point @DanCorder, we should add it to the installing with NPM documentation.

Edit: this has now been added in #187

gregtyler avatar Jun 16 '21 16:06 gregtyler

GDS are considering removing jQuery from the prototype kit, which would mean that (until we remove jQuery ourselves) we'd need to bundle jQuery in the package and add it to the extension config file.

gregtyler avatar Dec 03 '21 11:12 gregtyler

Does this need adding to the package.json file until the dependency is removed? I tried removing jQuery per https://github.com/ministryofjustice/hmpps-template-typescript/pull/303/commits/eec17bba26095971c9dd3c352115b9fd238283e9 but then found that the sortable tables from this repo need it

yndajas avatar Jan 30 '24 14:01 yndajas

jQuery is listed as a peer dependency in package.json so, from what I understand of peer dependencies, your package manager should either auto-install it (this is what npm seems to do) or warn you to install it manually.

gregtyler avatar Jan 30 '24 14:01 gregtyler

your package manager should either auto-install it (this is what npm seems to do) or warn you to install it manually.

As far as I can tell it didn't do that. npm install output after removing it as a direct dependency on our app but retaining the @ministryofjustice/frontend dependency:

up to date, audited 1177 packages in 785ms

191 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

yndajas avatar Jan 30 '24 15:01 yndajas