What knowledge does the web front-end need to master?

What technologies does a qualified web front-end need to master?

The most basic languages are naturally JavaScript, HTML and css.

First, understand what they are.

HTML is the skeleton of the web page that users see. For example, you will find that the current page is divided into three parts: left, middle and right, which are filled with different words and pictures. Each section will continue to be subdivided, for example, there is an input box below the middle part of the current page, and so on.

CSS is the detail control of web page display. For example, you will find that some words are white on a red background, some sub-parts account for half of the page width, some only account for one-sixth, and some parts need users to do some operations (such as clicking and sliding) to appear. These are controlled by CSS.

JavaScript is a scripting language, which is responsible for capturing the user's operation on the browser and exchanging data with the back-end server. When the user clicks enter at the front end, he will touch the JavaScript script that binds the action, and then JavaScript will collect data, call the api interface of the back end, and then hand over the data returned by the back end to HTML and CSS for rendering.

The HTML code and CSS code of the webpage can be viewed directly in the browser. You can directly press F 12 to view the modules on the right in the figure below. The red boxes on the left and right are the correspondence between the code and the actual page. So if you see a good layout of a website, you might as well click F 12 to learn.

Front end frame

However, in practical application, few formal project teams directly use the above three languages to develop the web front-end, but use many frameworks that encapsulate these three languages, such as

vue . j

, angular, reactive and so on. They are the Great God Project Team from Google and Facebook. According to their own experience, they encapsulate the native front-end language and realize more complicated and cool functions. Therefore, we can say that learning to use these frameworks can achieve twice the result with half the effort.

For example, using vue, which is a bottom-up incremental development design, its core only cares about the layer, and it can also be integrated with other libraries or existing projects, and the learning threshold is extremely friendly; On the other hand, vue can drive complex single-page applications developed by single-file components and libraries supported by vue ecosystem. With this ecosystem, it can be said that vue is in a thriving state of continuous growth and perfection.

Network communication protocol

Due to the trend of separation between the front-end and the back-end, the front-end still needs to know a lot of network communication protocols, not limited to http protocol, because according to my experience, we sometimes use websocket and other protocols. Therefore, the front-end needs to simply understand the characteristics and usage of different protocols, but the good news is that it is not necessary to thoroughly understand the principle of each protocol like learning computer network courses, as long as you learn how to send requests for this protocol in front-end language.