Tracking JS modernization

[bmesuere]

The goal of this issue is to track the "older" parts of our JavaScript code. There are 3 separate parts:

• Getting rid of jQuery: this is a big library and not really needed on the modern web
• Getting rid of the old application.js file: this will unify our build setup to only use the application pack
• Migrate to typescript: better type checking

jQuery

• [x] The bootstrap token-field and typeahead still depend on jQuery. This is only used in the course label edit. #4083
• [x] Almost all views contain code to initialize something that is wrapped in $(function() {}). This can probably be replaced by a jQuery-less equivalent #3692
• [ ] A lot of old JS code still uses jQuery. I think there a limited number of uses:
  • Selecting elements: can easily be replaced by native JS
  • Fetching: can also be replaced by a fetch
  • Events: should also be possible to refactor without too many issues
  • Adding HTML to pages, mostly by converting strings to html elements. There is no easy replacement for this, but the template system from lit could be reused here.

application.js

• [x] i18n: is only there because this is loaded first. Can probably move to the pack without any problems once the rest is gone https://github.com/dodona-edu/dodona/pull/3841
• [ ] ace: not really straightforward on how to move this. We now use a ruby gem for this that hooks into sprockets. The library has a lot of individual files for programming languages that are loaded on demand so not sure how bundling would work.
• [x] tokenfield/typeahead: Already removed everywhere #4189
• [x] first-input-delay: No longer used to my knowledge. Can probably be removed here (and from the package file) #3591

TypeScript

• [ ] translations.js
• [x] course.js #3921
• [x] course_membership.js #4083
• [ ] drag_and_drop.js #4209
• [x] exercise.js #3930
• [ ] export.js
• [x] favorite_course_buttons.js #3963
• [ ] modal.js
• [x] polyfills.js (removed) #3593
• [x] punchcard.js #4080
• [ ] pythia_submission.js
• [ ] repository.js
• [ ] scoresheet.js
• [ ] series.js
• [x] sign_in.js https://github.com/dodona-edu/dodona/pull/4023
• [x] submission.js #4127
• [ ] util.js

[bmesuere]

If #4189 gets merged, the ace editor is the only remaining asset in application.old.js. We use an (outdated) rails gem to add support using the sprockets pipeline. The problem with this library is that it contains A LOT of plugins to support all languages. These are loaded on demand (by file name) to keep the default package size small-ish.

There are a number of alternatives to remove this last remaining entry

• use a hosted CDN version of the editor: we try to avoid this, should be the last resort
• find an alternative rails integration: I haven't found one
• bundle everything into a single file with our webpack pipeline: the file size will be huge
• vendor it: manually in the public folder or by adding it to our package file and copy the files to the public folder in a build step (also see https://github.com/ajaxorg/ace-builds/)
• use a different editor. For papyros we use codemirror, for dolos we use monaco.

If this is done, the old application.js file can be removed but this also means that the sprockets gem and its config and deployment stuff can probably be removed.

[bmesuere]

As an update to my previous comment: Sprockets is still used for the newer JS as well, so it can't be removed. What we can do is leave ace as is, but rename the file from application_old to ace editor and only include it where needed.