Frontend

  • Industry term
3 steps

The frontend is the part of an app that runs in the visitor's browser or on their device, including the screens, buttons, and forms they see and code that responds when they click or type.

Opening an app downloads its frontend code, so a tap or a keystroke can get a response at once, with no trip to a server. The download also hands that code to the visitor, who can read every line and change how it runs.

Where you’ll meet it

Your coding agent builds a shared grocery list app for your household. On your phone it looks finished: you add milk and it appears. Your partner opens the same link on their phone, and the list is empty.

What to do

The list is probably saved only in your phone's browser. Ask the agent where items are stored. If it's the browser, have it save them in a database on a server so every phone loads the same list. Then add an item on one phone and refresh the other.

Easy to mix up

When do visitors get your changes to it?
FrontendBackend
When their browser loads the new code, often on their next visitAs soon as the server runs the new version

Check yourself

Your app hides its Delete button from everyone but admins, and nothing else checks who is asking. Can a visitor who isn't an admin still delete posts?

Go deeperThe same code can run on the server, then in the browser

Modern frameworks blur the line. A page may be rendered on the server, sent as finished HTML, and then taken over by code in the browser, a step called “hydration.” The same component file can run in both places, so frontend describes where code is running at a given moment more than which file holds it.

Build tools copy some settings into browser code on purpose. In many frameworks, a setting whose name starts with a public prefix, such as NEXT_PUBLIC_ or VITE_, is written into the files every visitor downloads, so a secret key stored under such a name is public.

Practice Build Basics

Or take the learning quiz on a mix of every set