Get the front end of the web by telling stories

This article is about 6,000 words and takes about 10 minutes to read.

Written in the book of the former

Some people say that the network foundation of front-end engineers is very weak, that many are non-computer, low threshold, in fact, can not be generalized. But since they make fun of us, we should improve ourselves.

Without rules, nothing can be accomplished

Front end engineers know this very well, but it could be that the front end is changing too damn fast. But change so fast, always need to settle down some rules, or else can not pass.

Where are the settled rules?

There are a lot of rules, such as: AMD, CMD, Promise, etc., can be seen as a rule, below unified called standard.

There is a saying that goes like this:

You can build libraries, but don’t set standards.

In other words, if not enough people agree on it, then the standard you create is of little use.

So, for a moment, let’s take a philosophical look at this:

If there were no standards, the world would be very disorderly and chaotic. It is because of standards that the world becomes orderly and orderly.

We can derive this by analogy with data induction:

We summed up the world’s network, the Internet, and came to the conclusion that if the world’s network did not agree on standards, it would also become extremely chaotic.

So, when we learn the basics of the Internet, we are learning the standards of the Internet today. Once we learn the standard, we can follow it and do whatever we want to implement. In fact, you will find that a lot of things are the same truth.

Now, we should know how to improve our network base.

We’re going to learn about Internet standards, what they are, why they’re designed this way, what are the benefits of doing it this way, and what are the programming ideas behind doing it this way.

Programming ideas can sometimes give us a lot of different feelings.

Why there are MVP, MVVM, MVX design patterns. That’s because good programmers learn the classic design ideas of MVC, get inspired, and then take a classic design idea and expand it into a lot of better design ideas. Therefore, this is also the purpose for us to learn something, and it is also a learning mode that enables us to form a self-driven. Only in this way can we make continuous progress.

Well, no nonsense, then I began to my personal learning and insights, to elaborate on the network foundation.

PS: The Promise had a community standard of PromiseA/B/C/ etc, but chose PromiseA+ as the official standard.

`Internet`Is no mystery

The Internet really isn’t a mystery, but listen to me:

Want to get online, above all you must have network equipment, it is to want you to buy not necessarily here, the likelihood is others had offered to you, for instance operator pulled line sub came over, you need not buy line sub ya (manual is funny), still have host, switch, router, these basically formed the network equipment of Internet.

Maybe some people don’t understand what every device does, but there are some things that, when you don’t understand, try to understand by substitution. For example, you may not understand switches and routers, but if you do not understand them, it will cause obstacles to the subsequent understanding. So what should you do?

We can think of hardware devices as software

After all, there is code inside the hardware, of course, there is no code, such as line, hub, but we can think of an empty function written inside ah, so that you can understand the hardware from the software level.

That’s a little cuter:

We can think of the hardware that performs a particular function as a functional module in software, with input and output parameters.

Again image point, can be understood as middleware

The data is transferred from one middleware to another, and the corresponding processing is done in each middleware, such as encapsulation, validation, and finally the data is displayed in your eyes.

If this is to understand, is not the feeling of the imagination of the esoteric it.

In fact, our purpose is to:

Visualize abstracted and abstracted knowledge into something we can understand.

So it’s kind of like we’ve got our lovely brain doing a Babel translation, which is really interesting, and it’s a technique for quickly understanding something esoteric. Knowledge can not be learned dead, all changes are inseparable from its root, many places are the same idea, learn to master is a very important ability.

The association caused by a classic question

Can you talk about three handshakes, four waves?

I believe that many people will be asked, this is in the investigation of network knowledge, basic little question, also shows that the knowledge reflected in this question is the foundation, is in the investigation of your network foundation.

Now when we look at this problem again, we can try to go back a little bit. For example, think about why there is this process, why it is done this way, if I shake hands twice, if I don’t do the fourth wave?

Here’s an article that I think is pretty good:

Follow the animation to learn the TCP three-way handshake and four-way wave

I will not answer the answer about three handshakes and four waves, the above article has been introduced more clearly. If you have any questions, please scan my wechat QR code at the end of this article, and we will exchange a wave of private chat (funny face).

The story of data and electricity

Here’s a story I made up:

Transmission of data from one host [Beijing] to another host [Nanjing] is a complex process, unlike power transmission, all in one go, of course, power transmission is also a high knowledge, such as high voltage power transmission.

But data is a lot more complicated than electricity.

