’s Frontend: a brain dump in one act

There is currently an issue open to improve the frontend documentation (see Frontend · DEV Docs) to get people onboarded quicker in the frontend. Big shout out to @rhymes
for opening this issue!
Add developer documentation about the JavaScript frontend #2507
rhymes commented on Apr 21, 2019 Is your feature request related to a problem? Please describe.
On the heels of Thoughts on migrating to TypeScript and improving the overall quality of the frontend DEV codebase, DEV Notes: Don’t Forget To Clear Cache! and I thought it’d be nice and useful if there was some kind of overview of how the frontend pieces (especially the JavaScript layer) all fit together.
I know there are two sets of JS code bases, the “legacy" in app/assets/javascripts managed by Rails’s sprockets and the one in app/javascript managed by webpack.
Other than that I’m not sure how everything works (I admit I haven’t spent much time in the frontend, other than the occasional bug fix or small feature).
A few questions that a docs/frontend/ might answer:

How does initialization work?
Is the Preact layer totally ignorant of the vanilla JS layer?
Do the two JS code bases interact with/call each other?
How are they attached to the template pages? Does each webpage serves two sets of packed/minified JS files?
What does the service worker do in the context of Is it registered on the whole page? Is there more than one?
How does edge caching fit in all of this?
How does instant click fit in all of this?

Plus anything else deemed important. It doesn’t have to be super in depth, just a treasure map to know what does what and how everything fits together.
Describe the solution you’d like
A documentation file that contains a description of how the JS frontend works
Describe alternatives you’ve considered
I haven’t considered alternatives TBH, the status quo is okay, it’s just going to be easier for contributors if there’s some onboarding documentation about the code base, especially if the goal is to refactor it, modernize it or even adapt with TypeScript or other solutions. View on GitHub

I decided to write this post because I’ll be contributing to this documentation issue and thought it would be beneficial for everyone, including myself. I’m hoping people will ask questions in the comments and/or fill in missing gaps in the post.

Vanilla JS

There is a lot of the frontend code base in the app/assets/javascripts folder. This part of the code base does not use ES modules. It loads scripts, runs stuff once the DOM has loaded, has stuff in the global scope and provides a lot of the functionality on the client-side for
The assets are loaded through standard rails/fastly methods that add the