Redesign article.js Javascript file

[keeganland]

article.js is a static script that is included on every single page of the site. Fair enough. Some functionality we need everywhere.

It is on every page in the site because it is loaded as a static file in ubyssey/templates/base.html. This is on line 143 of aforementioned file as of this writing: <script src="{% static 'ubyssey/js/article.js' %}" type="text/javascript"></script>

The problem: Some functionality that lives in this static script is incredibly specialized, and articles.js is incredibly long. The latter may or may not be a problem; fortunately browser caches prevent users from constantly having to re-download this file. Still, long scripts do pose the risk of running more slowly, and there has been very little thought put into what goes in this file in such a way it actively undermines the rest of the site.

Observe the imports made in ubyssey/static_src/src/js/article.jsx, which is used by Webpack to produce static file ubyssey/js/article.js:

import React from 'react'
import ReactDOM from 'react-dom'
import './modules/Youtube'
import { ArticlesSuggested } from './components/Article'
import { Poll } from './components/Poll'
import Search from './components/Search.jsx';
import { AdblockSplash, CookieDisclaimer } from './components/Cookies'
import { Galleries } from './components/Gallery'
import Timeline from './components/Timeline.jsx'
import Episode from './components/Podcast/Episode.jsx'
import { Nationals } from './components/Nationals'

import { Nationals } from './components/Nationals' is relevant to ONE article on the entire site. import { Poll } from './components/Poll' is used in a very tiny number of articles. Yet every single page on the site runs logic that tries to account for the possibility that the reader is currently reading one of those tiny few articles.

A particular maintenance problem arises from this file being written in this way. Oftentimes, articles have special behaviours associated with them. They correspondingly usually have special code associated with them. But sometimes, an article seems to work by "magic". This is because, despite the behaviour corresponding to only a few articles, the behaviour is accounted for by every page in the site. Because those behaviours are "specific" but lumped together with "general" behaviours, there is nowhere intuitive for a developer to look to find those behaviours.

As a result, the features rolled into article.js are some of the most likely features of the site to break, and least likely to be repaired, and therefore most likely to generate complaints from users.