I’m sure most programmers started their programming careers with Hello World, and I was thrilled to see that phrase on the console, as if my code had taken me to another World.

After saying hello to the “new world”, I kept learning order, branches, loops, and watching the console loop display the words I had defined. I thought the “world” was in my hands!

Then I learned arrays, methods, object-oriented, collections, I/O, multithreading, network programming, database… I am a little confused, I do not know what these knowledge can do, so according to the Internet to do a few XX management system.

Just when I have a sense of accomplishment, someone else’s “You this black frame so ugly who will use ah?” It took all my confidence out of me. Yeah, I made these gadgets that I wouldn’t even consider using myself, so I don’t expect anyone else to.

So I started thinking about how to make programs that people want to use, and I realized that there are so many different ways to program: desktop, mobile, games, the Web, and so on, and each one is worth exploring. At that time, I thought it was cool that a website could be easily accessed and used by people all over the world. It happened that my Java was very suitable for Web development, so I focused on Web development.

To learn the Web, I had to navigate the Web’s three main players: HTML, CSS, and JavaScript, and through them I finally got rid of the black console! However, joy is short, learn for a long time “three Musketeers” I make the web page is very ugly, and other sites such as clouds and mud. And I made the web page is some elements assembled there, just through some operation transformation of some elements, without any actual function (such as shopping, watching movies, search and so on)!

I was lost in endless confusion. I felt that I had learned a lot of things and knowledge, but I had no idea how to make a product with these things, a product that made people want to use and had practical functions. The pieces of information in your mind are like isolated parts, which cannot be assembled into a machine.

My little head was full of big questions:

What is the use of each technology in Java and how does it relate to the web?

Why did you ask me to learn “Web three Musketeers” in the middle of saying that Java is suitable for Web development?

How do those web pages with actual functions come about?

Why can I only see my website locally, and how can I make it available to the whole world?

…

At that time, so much confusion almost made me give up programming, which was not all because there was a certain threshold for technology to get started, but more because there was something wrong with my learning way. Instead of sorting out and planning what I was going to learn, I plunged into the darkness of unfamiliar territory and naturally hit a wall. So let’s take a quick look at Web development before we go into the actual code, so that we can learn the technology with more focus and more results.

How does the world see our web pages

The birth of the Internet allowed computers to connect with each other, and although it started as simple things like sending emails, it took us from isolated islands to the world. At that time, the expression of our data is also very simple, text, pictures, video each plays its own role, to use these data must open the corresponding software, such as the most commonly used TXT text format needs to be opened with notepad. With the development of The Times, people are not satisfied with such monotonous data interaction, the hypertext markup language HTML came into being.

Why is it called “hypertext”? HTML shows more than just words. It can also show links, images, videos, tables, and more:

<a href="xx.html"></a>Represents the link;<img src="xx.jpg" alt="">Represents the picture;<video src="xx.mp4"></video>Represents video;<table></table>Represents the table; ...Copy the code

The groups of Angle brackets above are HTML tags, or elements. These elements require special software to render the corresponding data correctly, otherwise they are no different from text, and this HTML rendering software is often referred to as a browser.

To render the HTML into a web page, enter the correct path in your browser, which can be a local file path or a web address. Enter the local path is to open the HTML file of your computer directly and then render, enter the URL is to get the HTML content from other computers and then render. The machine that sends us the HTML we call the Web server.

As shown above, there are two processes from entering the url to rendering the page:

  1. From the browser to the server, this process is called a Request;

  2. From the server to the browser, this process is called Response;

Although they seem simple enough, there are countless details behind both processes. There are two problems facing us:

  1. It’s just a bunch of urls. How did it get to the server?

  2. What does the server do to transfer HTML to the browser?

Let’s use these two questions as a starting point to analyze the whole process in more depth.

request

The URL and HTTP

You’ve all seen websites, like http://www.rudecrab.com. A more accurate description of this string of text is a URL (uniform resource Locator) than a “web address.” Why? Because this string of text needs to be unique around the world in order to function as a location resource, be it an HTML page, an image, or something else. The guarantee that urls are unique is an important prerequisite for the Web world, as is the case with mobile phone numbers and ID cards.

The URL consists of two parts, the protocol and the content. To know that the browser does not only render the web page this function, different protocols represent different functions, browsers according to the protocol to carry out the corresponding operation!

