If you just go into web development, then you probably think you know how the web works – at least at a basic level.
. But then you try to explain how a basic website works and draw a blank. What does an IP address mean? How does the client-server model work?
Development frameworks are very powerful now. In fact, it’s so powerful that it’s easy for our newbies to forget the basics of the web.
I know I did it. There’s no shame in admitting that networks are complex, and it’s only when you start engineering on the back end that you realize how important these foundations are. (By all means, if you want to make truly effective web apps.)
So I wrote my own four-part field guide to the basics everyone should have, whether you’re engaged in a career in web development or just interested in learning:
Part 1: How does the Web work
Part 2: Web application structure
Part 3: HTTP and REST
Part 4: Code examples for client-server interaction
Basic Web search
Let’s start as before by typing “www.github.com” into the browser’s address bar and we’ll see the page start to load.
It may seem simple, but there’s a lot of magic behind the scenes. Let’s learn more.
Define the part of the network
Understanding the web is very troublesome because there are so many terms. Unfortunately, some terms are crucial to understanding the rest of this article.
If you want to know the secrets of the World Wide Web, here are the most important terms:
Client: An application that runs on a computer and connects to the Internet, such as Chrome or Firefox. Its primary role is to conduct user interaction and convert it into a request to another computer called a Web server. Although we typically access the web using a browser, you can think of the entire computer as a “client” of the client-server model. Each client computer has a unique address, called an IP address, that other computers can use to identify it.
Server: a machine with an IP address that is connected to the Internet. The server waits for and responds to requests from other machines, such as clients. Unlike your computer (that is, the client), the server also has an IP address and installs and runs special server software that determines how to respond to requests from the browser. The main function of a Web server is to store, process and deliver Web pages to clients. There are many types of servers, including Web servers, database servers, file servers, application servers, and so on. (In this article, we’re talking about Web servers.)
IP address: Internet protocol address. The numeric identifier of a device (computer, server, printer, router, etc.) on a TCP/IP network. Every computer on the Internet has an IP address that it uses to identify and communicate with other computers. The IP address has four groups of digits separated by decimal points (for example, 244.155.65.2). This is called a “logical address”. To locate devices on the network, TCP/IP software is used to convert logical IP addresses into physical addresses. This physical address, or MAC address, is built into your hardware. ISP: An Internet service provider. An ISP is a middleman between a client and a server. The typical ISP is usually a “cable company.” When your browser receives a request for www.github.com, it doesn’t know where to look for www.github.com, so the ISP’s job is to do a DNS lookup to ask for the IP address of the web site being looked up.
DNS: indicates the domain name system. A distributed database that tracks the domain names of computers and their corresponding IP addresses on the Internet. Don’t worry about how a “distributed database” works: just type www.github.com, not an IP address.
Domain name: Identifies one or more IP addresses. Users use domain names (for example, www.github.com) to access websites on the Internet. When you type a domain name into your browser, DNS uses it to look up the IP address of that given web site.
TCP/IP: Transmission control protocol/Internet protocol. The most widely used communication protocol. “Protocols” are standard rules. TCP/IP is used as the standard for transferring data over the network.
Port number: a 16-bit integer that identifies a particular port on the server and is always associated with an IP address. It can be used to identify specific processes on the server that can forward network requests.
Host: A computer connected to a network – it can be a client, server or any other type of device. Each host has a unique IP address. For sites such as www.google.com, the host can be a web server that serves the web pages of the site. The host and server concepts are often mixed, but they are two different things. A server is a host – they are a specific machine. On the other hand, a machine that provides a hosting service to maintain multiple Web servers can be called a host. In this sense, you can run a server from a host.
HTTP: Hypertext transfer protocol. The protocol used by Web browsers and Web servers to communicate over the Internet.
URL: Uniform resource locator. URL identifies a specific Web resource. A simple example is github.com/someone. URL specifies the protocol (” HTTPS “), hostname (github.com) and filename (someone’s profile page). Users can obtain the Web resources identified by the URL through HTTP from the network host whose domain name is github.com. (Is it mouth-twister?)
The journey from code to web page
Ok, now that we have the necessary definitions, let’s try Github’s search and see what happens from entering a URL in the address bar to getting a web page:
1) You enter the URL in your browser:
2) The browser parses the information contained in the URL. Includes protocol (” HTTPS “), domain name (” github.com “), and resource (“/”). In this case, no specific resource is indicated after “.com, “so the browser knows to retrieve the main (indexed) page
www.github.com
www.github.com
www.github.com
Technet.microsoft.com/en-us/libra…
4) Once the ISP receives the IP address of the target server, it sends it to your Web browser
- Your Web browser sends an HTTP request to the web server, requestingwww.github.comThe main page of
GET request from the client
7) The Web server receives the request and looks up the HTML page. If the page exists, the Web server prepares the response and sends it back to your browser. If the server cannot find the requested page, it will send an HTTP 404 error message, representing “Page not found.”
8) Your Web browser will receive the HTML page and then use it to parse from top to bottom to find other listed resources such as images, CSS files, JavaScript files, etc.
9) For each resource listed, the browser repeats the entire process, sending an HTTP request to the server.
10) After the browser has finished loading all the other resources listed in the HTML page, the page will finally load into the browser window and the connection will be closed
Crossing the Internet Abyss
One thing worth noting is how information is transmitted when you request it. When you make a request, the information is broken up into many small pieces called packets. Each packet is marked with a TCP header containing the source and destination port numbers, and an IP header containing the source and destination IP addresses as identifiers. Packets are then transmitted over Ethernet, WiFi, or cellular networks and are allowed to jump multiple times on any route until they reach their destination.
(We don’t actually care where packets get to — all that matters is that they get to their destination in one piece!) Once the packets arrive at their destination, they are regrouped.
So how do all the packets know how to get to their destination without getting lost?
The answer is TCP/IP.
TCP/IP is a two-part system that serves as the basic “control system” of the Internet. IP stands for Internet protocol; Its purpose is to send packets to other computers using the IP header (or IP address) on each packet. Transmission Control Protocol (TCP) is responsible for breaking messages or files into smaller packets, routing the packets to the correct application on the destination computer using TCP headers, and resending the packets if they are lost; Once at the other end, the packet is reassembled.
Draw the final picture
Wait! – The work is not done! Now, your browser has the resources that make up your web site (HTML, CSS, JavaScript, images, etc.) and must go through several steps to render the resources into a readable web page.
Your browser has a rendering engine that displays the content. The rendering engine receives the content of the resource in small chunks. An HTML parsing algorithm then tells the browser how to parse the resource.
The web is complicated, but you’ve just finished the puzzle so this is a simple web page. Lost? We all are, but if you’ve read this far, you’ve finished the puzzle. To show you the big picture, I’ve obviously skipped over some details; But if you can think around the basic sequence of events outlined above, filling in the details will be a piece of cake.
In the next article, Part 2, we’ll deal with the structure of a basic Web application here. 🙂
This article from freecodecamp:medium.freecodecamp.org/how-the-web…