Nasir Shadravan

March 22, 2021

The Modest Frontend

I'm a backend engineer. For 15 years, I use Django as my web framework to create any software project I need and I was never disappointed. I've always enjoyed dealing with data models, handling background jobs and anything backend. Of course, there was always rendering the HTML templates and returning an HTTP Response. The classic web.

Several years ago the new hype began on building "modern" web applications. Browsers became much stronger with a lot more functionalities amongst those front end routing and Javascript ES6. Now you could do some heavy lifting of your application in the browser. Single page applications were here. New frameworks started popping up. Backbone.js was the first framework I used instead of jQuery and later Angularjs, React, Vue. All of them were wonderful pieces of technology wiht everything written in Javascript.

I stopped rendering HTML templates and started creating APIs on the backend. This was much fancier: Create a modular frontend with many components and reuse them whenever you need. If you need data, call an API and fetch them from the backend with an auth token you stored in local storage. Maintain a global state so you can recreate the application state any way you want. Write HTML and CSS inside your Javascript. Deploy your front end and backend separately and make sure they're in sync. Wait thirty minutes for Node modules to be installed.

It was fun until it wasn't. I couldn't prototype projects quickly because I wasn't getting much scaffolding. I had to have a big Javascript codebase to do things that I used to do in python and were supported out of the box in Django (e.g. auth). I had to create extra code for converting my data model to JSON objects.

Perhaps it was necessary but I doubted that. Later on, for a big project of one our clients at Xeco Labs we were very close to choosing React for building an investment portfolio tracker but eventually decided against it and moved on with a classic server rendered Django app. I'm convinced that decision saved us tens of thousands of euros.

Then I came across Stimulus: a JavaScript framework with modest ambitions. Created by the team at Basecamp and HEY, Stimulus doesn't take over your whole frontend. In fact, it doesn't take over much at all. Stimulus bridges your HTML to Javascript the same way as CSS classes bridge your HTML to CSS styles. Stimulus controllers are highly reusable and can be packaged as a standard shared library that can be used across multiple projects.

In Dec 2020, the Basecamp team introduced Hotwire as an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. At its core, Hotwire introduces Turbo which offers a set of techniques to speed up page changes and form submissions, decomposing pages into smaller components and streaming page updates from the backend without writing any Javascript. Stimulus is the Javascript framework of Hotwire to complement what you cannot achieve with Turbo.

I have since included both Turbo and Hotwire in my dev stack and for the first time I enjoy creating the frontend of my projects. Because they are mostly good old HTML templates rendered from the server. Whenever I need interactivity,  I can create or re-use an existing Stimulus controller at my disposal. There is no more a separate frontend application. Less Javascript, less maintenance and more productivity.

For several years, we kept pushing the work from server to the client. Now, the pendulum is swinging back. It is possible to create complex, modular and fast web applications without having to use a client side framework. You don't need to have all your application on the client just because of a few stateful and interactive components. You can include those component in your existing HTML pages.

I will be writing more about creating lightweight frontend mostly using Hotwire. If you're interested, please subscribe to this newsletter or follow me on twitter