Websites, apps, and where code runs

What a web page is made of

The response a browser receives in lesson 7-1 is mostly text in three languages, each with one job:

• HTML describes the content and structure, saying this is a heading, this is a paragraph, this is a button
• CSS describes the appearance, covering colors, sizes, and layout
• JavaScript is a full programming language, like Python, that runs inside the browser and makes the page interactive

So one product involves code running in two places. Code running on the user's device, meaning the browser rendering HTML and CSS and running JavaScript, is called the frontend. Code running on the server is called the backend, and it handles checking passwords, reading the database, and deciding what data to send back. A database is the server's organized, searchable store of saved data, holding accounts, posts, and orders. Backends are written in many languages, and Python is one of the most popular choices.

A "web app" like your email inbox is just a website whose frontend and backend do a lot. Most phone apps are the same picture, with a frontend on the device talking to the same kind of backend.

A pretend server deciding what to send

This is backend thinking in miniature: one request comes in, and the code decides what to answer.

request = "GET /home"
if request == "GET /home":
    print("200 OK: Welcome to the home page!")
else:
    print("404 Not Found")

Output

200 OK: Welcome to the home page!

A request of "GET /missing" would fail the condition and print 404 Not Found, which is the web's famous code for "no such page".

This is just lesson 4-2's if/else with strings that happen to look like web traffic. Real servers are the same idea with more branches, and the numbers are a convention: 200 means success and 404 means the resource does not exist.

Worth noticing that the 404 branch is not an error in the program. The server worked perfectly and its correct answer was "there is nothing here", which is why a 404 page is a page rather than a crash.

Where a Like count has to change

The change has to happen on the backend, so the server can send the new count to every client that asks.

If the change lived only in your browser, nobody else would ever see it. Your own screen would update and the post would look unchanged to everyone else.

The full round trip is: the frontend sends the server a request saying that a user liked post 42, the backend updates the stored count, and every future response carries the new number.

A short way to remember the split is that the frontend shows and the backend knows. Anything that must be true for all users lives on the server, because that is the only copy everyone shares.

Adding a second route

An elif adds a branch between the existing if and else.

request = "GET /about"
if request == "GET /home":
    print("200 OK: Welcome to the home page!")
elif request == "GET /about":
    print("200 OK: About us")
else:
    print("404 Not Found")

Output

200 OK: About us

Reading the pieces

• The new branch goes between the if and the else, because the else has no condition and must stay last. This is the flat chain from lesson 4-3.
• The condition compares request to the string "GET /about", exactly as the first branch compares against "GET /home".
• The else is now the catch-all for every path the server does not recognize, which is exactly the job a 404 does on a real site.
• Adding a page to a site is, at bottom, adding a branch like this one. Real frameworks arrange it differently so the chain does not grow to a thousand lines, but the decision being made is the same.