Frontend utility functions should be exported as ES modules and not pollute global space
Currently we have dozens of utility functions like gl.utils.backOff()
, gl.utils.rstrip()
, and gl.utils.prettyTime.parseSeconds()
. These are all imported in main.bundle.js
on EVERY page load and put into globally accessible variables.
This has several downsides:
- all utility functions are loaded on all pages
- we needlessly pollute the global space
- these utility modules are "impure modules" since they have side effects and this prevents several optimizations that webpack can make when bundling them
- since we don't explicitly import functions where they are needed, it is difficult to truly visualize our dependency tree. every module that uses these
- our linter cannot detect when these methods are invalid
To make this transition easy, I recommend we take a two-step approach.
-
Transform all util functions into proper ES module exports, but continue to export them as globals as well, wrapped in a method that will spit out a deprecation warning when in DEVELOPMENT or TEST environments (production compilation will remove these warnings as dead code, so there is no performance tradeoff).
-
Slowly convert all utility function calls into proper import statements, gradually removing the global exports one at a time as they are no longer needed.