For example, electricity is central air conditioning. Whoever pays for it, I will go to whoever. Everyone is the same. Basic won’t exist resemble: you this home appliance is very lovely, the electricity of your home is more handsome than the electricity of my home of these circumstances 😂. Through this little chestnut, I mainly want to show that electricity has no privacy, does not have the possibility to let the user lose anything. Tonight the voltage is low, put up with it, get a bigger transformer tomorrow, and by night it will be normal, and the user won’t say anything.

In contrast, data is not the same, data is a kind of private nature of information, since there is privacy, it must ensure security and integrity, and not sometimes safe, sometimes not safe, sometimes complete, sometimes not complete, so it greatly improves the complexity of transmission.

An association evoked by a picture

Here’s a picture:

First, this diagram shows the current hierarchy of the entire Internet. And I’m not going to explain why that’s the case, because that’s the standard, that’s the consensus. But I want to talk about a couple of things.

The first situation: you must have seen this picture more than once, but many people will still be asked in the interview, temporarily forget, the reason for this situation, basically did not understand, or did not carry on the visual memory. For example, a bloody fact, is the English words back so many, or soon forget. So now, when we look at this graph, how do we make sure we don’t get asked the same question the next time?

That’s the mnemonics, the association, the story involved, the story of the kind. OK, so now, what do we associate with this picture? This is a question, so follow me to start associating.

The first Angle

From the front-end point of view, the OSI seven-layer model to TCP/IP four-layer model conversion process, is obviously done encapsulation.

From the perspective of middleware, we can think of each of these seven layers or four layers as middleware. Data flows between the middleware, so each time it passes through the middleware, it means a data processing. Each middleware performs a specific function. The fourth layer of TCP/IP is a seven-layer model wrapped up to simplify the philosophy of complexity. Combining repeatable layers in the same layer helps ensure that each layer is functionally independent and belongs to a higher level of abstraction. The details are hidden, while the functional differences between the hierarchies are more obvious.

Second Angle

If you think about it in terms of NPM packages, you’ll see that in a TCP/IP hierarchy, the higher levels depend on the lower levels. Just like NPM packages, if you install PACKAGE A, you will automatically install package B, which will depend on package C. That is, if you want to install package A successfully, then package B and package C must be involved. OK, so the data flow initiated by my application layer must depend on the transport layer, the network layer, and the interface layer. So some front-end engineers only know that when they make ajax or FETCH requests, they go through HTTP. For TCP, IP, and interface layer. I’m not sure. So, seeing this, I think you should have a good understanding of how the data requests you initiate flow through the network.

HTTP/TCP/IP connection

What is the connection between the three? Here I give you an example. Although it is not accurate, it is vivid enough.

The IP address is based on the host. You can find your city based on the IP address.

TCP is based on the host port. Through TCP, you can find your community in your city.

HTTP, which is based on the user process, can find the room number of your neighborhood in your city through HTTP.

Through the above metaphor, do you find it very easy to understand? This is the charm of storytelling, ha ha ha. This example also shows that if you want to find the room number, you must first find the city, then the neighborhood, and finally the room number. So if you want to send HTTP successfully, it has to be TCP, IP has to be successful in order for you to send HTTP successfully.

Note: The HTTP/TCP/IP connection example is very inaccurate and I apologize.

I’ve had conversations with big wigs:

The above picture has given the correct explanation, the main reason is that I forced a wave of the story, resulting in a bit of the cart before the horse, but also easy to mislead the partners, apology 😂.

IP

The IP layer is the network layer and defines the addressing mode between different hosts. A simple way to understand this is to find the corresponding host by IP address.

TCP/UDP

The transport layer is a very important layer. It connects the preceding layer with the following layer, provides communication services for the application layer upward, and encapsulates the information of the application layer into network information downward.

The transport layer connects processes between hosts and distinguishes network communication between different processes on the same host through ports. Therefore, the transport layer provides port-to-port services for hosts.

What is the process, by the way

When an application is called into memory to run, it can be called a process.

The port does not belong to any application

After an application binds to a port through a system call, it determines that the port serves the process, and that data and other things are transferred to the process through the port. Because the port does not belong to any application, it is only at the time of binding that the process is determined to serve.

How the transport layer interacts with ports

The data sent by the transport layer to the port is received by the corresponding process, and the data sent by the corresponding process to the transport layer is sent from the port. The port here is the transport layer addressing mode.

Ports are a software-level concept

A port is a positive integer represented by a 16-bit binary number, meaning that a host theoretically has up to 65535 transport layer channels. But there are usually fewer than 65535. For example, port 80, port 21, port 8080, etc., are the default port numbers through which specific communication is performed.

