The Details: Frontends and Backends
The basics of how apps are built by their component parts.
Last updated: March 12, 2025
It seems like I’m referencing the difference between a frontend and a backend in almost every single Technically post, so I figured it made sense to spend some time diving into what those really are, and most importantly, give you a real example of what goes into a frontend vs. what goes into a backend in a real life application.
This distinction – so important! If I’ve done my job correctly, you’ll begin to see all software you use as frontends and backends of varying shapes and sizes. So without further ado…
Frontends and backends: the restaurants of code
If you’ve been reading Technically for a while, you know that an application – like the one you’re reading this post on – is made up of just two parts: a frontend and a backend.
The best analogy I’ve thought of for frontends and backends is a restaurant. Say you’re having a lovely evening with the homies (after you’ve hugged and kissed them of course) and you stroll into your favorite upscale Brooklyn eatery. Your experience is interfacing with a few things:
-
A nice table with comfortable chairs
-
High quality food and drink brought to your table
-
Servers catering to your every whim
Fantastic. Behind the scenes though, there’s tons of logistical work that goes into being able to provide you with said experience. In particular, there’s an entire kitchen staff that worries about:
-
What should be on the menu
-
How to cook everything consistently and perfectly
-
Where to source quality ingredients from
-
How to prepare and store those ingredients
-
What to do in situations where ingredients are missing or go bad
As a patron, you don’t need to think or deal with any of this – you interface with the “frontend” of the restaurant, and the “backend” takes care of making sure the food that arrives on your table makes you want to leave a 5 star review.
It’s not a perfect comparison, but this is pretty much how I think of application frontends and backends.
The frontend’s job is to interface with the user and call upon the backend when it needs any sort of data to provide to the user. There’s a menu of things that the backend can do for the frontend – these are API endpoints – like sending a user’s profile information, creating a new user account, or accepting credit card information. As long as you’re accessing the frontend through your web browser, it can only be written in HTML, CSS, and JavaScript (the browser doesn’t support other languages).
The backend’s job is to take care of all of the data and logistics behind the scenes. It’s consists of the database, API endpoints for interacting with that database, and any other workflow related things like scripts for billing users, data scrubbing for compliance, and other such highly interesting and obscure tasks.
🚨 Confusion Alert
The frontend and the backend of an app are not necessarily separated physically: they’ll often be deployed on the same single server, and even sit in the same master folder (or repository) of code. Literally, I’ve seen codebases with a /frontend folder and a /backend folder.
Real world example: Spotify
If you love music as much as me you’re probably using Spotify every hour, and are pretty familiar with the app. Let’s break down which parts of the Spotify app on your laptop / phone / browser are frontend, and which parts are backend. Hopefully you’ll be able to apply this same framework to other apps in your life (maybe even the app you work on).
We’ll start with the artist screen.
I’ve picked a niche artist that most of you probably haven’t heard of, but that same logic applies to what the kids are listening to these days, like Kenneth Lamar or whatever.
What’s coming from the database
The first place I like to start is figuring out what “information” that I’m seeing on the page is data – meaning it’s stored in a database somewhere – and what is just formatting and visual elements. Here’s all of the stuff on this page that’s (probably) data:
-
The artist name
-
The fact that the artist is verified
-
The artist's monthly listeners
-
The artist pick
-
The song names
-
The song listen stats
-
The song lengths
-
The actual song content (this too is data)
-
The playlists on the left sidebar
-
Th...