How web apps work
A web app is split in two. The front end (HTML, CSS and JavaScript) runs in your browser; the back end runs on servers. Follow one shop page as it loads three static files, then asks for your orders: the request goes to the web server, on to the app server, whose Python code reads the database and sends JSON back, and the page updates itself without reloading.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01Which of these runs in the browser, on the visitor's own device?
HTML, CSS and JavaScript are the front end: the browser downloads them and runs them on your device. The other three are the back end, on servers.
02What makes a page static?
A static file is read from disk and sent as stored. A dynamic answer is built by code for each request, so it can differ from user to user.
03In the figure, what does the app server's code do after the request for /api/orders arrives?
The Python function runs SELECT item, qty FROM orders, gets three rows and returns {"orders": rows}, which Flask sends as a JSON response.
04What is special about a single-page app?
fetch() gets JSON in the background and the page's JavaScript writes it into the page. Only that part changes; nothing reloads.
05Where should the database password live?
Everything the browser downloads can be read and changed by the visitor. Secrets and the checks that matter stay on the server.
Glossary
- Front end
- The part of a web app that runs in the browser: HTML for structure, CSS for looks and JavaScript for behaviour.
- Back end
- The part that runs on servers: the code that handles requests and the database that keeps the data.
- Web server
- A program that answers HTTP requests. It sends static files as stored and passes other requests on to the app.
- App server
- A program that runs the back-end code for each request, such as a Python function, and builds the answer.
- Database
- A program that keeps data safely on disk and finds exactly the rows you ask for, usually with SQL.
- Static vs dynamic
- Static: a stored file, the same for everyone. Dynamic: an answer built by code for this request.
- JSON
- JavaScript Object Notation: data written as plain text, such as {"orders":[["tea",2]]}, that any language can read.
- Single-page app
- A web app whose JavaScript fetches data and updates the page in place instead of loading new pages.
Notes and sources
- The web server, app server and database are drawn as three machines. In practice they are three programs (for example NGINX, a Python app run by a server such as Gunicorn, and PostgreSQL) that may share one computer or be spread over many.
- Each HTTP request and response is shown as one envelope. Underneath, they travel over a TCP connection (or QUIC with HTTP/3), usually encrypted with HTTPS; the HTTP and HTTPS lessons in the Networking course show how.
- The back-end card is real Flask (Python): @app.get registers the function for GET /api/orders, and a returned dict becomes a JSON response. db is a sqlite3 connection and SQL holds the query; showOrders on the front-end card is a function the app defines.
- Static and dynamic can mix: many sites build HTML on the server for each request (server-side rendering), and single-page apps still load their own HTML, CSS and JavaScript as static files first.
- Caffeinated Coder Lab: HTTP (Networking course)
- MDN: Client-Server overview (static and dynamic sites)
- MDN: What is JavaScript?
- MDN: Using the Fetch API
- WHATWG Fetch Standard (fetch() sends Accept: */* by default)
- MDN: Response.json()
- MDN Glossary: SPA (single-page application)
- RFC 9110: HTTP Semantics
- RFC 8259: The JSON Data Interchange Format
- Flask Quickstart (routing, APIs with JSON)
- Python docs: sqlite3
- NGINX: Serving static content
- NGINX: Reverse proxy
- MDN: Client-side form validation (not a security measure)
Quiz Unlocks after the last step.