Home

Building web apps without a SPA - A case study

We all know that feeling. You’re scrolling through a page that’s full of mostly static content - constantly being interrupted by spinners - and the thought hits you, “Why did they use Javascript for this?”

Now this might not always be fair. I’ve done a fair amount of web development and there is definitely a time and a place for a SPA. And rendering libraries like React make client side work an absolute pleasure. But that’s not what I’m going to write about today. I’m going to write about all the other cases. Or as I like to call it, 73.6% of the internet.

My fiance is studying to become a veterinary physiotherapist. She has to learn a lot of animal body parts. She’s picked up a few books along the way to help her memorise various animal parts that normally look something like this:

Ladies and Gentlemen, the canine

I took a look at the content she was studying and thought it would probably be handy if we could put all those pictures into a little quiz app so that she could test herself. After a bit of requirements gathering, it was decided it needed to support:

To keep it simple, we added two types of quizzes. The first kind points to a body part and asks you to choose what limb it is. The second kind of quiz names a part and asks you to select it on the picture. All you need to do is first prepare quizzes by uploading images and selecting the limbs.

This is what is ends up looking like:

And here is what a quiz looks like:

Nothing about this is particularly complex. I probably took around a day or so in total to add everything we wanted. I worked fast and loose and skipped automated tests because I don’t plan to work on it further (and most of it is CRUD operations).

What I would like to emphasize at this point is that I’ve seen many projects with a similar scope become a React/Angular/Bitcoin app. There are a few reasons I can think of (off the top of my head) for this:

  1. The developer would like to learn a new stack (nothing wrong with this!)
  2. The developer uses it out of muscle memory
  3. The developer wants to create an app like experience and things this will result in faster performance

I have no issue with the first reason. I also don’t have an issue with the second reason when you just want to get something done fast and you’re comfortable with a way of working. What I would like to question however is the third reason.

When working on a smaller project, I often find that it is both simpler to reason with, and faster to write everything in the backend. And I don’t just mean faster in terms of development. I think you can make a much faster system overall when you’re not sending a bulky javascript bundle that needs to perform client side rendering.

As it turns out, a lot of people think server side rendering is slow simply because of the downloading and parsing browsers need to do with javascript. But there’s a handy little library I absolutely love that alleviates this problem entirely. Turbolinks (made by the good folks at basecamp) intercepts the links on your page and replaces them with ajax requests. It then takes care of placing the content back in your page. What this means is that you can entirely work as if your app is entirely server side, while still leaving it feeling very much like a web app. And the best part is we get to leave the browser to do the rendering work instead of a javascript engine! Browsers are actually pretty good at doing that.

Here’s what it ends up looking like in action:

Disclaimer: I haven’t given it a go yet because it’s still in beta but the basecamp team has moved onto Turbo which is supposed to replace Turbolinks.

Then just to be extra safe, for the small parts of javascript I do use (for the quiz questions) I use rollup to bundle it together. This ends up producing a very nice and small javascript bundle because I refused to use any javascript dependencies for the client side code. The bundle clocks in around 3.9kB.

What this results in is a very light weight, and easy to develop web app. Obviously there’s not a silver bullet that solves all problems but the next time you’re building a web app, it might be worth taking a step back and asking the question, “Do I really need a javascript frontend framework for this?”

As always you can find the code here if you want to take a deeper look:

https://gitlab.com/BenWiser/physio-quiz

Subscribe