It turns out I was just being prejudiced. JS frontends are actually pretty cool. Being able to focus on behaviors and appearances instead of just data give a different feel to coding, and I don't hate it.
For the past few months, I've been super into rock climbing. It's good exercise, helps with problem solving skills and It's fun as hell. It's also very social, and climbers love to compare but also encourage each other.
I decided to write an app that tracks different climbs and who has completed (or as we say in climbing "sent") them.
In this build, rails is running in API mode, and the controllers are rendering objects as JSON. This allowed me to almost seamlessly move objects from back-end to front-end and vice-versa.
The JS objects have behaviors to add themselves to the DOM and, in the case of the send class, static functions to handle forms.
There are also global variables for selecting DOM elements, and global functions mostly fetch requests and event listeners. After all the definitions, the last part of the JS file executes all the necessary functions after the DOM has loaded.
The biggest challenge I ran into when coding this project was using AJAX to update the information after the page was loaded. I was having an issue where creating or deleting a send worked fine, but the display containers wouldn't update without a page refresh or when a specific area of the page was clicked.
At first, I tried to simply tack the functions responsible for updating the DOM to the end of create and delete functions. But, that wasn't working . Eventually I realized that even though the display functions came after the create/delete fetch requests, because fetch requests are asynchronous, the code was actually running before communication with the server was finished. Using setTimeout() and playing with the delay times eventually led to the desired behavior.