A Little Javascript Knowledge is a Dangerous Thing — Part 1
The Strange Tale of the Almost-a-Database
This is not a tutorial, it’s a cautionary tale.
This is the story of my first web development project, undertaken when the only languages I knew were the big three: HTML, CSS, and Javascript. I had just learned the basics of JQuery, and wanted to get my feet wet with a self-directed project, start to finish — creating a real web app. I just had to decide what to create.
Inspiration Strikes
Inspiration came from my hobbies. A friend of mine was trying his hand at running a tabletop RPG campaign over the web, and bit off a bit more than he could chew. It occurred to me that so much of the stress of running a campaign didn’t just come from the pressure of creative work, but all those little hassles of logistics. Getting all your tools software set up just right. I wanted to create something that would make those hassles a little easier to bear.
We had been using the Discrord bot Rythm to pipe in background music for our game sessions, so managing audio in real time was one of the game master’s responsibilities. The DM also had to be a DJ, har har. This would be my opportunity — a simple web tool for automating the process of running the Rythm Bot. All it would take was a little bit of string manipulation to generate pre-formatted commands for Rythm, and a little bit of clipboard interation to copy those commands to Discord with a single click.
I named the project the Marvelous Musical Automat — An automat, rather than a jukebox or a player, because it wouldn’t play the tracks, it would merely serve them up to the user with a single click, the way an automat serves food.
My intentions were good, but good intentions don’t fix bugs. And they certainly don’t fix amateurism.
The Frankenstack
To be effective, the Automat would have to store data, and it would have to store data long term. But when I was building, I had no idea what a development stack was, no idea what Mongo or SQL were. I had no idea how to connect a front end to a database. So I improvised.
Instead of a proper database, I would create a system that took all the data the system needed, and compress it into a single JSON object. The app would take that singular object, shove it into the browser’s local storage, and call it a day.
And of course, the contect of the page would have to change based on what data was retrieved, so I’d also need a system that took that gigantic JSON object and parsed its contents into usable HTML.
I had created an ersatz backend database and hooked it up to an ersatz React. A few nightmarish all-nighters later, I made it work.
Looking under the hood
The core of the system consisted of two classes: Jukebox and Track. A Track consisted of a title, genre, and url. The system only held one Jukebox, and it consisted of a list of all the Tracks, in a single array, and a list of ‘genres’. The genres were the general categories the songs would be sorted into.
There was almost no hard-coded HTML on the page, all of it was generated via JQuery based on information contained in the Jukebox object. Most of that JQuery witchcraft was handled by the methods of the Jukebox and Track classes. Of course, an object stored in JSON is just a plain object. No methods. So every time the page loaded, the Automat would reconstruct the Jukebox and all the Tracks from scratch.
[Lines 459–481]
This left the app with an unorganized pile of Track objects. I wanted the app to group the Tracks into genres, and then display those genres as separate categories on the page. At first glance it seems like it might have been wiser to give the Jukebox a series of Genre objects, each of which had a sub-list of Track objects, but at the time it seemed like that would have made it harder to create and delete genres on the fly. Instead, I had set it up so that the list of genres would be re-generated every time a track was added or deleted, by reading the indiviudal ‘genre’ tag on each Track.
When the genres were established, the process of building the page began.
The global function buildPage did the whole thing. It would call three other methods, nested inside each other: Jukebox.parseJukebox, Jukebox.parseGenre, and Track.parseTrack. They would run in nested loops, creating a hierarchial tree of DOM elements via JQuery.
With these tree methods working in unison, a page was miraculously created. From a database that could only store one hard-coded type of data, and only retrieve and display it in a single hard-coded way.
None the less I’m happy for the experience. Not so much because it taught me what not to do, but because, oh my god, I actually saw this insane plan through to completion, and as a complete beginner.
Soon I’ll be writing a follow-up to this post, detailing how I remade this project from the ground up using the MERN stack, and ran into a whole host of other problems.
