Behind the Order button
You tap "Order" in a café's app. Two seconds later it says "Order 42 is being made".
Your phone did not make that number. It sent a message to a computer somewhere else. That computer worked out the answer and sent it back. That computer runs the backend.
By the end of this lesson
Note
I can say what a backend does with a request.
Key words
| Word | What it means | Example |
|---|---|---|
| Backend | the code on a server that answers requests | |
| Request | a message asking the server to do something | GET /menu |
| Response | the server's answer, with a status code and a body | |
| Route | a method and a path the backend knows | POST /orders |
| Handler | the function that runs for one route | |
| Status code | a number saying how the request went | 404 |
The cells students fill in are left blank in this preview.
A route picks the handler
Every request has a method and a path. GET means "give me". POST means "here is something new".
The backend keeps a list of routes. It finds the route that matches the request. Then it runs that route's handler, a function that does the work.
No match means status 404: not found.
Worked example: the café's routes
| Method | Path | Handler | What it does |
|---|---|---|---|
| GET | /menu | listMenu | Sends the whole menu |
| GET | /menu/scone | priceOf | Sends one item's price |
| POST | /orders | addOrder | Saves a new order |
| GET | /staff | none | Sends 404: no such route |
The cells students fill in are left blank in this preview.
Try it: send three requests
// A tiny backend for a café's online orders.
const menu = { latte: 320, scone: 275 };
function listMenu() {
return { status: 200, body: menu };
}
function priceOf(name) {
if (!(name in menu)) {
return { status: 404, body: { error: 'Not on the menu' } };
}
return { status: 200, body: { name: name, pence: menu[name] } };
}
function handle(request) {
if (request.method === 'GET' && request.path === '/menu') {
return listMenu();
}
if (request.method === 'GET' && request.path.startsWith('/menu/')) {
return priceOf(request.path.slice(6));
}
return { status: 404, body: { error: 'No such route' } };
}
console.log(handle({ method: 'GET', path: '/menu' }));
console.log(handle({ method: 'GET', path: '/menu/scone' }));
console.log(handle({ method: 'GET', path: '/menu/pizza' }));
A handler checks, uses data, and answers
Most handlers do the same three things.
First they check the request: is anything missing? If so, they answer 400, a bad request. Then they read or change data, often in a database. Last they send a response: a status code and a body, usually JSON.
A common mistake
Warning
Many people think the app on the phone decides the price and saves the order. The app only asks. The backend checks the request and owns the data, because anyone can change what an app sends.
Practise: add a route
const orders = [];
function addOrder(body) {
if (!body.item) {
return { status: 400, body: { error: 'Say what you want to order' } };
}
orders.push(body.item);
return { status: 201, body: { id: orders.length, item: body.item } };
}
function handle(request) {
if (request.method === 'POST' && request.path === '/orders') {
return addOrder(request.body);
}
// Add a route here: GET /orders returns status 200 and the orders list.
return { status: 404, body: { error: 'No such route' } };
}
console.log(handle({ method: 'POST', path: '/orders', body: { item: 'latte' } }));
console.log(handle({ method: 'POST', path: '/orders', body: {} }));
console.log(handle({ method: 'GET', path: '/orders' }));