HyperText Transfer Protocol (HTTP) is a standard used to establish connections between browsers and Web servers to Transfer data. In addition to HTTP, there are many other protocols, such as File, which is used to open local files. When you open a local web page with a browser, you can see File :// before the File path; FTP is used for uploading/downloading files, etc.

Protocols are used to determine functionality, and content is used to locate specific resources! www.rudecrab.com I believe you are familiar with, this is often called the domain name, it is used to locate the specific server. Specific how to locate, is that we are going to explain the DNS technology.

IP and DNS

A server is a computer connected to the Internet. All devices on the network are assigned an address to identify them. This address is an IP address. With the IP address, we can determine the sender and receiver of the communication, so that the two devices can communicate with each other.

Internet communication all depends on IP address to locate, but this brings us to use difficulty, browsing the web and remember so many numbers it is too troublesome, so the domain name technology was born. We can browse the web by typing in a Domain Name, but before sending an ACTUAL HTTP request we need to resolve the Domain Name into an IP address, which is done by the Domain Name System (DNS).

If the IP address is compared to a telephone number, then the domain name is a contact note, and DNS is a address book! When you enter a domain name, the browser sends a domain name resolution request to the DNS server. After the resolution, the DNS server returns the Web server IP address corresponding to the domain name to the browser. After the browser knows the IP, it sends the actual HTTP request. The browser does all the work for us behind the scenes:

Some people may ask, the DNS server also depends on the IP address, how does the browser know the IP address of the DNS server? This is because the IP address of the DNS server has been recorded in the network configuration of the operating system. You can directly send requests to the DNS server through the IP address. Different operating systems use different methods to query the DNS address of the host. If you are interested, you can check the DNS address by yourself.

One might also ask why there should be a domain name resolution process, and why not use a domain name instead of an IP address. This is because the length of IP address is fixed, but the length of domain name is not fixed, the use of IP address only need to process 4 bytes of data, while the use of domain name may need to process dozens or hundreds of bytes of data, in order to consider the efficiency of the USE of IP network addressing location.

The response

Now that we know how the browser connects to the Web server when we type in the URL, we need to figure out how the server returns the HTML to the browser!

Software and Ports

A server is just a computer and a piece of hardware. After receiving the network request, the operating system and program software should handle it eventually. The hardware and operating systems are too low-level, so when we talk about handling network requests, we tend to talk about software programs. Such programs that provide a variety of services are called application servers.

An additional point to note here is that the term server, application server, or Web server is often the same concept and can refer to either hardware or software. Most of the time we don’t need to distinguish between the semantics of hardware and software, as we often say “I’m browsing the web on my phone”, and it doesn’t matter whether the semantics of the phone are hardware or browser software. We can extract the meaning of the noun naturally from the context, so there is no need to tangle with the words, and I will describe where it is necessary to distinguish semantics.

There are many kinds of application servers, besides Web server, there are FTP server, mail server, database server, etc. Multiple server software can be installed on a computer to provide services at the same time. If no software is installed, there will be no corresponding functions. The IP address is located to the hardware, so how does the server determine which service to provide when it receives a request? This is where ports come in.

An IP address is like a bank, and a port is like a window inside the bank, with different Windows providing different services. The port number ranges from 0 to 65535. Each service software has its own port number. For example, the default port number for the Web server is 80, and the default port number for the FTP server is 21. When we enter the URL to initiate an HTTP request, if the port of our Web server is not changed, the default port 80 can be omitted. If the port is changed, we need to specify the port to successfully initiate the request: www.rudecrab.com:8080.

Static and dynamic web pages

Now that we know that the HTTP request is handled by the Web server program, this processing logic is implemented by our code! Everyone said that Java is suitable for Web development, that is, the use of Java development server program! There are many other languages that can be used to develop server programs, such as PHP, Python, Go, and so on, all of which can be collectively referred to as back-end languages. The back end is the server, the server; The front-end, of course, is the browser, the client, and JavaScript is the front-end language. Web development continues to subdivide into two directions: front-end development and back-end development.

The most basic function of a Web server is to parse HTTP requests and return HTML to the front end. The server generally stores multiple files, and the server must return the correct files according to the request.

If you enter the domain name rudecrab.com without a directory or file, the system returns the index.html file in the root directory by default.