HTTP

HTTP is an application-layer protocol built on top of TCP/IP, while HTTPS adds SSL/TLS to HTTP.

To introduce you, HTTP is short for HyperText Transfer Protocol. It is the most important Web application layer standard on the Internet. HTTP can transfer data in any format.

What can we learn from HTTP as front end engineers?

Let’s say a thing, for example, the interview often ask you, after entering a URL, what will happen, in fact, if you understand more deeply, you can draw a picture to tell him, of course, the phone can only dictate.

First you click on oneurl“Is initiated oncehttprequest
httpRequests are bound to depend ontcp ，ipAnd so on. That means you have to do ittcpEven,IPThe query.
If you have aurlIf it’s a domain name, you have to resolve the domain name, which isdnsOperation. Make it into aipAddress. This process must be done at the application layer, because if it’s not done at the application layer, thenTCPYou can’t get the layersIPAddress,IPYou don’t get the address data. So that’s all we know from the derivationdnsThis is done at the application layer.
After data is normally transmitted to the interface layer, it must be transmitted to the corresponding interface layerIPPort corresponding to the address of the server. That isTCPTo build.TCPTo build a connection,HTTPIn order to transmit. Because it’s a dependency, the receiver’sHTTPNeed fromTCPThat gets the data. ifTCPThe company failed, soHTTPIt is impossible to build a successful alliance.
If all works, then transmit the data.
Transfer out,TCPThe connection is closed. The page has new data in front of the user

So you’re thinking, well, what about caches, and I’m not thinking about caches here, but caches are everywhere tonight, so you can fill that in.

Here’s a cool graph that shows what the whole process looks like when you enter a URL. As shown below:

HTTP is a standard, it has its own form, and if you look at HTTP, you can probably imagine what TCP is like.

The data structure of network request is controlled by the front end, such as request method, request URL, request parameters and so on. The data structure of the response should be controlled by the server, which gives us the necessary return information, such as status code, data, cache control, etc.

The HTTP status code

Status codes are very important in Web programming.

What is the purpose of setting a status code?

The purpose is to let developers and users know if the server handled the request properly or if there was an error. Understanding the purpose is very necessary for us to understand why the status code is divided in this way, at least the heart is not so strange.

In the status code, there is one series that is very important, and that is the 3XX series.

`301` ，`302`The difference between

302 Temporary redirect

Temporary redirects, which realize that when the server is down, the client initiates a URL request that is not successful. It also needs to make a request to the server to redirect to the destination url, that is, return to location, and then go to the destination url.

PS: Think about it, why is there 302?

301 permanent redirect

Permanent redirection means that even if the server is closed, the browser can send a URL request directly to the target URL without passing through the server. Unless the cache is cleared, subsequent accesses are directed to another address.

HTTP request methods

HTTP is like an object parameter that contains Method, the HTTP request Method, that tells the server what the client is visiting your URL for, whether to get information, upload data, or delete information. The most common ones are GET and POST. GET and POST OPTIONS:

OPTIONS provides a way for the client to query the available access methods in the URL address.

PS: I leave you to think, what is the usage scenario of this OPTIONS?

`POST` 和 `PUT`The difference between:

POST: Indicates POST data. The server must ensure that the data is completely saved and does not allow repeated POST data submission. Data is usually submitted through forms in HTML.

PUT: Allows the client to submit duplicate data. When the client submits duplicate data, the new data overwrites the existing data on the server.

PS: One of the books I’ve read is Illustrated HTTP, which is well written, illustrated and easy to read.

How does HTTP go on the server side

Take a look at the diagram I drew below, which shows the relationship between the server-side application, the Web server, and the client:

The figure above is the mainstream mode. The Web server only acts as a bridge, decoding the HTTP request of the browser into an interface call that can be recognized by the server-side program. Then the server-side program will encapsulate the generated return into an HTTP Response and return it to the user.

Note 1:

On the server side, the request sent by the user, if it is to obtain static resources, generally does not go through the server side program, directly through the server side caching mechanism, return resources to the user, such as Nginx static resource cache. Do not go to the server program, will greatly improve the response speed.

Note 2:

Generally, the server is on the Intranet of the company, which is inaccessible to the external network, and initiates HTTP requests. In fact, in most cases, Nginx performs reverse proxy first, and is also responsible for traffic forwarding, forwarding different requests to specific servers on the Intranet.

Socket

