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

• The bootstrap token-field and typeahead still depend on jQuery. This is only used in the course label edit. course_membership.js: replace with webcomponent #4083
• Almost all views contain code to initialize something that is wrapped in $(function() {}). This can probably be replaced by a jQuery-less equivalent Remove jquery usage for detecting if the dom is ready #3692
• jQuery in the rails views
• 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

• i18n: is only there because this is loaded first. Can probably move to the pack without any problems once the rest is gone Bump i18n-js from 3.9.2 to 4.0.0 #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.
• tokenfield/typeahead: Already removed everywhere Remove tokenfield typeahead #4189
• first-input-delay: No longer used to my knowledge. Can probably be removed here (and from the package file) Remove first-input-delay package #3591
• Rename application_old.js #4360

TypeScript

Beta Give feedback

1. translations.js
2. Course.js: remove jquery and convert to typescript #3921
   chore +1
   
3. course_membership.js: replace with webcomponent #4083
   chore +1
   
4. drag_and_drop.js: remove jquery and convert to typescript #4209
   chore +1
   
5. exercise.js: remove jquery and convert to typescript #3930
   chore +1
   
6. export.js: remove jquery and convert to typescript #4267
   chore +1
   
7. favorite_course_buttons.js: remove jquery and use typescript #3963
   chore +1
   
8. modal.js: remove jquery and convert to typescript #4618
   +0
9. Replace our custom fullscreen polyfill by an external one #3593
   chore +1
10. punchcard.js: convert to typescript #4080
    chore +1
11. pythia_submissions.js: remove jquery and convert to typescript #4463
    chore +1
    
12. repository.js: remove jquery and convert to typescript #4298
    chore +1
    
13. scoresheet.js: remove jquery and convert to typescript #4465
    chore +1
    
14. series.js: remove jquery and convert to typescript #4266
    chore +1
    
15. Replace sign_in.js by webcomponent #4023
    chore +1
    
16. submission.js: remove jquery and convert to typescript #4127
    chore +1
    
17. util.js: remove jquery and convert to typescript #4849
    chore +1
    

[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.