The received request data is input and the returned response data is output, so any programming language with I/O can do this logic. We can certainly through the language of the native API to achieve the Web server, but it is too cumbersome to build from zero, the industry has many mature server procedures for our direct use, such as: Tomcat, Apache, Nginx, and so on. We just need to install these programs, and we’re ready to handle HTTP requests and return files!

Here is the answer to the initial question: How do we let the world see our web page? The first step is to buy a server. This server does not mean that it will mail you a host, but that the server manufacturer will connect the device to the network for you to control and use. Then we installed the Web server program on the server, and then we prepared a good HTML file uploaded to the server, others can access our Web pages through IP! If we want to let others access the domain name, we have to buy a domain name, the domain name vendor will provide DNS service, we just need to map the domain name to the server IP.

What good is the back-end language we learned when we have a ready-made Web server to install and use? In fact, those Web servers just help us do a good job of basic services, specific business logic or we need to write! Each system has its own service characteristics. For example, when a user enters an account password and sends it to the server, different systems will do different service processing. For example, each of our systems has different data, this data exists in the database also need our server procedures to deal with!

And there are a lot of websites, the same URL, different users see the content is not the same, and the content will be updated, the content dynamic change logic is also need us to write code to control! This kind of web page content will change dynamically according to different situations of the web page is called dynamic web page, on the contrary, those content will not change dynamically of the web page is called static web page. When I first heard the word dynamic web page, I thought that as long as there is a GIF on the web page is a dynamic web page, we do not enter this misunderstanding, like the GIF, element animation these are only “dynamic effects”, and we have no relationship to the dynamic web page.

A static web page, as we’ve illustrated before, uploads a written HTML file to a server, which returns the file directly to the client. Unless we modify or re-upload the HTML file, the contents remain unchanged.

Dynamic web page, is the server to receive the request after the implementation of the code logic, dynamic production of an HTML file and then returned to the client.

Server-side rendering and client-side rendering

Earlier we said that Web development is divided into two directions: front-end development and back-end development. The front end is responsible for those beautiful HTML pages and gorgeous interaction effects, and the specific business logic processing is handed over to the back end. Some people may ask, dynamic pages are generated on the server side through back-end code, don’t see the shadow of front-end development?

In fact, the front-end and back-end development tasks were not specifically separated at the beginning, and the same developer wrote page effects as well as business logic. With the business requirements and page requirements are more and more high, a variety of tasks based on a real at once, so slowly evolved into a page effect by the front-end developer to write, back-end personnel only through the code in HTML filling content! The before and after the separation is only development task split, the final HTML page or in the back-end generates and returns, that is to say, a Web server to perform business code to generate a page, the pressure is too large for the server, and the business logic and the HTML page is mixed in a after all, is not convenient to manage and maintain. To solve this problem, the task of dynamically generating HTML pages began to be taken away from the server side and replaced with client-side rendering, the now popular development model of front to back separation!

Server-side rendering is when the server generates a complete HTML page and returns it to the client, who only needs to parse the HTML.

Client-side rendering is when the server returns a static HTML page that contains some simple elements, and the client populates the content with JavaScript.

In the separation mode, front-end developers only need to focus on interaction effects and back-end developers only need to focus on business logic, which makes development efficiency very high. We also have to confirm their own direction in learning, front-end and back-end have a very large system we need to study, of course, enough ability to take both into account, that is, full stack development!

No matter which direction to choose can not see the wood for the trees, as back-end developers also need to understand some front-end knowledge, if you know nothing about the front end that you can not understand the interaction logic, data reversal, and how to write business logic, this is why we learn Java to learn the front end.

summary

After some sorting, I believe we have a general context of the Web, which is convenient for us to clarify our own learning direction when learning. Of course, this is just a brief overview, leaving out many details, such as TCP/IP protocol, HTTP packets, CDN, and so on. But at the beginning just need to understand a general outline can, otherwise easy to fall into the details of the storm can not come out!

I’ll fill in more details later on, as we move from standalone applications to distributed microservices.

Blog, Github, wechat official account, please identify: RudeCrab, welcome to follow! If it is helpful to you, you can collect, like, star, look at, share ~~ your support, is the biggest power of my writing

Wechat reprint please contact the public number to open the white list, other places reprint please indicate the original address, the original author!