We used to say

PHP is the best language in the worldCopy the code

But now, we can say

JS is the best language in the worldCopy the code

Stage 1:

At the beginning, the front-end engineer could do very limited, basically according to the UI design draft to restore static pages, data binding is not front-end business, by the back-end template rendering output to the client, this stage is also called light front-end.

Stage 2:

With the development of software and hardware, the interaction and complexity of the page layer gradually increased, and it was difficult to meet the actual needs of back-end rendering alone. Later, data binding and page interaction were moved to the client side.

A key part of this was Ajax, which was originally developed by Microsoft, but other browser vendors didn’t want to follow Microsoft’s rules and teamed up to create their own (w3c standards), which is why so many browsers now have compatibility.

The emergence of Ajax gives the front end the ability to control the interface layer, and also begins to have the concept of front and back end separation. To put it simply, the back end provides API, and the front end students play with the page layer according to API. In fact, it can only be described as interface separation. Don’t need to know database logic relationships? The answer is no, or need to understand, even to do the back-end to better understand the front-end, design in line with the front and back end of the API out.

However, in the PC era, due to the existence of IE, many JS apis have compatibility, and because template binding is now done by the front end, the complexity is visible, which makes the front end very painful, so a hero emerged, jquery, jquery dom manipulation and the convenience of templates make its position in the front end industry irreplaceable. This stage is also called the heavy front end.

The third stage

Lazy, is the first productivity of programmers, because every time binding data or page interaction to operate dom node, can not shield the underlying DOM node? Vue, React, angular, the first proposed two-way data binding should be backone.js. MVVM development mode allows us to shield DOM operations and only focus on the data layer. The emergence of single-page applications means that the front end entry is switched from HTML to JS. We call it ‘all in JS ‘, but now that HTML, CSS, IMG and so on have moved to JS, JS is in need of a set of building tools, so webPack comes along, thanks to the sudden emergence of Node, the front-end can be said to establish a connection to the system layer, has its own package management tool NPM, The front end thus established a set of its own engineering system.

The fourth stage

  • The first direction: Html5 is not as good as native experience, which has always been a pain point. But HTML5 also has cross-terminal capability that native experience cannot match. The goal of ‘write once and run cross-terminal’ that Java has always dreamed of has never been realized by HTML5. With the gradual maturity of weeX and React-Native cross-end implementation solutions, it can achieve comparable capabilities with native and unify large front-end capabilities.

  • The second direction is wechat small program. Due to the huge flow entrance of wechat, small program will develop rapidly.

  • The third direction: PWA is a direction strongly promoted by Google, which can be installed as APP and offline storage. It has been practiced in foreign websites such as Twitter, but it will not be popular in a short time due to the existence of Internet Explorer in China.

  • Fourth direction: WebAssembly, I heard about it at a conference, webAssembly can run c++ and other low-level languages, last month there was a game framework written in c++ that was compiled by webAssembly and runs in the browser, other languages can also be written in the browser, There are some problems with webAssembly, such as how strongly typed languages can be converted to weakly typed languages;

  • Other directions: With the emergence of more and more terminal devices, more and more front-end fertile soil will be born in the terminal. Wait and see!