Learn Web Architecture

The above diagram is a representation of a simple web architecture. Next we will walk you through each component, providing an introduction to each one that should give you a good mental model for thinking through web architecture going forward.

The web follows a client/server architecture in which the server hosts, delivers and manages most of the resources and services to be consumed by the client.

The main thing to understand in a web application, is that there are basically two programs running at the same time:

• The code that lives on the server and responds to HTTP requests.
• The code that lives in the browser and responds to user input.

Client Side

The browser is a program that understands HTML, CSS, and Javascript which can also make HTTP requests. It uses those HTTP request to communicate to the Web Server. Each time the user enters a url or clicks a link the browser fires a request to the server. The web server will respond with an HTML file that the browser is capable of understanding. The client side ONLY communicates with the server with requests, it has no access to the server's code.

DNS

DNS stands for “Domain Name System” and it’s a backbone technology that makes the world wide web possible. At the most basic level, DNS provides a key/value lookup from a domain name (e.g., google.com) to an IP address (e.g., 85.129.83.120), which is required in order for your computer to route a request to the appropriate server. Analogizing to phone numbers, the difference between a domain name and IP address is the difference between “call John Doe” and “call 201-867–5309.” Just like you needed a phone book to look up John's number in the old days, you need DNS to look up the IP address for a domain. So you can think of DNS as the phone book for the internet.

Web Application Server

On the hardware side, a web server is a computer that stores web server software and a website's component files (e.g. HTML documents, images, CSS stylesheets, and JavaScript files). It is connected to the Internet and supports physical data interchange with other devices connected to the web. On the software side, a web server executes the core business logic that handles a user's request and sends back HTML to the user's browser.

Database Server

Every modern web application leverages one or more databases to store information. Databases provide ways of defining your data structures, inserting new data, finding existing data, updating or deleting existing data, performing computations across the data, and more.