# Frontend and backend

> The part of an app you see and touch, and the part that works behind it.

- Level: Basic
- Topics: Software
- URL: https://tidbit.legios.com.ar/frontend-and-backend/
- In Spanish: [Frontend y backend](https://tidbit.legios.com.ar/es/frontend-and-backend/)

Almost every app is split in two. The **frontend** is what runs on your device: the screens, buttons and forms of a website or mobile app. The **backend** runs on a server somewhere else: it checks your password, reads and writes the database, charges the card and sends the data the frontend displays. The two talk through an API, usually over HTTPS.

Frontends are built with HTML, CSS and JavaScript in the browser (often with a framework like React), or with Swift and Kotlin on phones. Backends are written in Python, Java, Go, Node.js and many others, and run on a cloud machine, in a container or as a serverless function. When you tap "buy", the frontend sends a request; the backend validates it, updates stock and orders, and replies "done"; the frontend shows the confirmation.

The split matters because each side has different problems. The frontend worries about screen sizes, speed on old phones and accessibility; the backend about security, data integrity and handling thousands of users at once. Anything that must be trusted (prices, permissions) lives in the backend, because anything in the frontend can be read and modified by the user. A "full-stack" developer works on both.

## An analogy

A restaurant. The dining room, the menu and the waiters are the frontend; the kitchen, the pantry and the cash register are the backend. You only ever see the dining room, but the kitchen decides what can actually be served.

## Keep in mind

- Frontend: runs on the user's device, built with HTML, CSS, JavaScript or native mobile code.
- Backend: runs on servers, owns the data and the business rules.
- They communicate through APIs, and the backend never trusts the frontend blindly.
- "Full stack" means working on both sides.

## Go deeper

- [How the web works (MDN)](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works)
- [Frontend and backend (Wikipedia)](https://en.wikipedia.org/wiki/Frontend_and_backend)

## Related terms

- [Server](https://tidbit.legios.com.ar/server/): A computer whose job is to answer requests from other computers, all day, every day.
- [Database](https://tidbit.legios.com.ar/database/): An organized store of data that programs can search and update safely.
- [API](https://tidbit.legios.com.ar/api/): The menu of things one program lets another program ask for.
- [HTTPS](https://tidbit.legios.com.ar/https/): The padlock in your browser: web traffic nobody in between can read.
- [HTML](https://tidbit.legios.com.ar/html/): The text format that describes what is on a web page: headings, paragraphs, links.
- [CSS](https://tidbit.legios.com.ar/css/): The language that decides how a web page looks: colors, fonts, spacing, layout.
- [JavaScript](https://tidbit.legios.com.ar/javascript/): The programming language that runs inside web pages and makes them interactive.
- [Web browser](https://tidbit.legios.com.ar/web-browser/): The app that fetches web pages from the internet and draws them on your screen.