Refactor frontend away from AngularJS
On a few pages, we are using AngularJS, which has several issues:
- it will no longer be supported by Google after December 2021
- it is extremely slow in execution speed, to the point where you can see the Angular templates load on the page before the actual content loads. This is unsightly and needs to be fixed.
- NG templates and Jekyll substitutions are stylistically similar (both use
{{ }}
). This requires the usage of{%raw %}
in Jekyll to not overwrite Angular - it's generally quite awkward to mix the two together.
Note that we are only using AngularJS on a few specific pages: the homepage, the dynamically generated category pages, and the dynamically generated repository pages. We are not using AngularJS on any "News" or "About" page, and these pages do not need to be changed from how they currently are.
I do not want to make the entire website a single-page application, as users who do not wish to enable Javascript should still be able to read the News/About pages; however, refactoring the frontend pages to not use Javascript at all (but instead be built via backend scripts) would be impractical and would be detrimental to the average user's experience. I would like to keep the existing routing in place.
I also want to keep this a static website - no web-facing backend should exist.
There are a few different ways we can refactor each of these pages:
- Just use plain Javascript code. I would prefer we use this option if possible, though if refactoring proves to be too difficult we can fall back to another option.
- Use only JQuery. I don't particularly like this option (JQuery should generally be avoided nowadays in favor of regular Javascript) but we are already using it. Note that removing JQuery code is not so important, as the performance impact is considerably smaller and it is still a supported library.
- Upgrade to Angular. This may prove to be the simplest approach, though Angular itself is still rather large.
- Use React, which is what I'm most familiar with (I also firmly believe that JSX is the best language for writing UIs, due to the amount of tooling support for it and how readable it is). However, while React is smaller than Angular, it is still rather large.
- Use another framework entirely - there are many valid frameworks which can be used here, i.e. SolidJS (which seems very promising to me, and also uses JSX - performance benchmarks show it to be the fastest way to write non-imperative JS).
UPDATE Nov. 22 2021 :
https://code.ornl.gov/rse/ornl.github.io/-/commit/4a75b316486161d4ae475d41e16b9ed6a3618fdb significantly hides the template loading (and gives an overall performance boost due to loading JS properly, loading less CSS, and compressing HTML/CSS), but does not eliminate it entirely.
We should not use this for every page, but another option is to use Jekyll templates to generate entirely static HTML for certain pages (thus avoiding Javascript entirely). The idea is that we can create a _data
directory (that specific directory is used by Jekyll by default), add softlinks to other JSON data files in this directory (so we don't bloat the git repository), and then reference the data files. See https://jekyllrb.com/docs/datafiles/
I'm thinking the home page would make an excellent candidate for this. Individual repo pages would potentially be workable, but we would have to be careful about routing and we would have to accept that a user would have to load the whole page again; I think that keeping the search pages Javascript-focused would be best.
So the plan is:
- Home page: Jekyll only
- category.html and repo.html : look into refactoring these into an SPA application (these should not really be two separate pages). Most likely angular.js at this point.