No JS Website

Sometimes developers find a hammer, and all the world is a nail. When I built my first website, it was all html and plain javascript. When a mentor introduced me to Angular (1.2 I think), it was a revelation. Templating and organizing my website made life so much easier. Since then I've used JQuery, JSPs, Angular 2 (and later), React, Elixir Live View, etc.

Every site I've built for a company has been a single page web app and used a large framework like Angular or React. It's increasingly felt like a hammer used to apply a stamp. Most of the times the single page app could have just been a single page website, but both business and developers are used to a large framework, and so that's what's used, even when it's completely overkill.

A couple years ago, when Stardew Valley updated and I wanted to update my Stardew Bin Tracker (source) site that tracks how much you've shipped, I decided to strip out the angular and try to make it as simple as possible. This was largely in response to how frustrated I was at work with how slow we were moving due to all of the framework baggage we were carrying. At the time, we were building a site in react, and it seemed like to add a single feature to a page you needed to touch twenty files that were all just shuffling data around. There was so much complexity and indirection it seemed ridiculous. To my joy and surprise, I was able to rebuild the tracker site with just JQuery and a library or two. It seemed so much easier and more maintainable (at least in theory).

When applying for my current position, I updated my website from angular 5 to angular 8. Since then, and related to my post on going more open source, I've been using Brave and defaulting to turning javascript off on websites by default. When I decided it was time to modernize my website yet again, I decided to forgo angular completely and to challenge myself to rebuild my website without using javascript.

The main two problems I had where how could I use templates so that I didn't have to repeat myself, and how could I loop and if over those templates. If I had that ability, I felt like I didn't need javascript for anything else. I don't need an app, it's all static content, and I can do basic movement and responsiveness through plain old css.

After wrestling with a number of options, I created Simple Site. I use Kotlin to watch a couple of input folders (one for data and one for html). I then do some very basic html parsing to create very simplistic extensions to html. In effect, the app grabs my html, and then uses the templates to fill in loops, if statements, values, and includes for other htmls. It then concats the results to a single html file and single css file. Because it's static, I can then run a standard browser watch to display changes. Technically I have two different programs watching folders, but it still live reloads faster than an angular app. Simple Site can be built as a jar and I created an alias so that I could run the jar from any project and have it watch and recompile those files.

This kept mental overhead really low, as I was just writing html with very little extension. It's really lightweight, and still allows me to stay organized and create sections that include other sections or loop over components. Minus the interactivity of javascript, I don't feel like I lack anything, as my use case was already so static. On the deployment side, my app went from multiple mb to just a few kilobytes, as I have no libraries or extensive dependencies fetched from NPM. The site is blazing fast and in my opinion looks and works just as nicely. So other than the challenge of not having javascript, I basically hit no pain points, and find things better by every metric.

I've been using it for a while now to update my site, and have actually significantly expanded it in the new no-js world, including a section on games in KorGE (that each link to playable versions of the game that do use javascript, using Kotlin Multi Platform). I've cleaned up some of the CSS and modernized the look of my mods. There is still work to be done, but I've found that removing so many layers of abstraction has given me better visibility into the actual html and css, and helped me improve those skills.

There is a certain kind of bliss that comes with being frustrated with something for years, come up with and iterate on a solution, and eventually build a tool that you like and that relives that frustration. My tool may never overtake the big name frameworks, but it works perfectly for my use case, and that's enough for me.