Taming the Beast of the Core

Deviant Love is a browser extension that finds all the art on a DeviantArt Faves page, organizes it by which artist made it, and sorts the artists in “most faved art” order, letting you know exactly who to thank for all this lovely artwork. It’s one of my all-time favorite projects to work on, to the point of it being my gateway back into Web development, but at its core is a hunk of code that caused me a lot of grief a while ago. I’d like to do some programmer talk about this file.

In the beginning, core.js (now core.module.js) was home to most of the extension’s code, as I thought that was the best way to keep code findable. But as I strove to make Deviant Love ever better and more useful, using an editor that discouraged having “too many” open files, I wound up creating a monster. This is the version-by-version measurement of SLOC (Source Lines Of Code) as reported by GitHub:

Version SLOC Notes
1.0.2 186 Started using a Git repo with this version
1.0.3 – 1.0.4 203
2.0 Alpha 1 307
2.0 RC 1 369
2.0 RC 2 368
2.0 384
2.0.1 385
2.0.2 408
2.0.3 – 2.0.4 411
2.0.5 – 2.0.6 407
2.1 – 2.1.1 373 Dropped workarounds for missing <progress> and <input placeholder> support in old browsers
2.1.2 – 2.1.3 372
2.2 688 Added subaccounts
2.2.1 685
2.2.2 690
2.3 712
2.3.1 – 2.3.4 719 The highest point – or arguably, lowest point
2.4 627 Switched editors and started breaking up core.js
3.0 Alpha 1 576 Had a key realization – the best way to represent HTML is with HTML, not with the JS to create it
2.5 564
2.5.1 – 2.5.4 509 Introduced Svelte; filename is now core.module.js
3.0 Alpha 2 363 Most of the main UI was rewritten as Svelte components
3.0 Alpha 3 359 The new action bar and its Options action are implemented largely via other files
Current Git source 339 Everything for adapting the data to the user’s subaccounts is now elsewhere

At over 600 lines, this was painful to deal with; a constant ordeal of scrolling up & down playing Where’s Waldo with what I wanted to work on. Nowadays, when I want to change how Deviant Love finds things? Open find.js. When I want to change how artists are represented in the interface? DeviantEntry.html. The ol’ core file still has a lot of duties, but at less than half its worst size, scanning through the file feels much snappier. I just now took a look at it and quickly identified all the things I’d still like to move out or phase out.

Lessons learned from this? Always use an editor that can handle many open files elegantly. Complex operations should go in their own files. And building up & working with complex DOM structures in code (including via jQuery) tends to lead to unmaintanability (just make sure the alternative doesn’t lead to unusability).

You could make the argument that there shouldn’t be a “core” at all, just a full embrace of modularity. I think there’s some value to having a “brain” that represents the general flow of the application and helps coordinate the other modules. So Deviant Love will always have a core – I’ll just need to keep it lean from now on.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s