Socket in Chinese refers to the consciousness of hole or Socket, as the name implies, plug in, you can communicate. Socket started as a process communication mechanism for BSD UNIX, and then gradually became a network programming standard that mainstream operating systems followed.

`Socket`What is the

A Socket is a handle of a communication chain. It can be used to communicate between different VMS or computers or between different processes on the same host.

`Socket`The composition of the

Socket = IPAddress + port + protocol

An IP address, port, and protocol uniquely identifies a communication link.

As you can see, sockets are actually highly encapsulated TCP/IP, shielding many network details. This allows developers to better network programming. The idea is that we write a function that encapsulates the details of the function, passing in parameters to perform the specified behavior.

It can be said that all TCP/UDP programming is basically programmed according to the Socket protocol standard. In other words, Socket is a set of standards, just like DOM. All languages can realize their own logic according to the DOM interface standard.

Socket has its own primitives, developers can implement network programming according to the Socket primitives in different languages.

Talk about the WebSocket

What is a WebSocket?

This is a new standard protocol defined by HTML5, which implements full duplex communication between browser and server. We can think of WebSocket as Web + Socket, which is a kind of duplex communication.

What is duplex communication?

At the same time, I can act as both sender and receiver of communication.

Why does it happen?`WebSocket`

Before Websockets came out, front-end Web communication relied on HTTP, but HTTP (1 or 2) requests themselves had some drawbacks, such as:

Header information is redundant. Each request is sent with a large amount of redundant information.
Duplex communication cannot be implemented.

So in this technical background, WebSocket technology appeared to make up for the defects of HTTP. However, we could not do without HTTP, because there are too many scenarios already used, so we combined the WebSocket protocol to be on top of HTTP. This will allow for a smooth transition to the new communication protocol.

`WebSocket`The communication principle of

Websockets are built over HTTP, which means you need to go through HTTP once to set up a WebSocket, and then your WebSocket has established a long connection. Then, as long as the disconnect is not active, the connection between the client and the server will remain intact and not be disconnected. When data is transferred, the system directly transfers the data and does not initiate HTTP requests.

Front-end use WebSocket is very simple, so a few API, you can go to view. But we need to know what’s going on in each API, and we can’t really understand WebSockets until we understand the truth behind it.

WebSocket advantages

Support push function, the server can push data to the client.
Reducing traffic, for one thingWebSocketOn the other hand, it does not need to be done frequentlyHTTPYes, you can make persistent connections.

Here is a recommended article, written quite good, can have a look:

How does WebSocket work? Why can persistent connection be implemented?

C/S and B/S architecture

For front-end engineers, it is important to understand the evolution of Web architectures. When it comes to evolution, WE have to talk about C/S and B/S architectures.

C/S

C/S, namely Client/Server, is the mainstream architecture model of current network programming. Clent is client consciousness, S is server consciousness.

B/S

Browser/Server is the application software that uses a Web Browser as a client.

From the above introduction, we can infer that there are many C’s in C/S, such as APP and desktop application. But the B in B/S only refers to the browser.

So the question is, what are the differences or advantages of B/S versus C/S?

Advantages and disadvantages of B/S

advantages

First: The most obvious is that B/S deployments upgrade quickly and require no application updates, since all applications for B/S systems are deployed on the server and there is no need to update the client software. So many apps are embedded with H5, Hybrid. Because no review is required, it can be published directly. Why not audit? Because of the cross-domain limitation of the front end, JS is unable to obtain other information of the device, so there is no need to worry about security issues, so there is no need to audit.

Second: cross-platform, because all operating systems support Web browsers, so you only need to run in a browser.

disadvantages

High security requirements, B/S architecture is built on the wide area network, for all users. Server-side resources can be accessed through urls, so security requirements are higher than C/S.

note

Did not write too many details, some details to understand it, but also private chat my technical exchange.
This paper describes the network knowledge that a front-end engineer should master as a whole.
The word count of this article is ok, look should not how tired (laugh cry face).

Refer to the connection

Ten things you must know about TCP/IP

At the end of the article to summarize

Reading this, we will find that network knowledge is not so mysterious, serious study, you can also solve the front-end network knowledge.

communication

Nuggets series of technical articles summarized as follows, if you feel good, click a star to encourage, you can also follow me on Github, continue to output high-quality articles.

github.com/godkun/blog

I am the source terminator, welcome technical exchanges, welcome to pay attention to my nuggets blog, share knowledge from time to time.

Right, also poor what, of course, is to wish you a good year of the pig small partners!!