The original text was published by the author “Stuart Zheng Mei” at the front end of the public address. You changed the content of the instant messaging network, thanks to the sharing of the original author.
In 1990, the first web browser was born; in 1991, www was born, which marked the beginning of front-end technology.
We have experienced the front-end era of flood and famine, prototype era, jQuery era, post jQuery era, and three framework separatist era, all of which are dominated by foreign developers. Until today’s era of small programs, Chinese developers have created their own.
This is the result of a long technological reserve, which ultimately leads to a good harvest of technological growth. The road of front-end development during this period is rugged and difficult.
(this article is published synchronously at: http://www.52im.net/thread-27…)
2. Relevant articles
“Small program technology starts from wechat? Let’s take a look at the past and present of mobile applet technology! “
Inventory of mainstream mobile cross platform UI technologies: implementation principles, technical advantages and disadvantages, horizontal comparison, etc
“The hottest cross platform solutions for mobile terminals: react native, weex, flutter”
Get to know electron quickly: a new generation of web based cross platform desktop Technology
3. Flood and famine era (1990-1994)
In 1990, Tim Berners Lee, the father of the world wide web, invented the first web browser on the next computer.
The father of the Internet: Tim Berners Lee
On August 6, 1991, Tim posted a simple summary of the world wide web on the alt.hypertext newsgroup, marking the first time that a web page has appeared on the Internet.
On December 25, 1990, Robert carrio and Tim Berners Lee successfully realized the first communication between HTTP proxy and server through the Internet at CERN (i.e. CERN in Geneva) (for a detailed introduction to HTTP, please refer to “Introduction to lazy people in network programming (6): to understand HTTP protocol in a simple way”). Sir Tim Berners Lee is known as the father of the Internet as the inventor of the world wide web. The first website established by Tim Berners Li (also the first website in the world) is http://info.cern.ch/, which was online on August 6, 1991 (August 7, Beijing time).
The first web was mainly used by a group of scientists to share and transmit information, and there were dozens of web servers around the world. Because it is only used to transmit information, it is only a little better than telegram in terms of visualization or transmission quantity.
In 1993, CGI (Common Gateway Interface) appeared. People can dynamically generate pages on the back end.
Perl has become the main programming language of CGI due to its cross operating system and easy to modify features. Of course, CGI also supports other languages that support standard input and output and environment variables, such as shell script and C / C + + language, as long as they meet the interface standards.
But obviously, the content update of the page is completely generated by the back-end, which brings an obvious defect: every update needs to refresh the whole page, plus the early network speed, this operation is very slow. Therefore, in view of this situation, people start to improve from many aspects: the upgrade of writing language, browser and HTML.
In 1994, screenshot of Netscape browser
In October 1994, the W3C group was also established. They are responsible for the development path of HTML. Their purpose is to promote the development of general agreement.
1) learn from the basic grammar of C language;
2) learn from Java data type and memory management;
3) using scheme language for reference, the function is promoted to the position of “first class citizen”;
4) using self language for reference, using prototype based inheritance mechanism.
Nowadays, static languages are popular. Classes and interfaces have proved to be the best practice for building large projects. People can’t think how to write business without classes. Therefore, Microsoft at that time also built another browser language, VBScript.
In the early years of laziness, I had to make up lessons later: by 2019, the prototype method on array is three times the original.
Before the move, there was a tortuous practice in the front-end industry – the first browser war, and the development of UA sniffing technology came from it.
4. Browser war (1994-2005)
There were three browser wars, ie vs Netscape, ie vs Firefox, ie vs Google.
The first browser battle was especially fierce.
Microsoft’s IE browser was released in 1994, but at this time, Netscape has occupied an absolute advantage. In the backward situation, Microsoft decompiled the source code of Netscape and launched IE and JScript. But because there are so many bugs, we are not willing to develop websites for ie, so we found UA to filter out IE browser.
UA, or navigator.useragent, uses a string to record what operating system and browser the user is currently running in.
At that time, the UA of ie3 was as follows:
Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
The program judges UA information. If it finds that the current running environment is IE browser, it prompts the user to open it with Netscape browser. Therefore, Microsoft has to disguise its UA as a Netscape UA to cheat scripts used to detect the UA, so that Internet Explorer can run these websites.
In the end, the first browser war was won by Microsoft, and Netscape was acquired by AOL and ended.
The first browser war is a long time ago, but the end tells us that the strength of technology is not important. At that time, technical protection was not so important, or Microsoft’s behavior might be sued (Google’s opensdk only copied dozens of lines of code, and Oracle sued for 8.8 billion).
The most famous person in this era is dean edwrad, who is the earliest compatibility God that almost perfectly solves event binding. His addevent() is built into the earliest version of jQuery. John Resig, the author of jQuery, saw his strong skills and finally gave up the introduction of a large and comprehensive framework, focusing on the selector engine.
Dean edwrad’s ie7.js and ie8.js are good drugs for early browser compatibility, which can be said to be the origin of all Polyfill. He wrote a lot of hacks, such as how to measure the width and height of elements in ie, and the compatibility of many DOM operations.
It was too early for China to participate in the browser war.
5. Prototype period (2005-2009)
Sam Stephenson’s greatest contribution is to discover the prototype and create function.prototype.bind, and write a lot of methods on the array, many of which are standardized.
At the same time, MooTools was also a prototype hanging method. At that time, everyone was still arguing about it in the front-end forum. There are also front-end engineers who like to discuss how to pick scripts, share bullet layers, calendars and other small components on the famous front-end gathering place blue ideal (now reduced to designer’s website), which was already a great thing at that time.
Prototype also solved two major problems at that time: animation effects and Ajax requests. Animation effects are provided by scriptaculous. We are now familiar with all kinds of slow motion functions. The naming and general operation of various effects are determined by scriptaculous.
In the early days, Google began to use iframe to refresh pages.
In February 2005, Jesse James Garrett published an article entitled “Ajax: a new method of web application development”. After Ajax was discovered, people began to pay attention to the application of this technology.
Jesse James Garrett:
Jesse James Jarrett is a designer in the field of user experience design, the founder of adaptive path, a web experience design company, and the name of Ajax technical terms.
For example, under ie, activexobject (“Microsoft. Xmlhttp”) is created by ie. If an engineer developed a core library at that time, it would be embarrassed to publish it if it did not contain Ajax encapsulation.
▲ some ajax books
At that time, the front-end development mode was to select a core library, find some components, or pick other people’s scripts for development.
Prototype’s source code is very well understood, and the code volume is also small, with only 5000 lines, and each method is easy to pick out, so some big companies always have experts who can create their own prototype.
But the front-end development is still inseparable from the back-end, because there is no module mechanism in the front-end, at that time we need to use PHP for packaging.
Packaging is one of Yahoo’s 34 rules, which can reduce the number of requests. Packaging can also be confused to prevent code thieves from spying.
Questions for front-end interviews n years ago:
▲ the prototype of modularization, and mark its dependence in the notes
In this period, there is no separation between the front and back ends, but some domestic experts with deep back-end background have entered the arena.
6. JQuery period (2009-2012)
In 2006, jQuery was released, and its competitors at that time were many: Dojo, prototype, extjs, and MooTools.
So the slogan of jQuery at that time can only say that its performance has increased by 100%, 200% and 300%. It wasn’t until 2009 that jQuery gained an overwhelming advantage when the sizzle selector engine was developed successfully.
At that time, the front-end industry was mainly faced with the browser compatibility problem. JQuery really knew a lot about dealing with DOM compatibility, and discovered a large number of DOM / BOM compatibility schemes (such as Dean edwrad’s addevent(), ie’s PX conversion scheme, domready’s doscroll scheme, and global Eval’s compatibility scheme, etc.)
JQuery also breaks the programming thinking of the front-end developers. Before, it was based on the back-end development thinking: to do a business, you need to encapsulate a class first, and then try to pass in a DOM through the class method, and then operate the DOM through the class method. JQuery is DOM centric. Developers can choose one or more DOM to become jQuery objects, and then perform chain operations. At that time, in order to change the thinking of users, domestic experts wrote many articles to guide everyone.
Secondly, developers have begun to pay attention to the separation of front and back ends, and require that they should not pollute the object prototype object or the window global variables. In this way, jQuery takes up only two global variables.
Thirdly, jQuery is very lightweight. The size of the packer compressed by Dean Edwards is less than 30KB. In addition, it is implemented in a very delicate way to solve various compatible chronic diseases in an eye-catching way.
In order to learn these skills, experts have turned over the source code of jQuery, so there are a lot of books on the Internet about its source detailed explanation. Even the front-end engineer will be tested in the source code implementation of jQuery during the interview, so jQuery is more popular in China.
The popularity of jQuery indirectly brings the following development:
1) to promote the learning of css1-css3 selectors;
2) it promotes the birth of document.queryselectorall and element.matches;
3) improve people’s understanding of domready (domcontentloaded event);
4) promote the birth of promise and request animateframe;
5) the most important thing is to lower the front-end threshold and let more people enter the industry. The team of front-end engineers is growing.
In this way, excellent engineers are constantly emerging, who have created a large number of jQuery plug-ins and UI libraries. In the post jQuery era, people developed front-end module loading, unified asynchronous mechanism, built large-scale MVC framework, even extended to the back-end, took over the packaging script and invented node.js to free up a lot of time.
During this period, a large number of jQuery like libraries emerged, the most famous of which is zepto.js. The appearance of zepto also marks our entering into the era of mobile Internet. At that time, the famous supporting libraries were iscroll, fastclick, lazy load, modernizr and fullpage.
JQuery’s chained operations are all the rage, which also brings many problems. When Ajax has dependencies, it will inevitably have callback hell. Therefore, in view of this discussion, deffered and promise were born. When we talk about asynchronous processing of node.js later, we will have a heated discussion about callback hell. So there’s nothing new in the sun, and we always have similar problems.
There are so many selectors in jQuery that can be maintained. With more and more people emerging in this industry, page interaction is becoming more and more complex. From web page to web app, new trends bring new development methods.
7. Post jQuery period (2012-2016)
The emergence of jQuery makes it easier for front-end engineers to develop. If engineers want to realize a function, now they search out a jQuery plug-in to implement it. At that time, we introduced jQuery plug-ins all day on the front-end website, and rarely discussed some of the underlying implementation.
Front end engineers usually write a page, and introduce more than ten or even dozens of jQuery plug-ins. The page is full of script tags. As we all know, browser is a single thread, script loading, will affect the page analysis and presentation, leading to the famous white screen problem (at that time, the front-end force is too strong, everything in the body is generated dynamically).
Another problem of jQuery is global pollution. Because of the quality of plug-ins, or the quality of development, this has been unable to be solved by traditional means such as IIEF module or namespace.
So some excellent front-end engineers decided to learn from the back end and introduce the module mechanism. In the early days, this module mechanism was built-in in Dojo and ext frameworks, but it was obviously unable to persuade users of another framework to use the module mechanism of the other framework, so someone was determined to unify this module definition method and set up commonjs.
However, after the birth of commonjs for a long time, it can only be used when the backend node.js appears. In China, another standard style is popular. Relying on Alibaba’s banner, someone launched seajs, known as the standard of CMD. In fact, both at home and abroad, there are many module loaders, but in the end, they are eliminated. One specification is enough, not too much.
But the creativity of front-end engineers is so amazing. One year is enough, from scratch to overuse. This may be due to the fact that the front-end code is open source. Finally, someone unified the first two specifications (AMD, node. JS module), and supported the old “global” variable specification.
Secondly, jQuery developers need to solve the problem of generating large sections of HTML. Before jQuery, there were $. HTML, $. Append, $before and other methods, which can convert a large section of string conforming to HTML structure into Dom and insert it into the page.
But now we want to separate HTML into different files and insert data, which is the front-end template. The situation of front-end template is the same as template specification, from no to much like sesame. At that time, it is a headache for front-end engineers to select a useful and high-performance template. There were many online evaluation articles to introduce them.
The front-end template technology can be described by a formula:
HTML = template(vars)
With front-end templates, front-end routing is born again. Based on them, people invented a new vocabulary spa. As the end of this era, Ryan Dahl, a ruby expert, invented node.js. Front end engineers cheered: can not use the traditional back-end can write a website!
▲ Ryan Dahl, father of node
The development of node.js will not be described in detail. Soon, it will emerge massive modules, routing, state management, database, MVC framework. At this time, the front-end lacks its own MVC framework. Node.js is going to be ten years old.
The author of backbone.js has also developed another compilation language, coffeespcript, in which the syntax sugar such as arrow function, class mechanism, deconstruction and assignment deeply influenced the later ES6.
Next comes Google’s angular, Microsoft’s knockout.js and Apple’s ember.js. MVVM has one more data binding function than MVC, but this data binding function is very difficult to implement. Knockout is implemented by using function instead of property. Its design affects the later mobx; ember.js is based on object.defineproperty; angular is to translate function body into setter() and getter() functions.
The involvement of big companies has a great impact on individual developers. After all, everyone loves to believe in big companies, so the situation will be stable at once. Big companies have also brought new development models. In the early days, they were looking for a core library, searching for a large number of plug-ins, writing their own business code, and finally packaging the back-end.
Large companies have misappropriated the back-end development experience and developed a set of CLI with node.js, which includes scaffolding generation, packaging script, syntax style detection, environment variable insertion, code complexity detection, automatic unit test when code is submitted, image and JS compression and other functions. Eslint, jslint, jshint, CSS lint, htmllint, etc. were all appeared in that period.
But the emergence of CLI has led to the split of the front end. In the past, everyone used jQuery, but since the moment when cli helped you build the project, it has put you into a sub camp. Are you angular? Ember.js? Or jQuery? By the way, jQuery’s camp without the support of big companies has been rapidly marginalized.
For individual developers, they are not able to develop such a fully functional cli, so there are platforms such as code climate, Travis Ci and circleci. Their emergence marks the end of the jQuery workshop era.
▲ circleci official website
The front-end developers are also divided: some people turn to the back-end, and there are CNode portals. Others began to engineer. There are hundreds of construction tools at one time, known as grunt, gulp, fis3, webpack, rollup and NPM script.
After you sing and I come on the stage, these construction tools will experience the test of the times, like waves and sands, and only a few survive in the end.
Therefore, in this engineering feast, many low-level jqueriers are doomed to be eliminated. The front-end template, front-end routing, MVC framework, module loader and node.js construction tool developed by jQuery in its spare time, however, eventually become its own grave digger.
The era of jQuery is gone forever. No one cares about the launch of bootstrap 4, which has been delayed for N years. No one knows the weight-loss plan of jQuery 3.5, and no one asks about the source code of jQuery. Gradually, everyone doesn’t pay attention to the tool chain of jQuery.
8. The era of separation of three frameworks (2016-present)
React broke out suddenly. Although it was released at the same time as angular, the weird syntax of JSX kept people away from it. At this time, it has entered the middle stage of the mobile Internet, and large companies have their own apps, either based on the native or hybird (see the inventory of mainstream mobile cross platform UI technologies: implementation principle, technology advantages and disadvantages, horizontal comparison, etc.), and the inventory of the hottest mobile cross platform solutions: react native, weex, shuttle).
Hybird uses WebView to load a website or spa.
Because the original cost is too expensive, we need to recruit two teams, one is Android, the other is IOS, while hybird has always had performance problems. So in 2017, Facebook launched react native (RN).
The performance of RN is not much worse than that of native, and better than hybird. Secondly, the JSX development interface is faster than native. RN only needs low-cost front-end developers to get started. After the wave of development of new business models in China, such as waterfall flow (photo Shopping Guide), group buying, P2P, blockchain, etc., the number of front-end personnel has increased greatly. Now, with a little training, they can transform into app development.
In the process of developing RN, people begin to understand the advantages of react. For example, the virtual DOM technology behind JSX, although it has been proved that the virtual DOM will not bring great performance advantages, but it ensures that the performance of how you write it will not be too poor.
In order to introduce JSX, react needs to introduce compilation, which indirectly contributes to the growth of Babel and webpack. Babel in particular, let’s use very new syntax in very old browsers, even some syntax that hasn’t been finalized yet. React was upgraded from 14 to react 15, and class syntax was forced to be used, which finally brought the long pushed grammar sugar to a large scale.
Now you can get all this with just a few new keywords.
When Google released angular, it also released a framework called polymer. At that time, it wanted to promote a browser custom component technology called web components. This is actually an upgrade of HTC technology that Microsoft has left behind in IE5. Although it didn’t catch fire, it mixed script, style and template into a file design, inspired a Chinese living in the United States, and combined with the design of backbone.js and angular at that time, vue.js came into being. At present, this is the most successful front-end framework for Chinese people.
Yu Yu brook:
You Yuxi is the author of vue.js framework and the creator of HTML5 clear. Yu Yu Xi graduated from Fudan affiliated high school in Shanghai, completed university studies in the United States, graduated from Colgate University with a bachelor’s degree, and then obtained a master’s degree in Design & technology from Parsons School of design. Now, he works in Google creative lab in New York.
In addition, the Chinese have also made several sets of mini react framework and mini Vue framework. This is a bit like the jQuery era, where people are crazy about making mini jQuery frameworks.
In general, the most creative is the react team, which makes endless names such as state manager, CSS in JS, flow static type checking, devtool, fetch, front and back isomorphism, fiber, suspend, and concurrent rendering. Among them, state manager has hundreds of sets, CSS in JS also has hundreds of sets, flow makes the front end taste the benefits of interface programming, indirectly promoting the development of typescript. These three frameworks can’t be compared in one or two: vue.js has the support of Chinese people, react and angular have the glory of large companies.
The entanglement of the three frameworks extends from PC field to mobile end: react has RN, vue.js has weex, angular has ionic. Think that in order to be compatible with browsers, we saved a lot of hacks of browser detectives, all devalued into garbage.
In this period, a new back-end rendering emerged, called front and back isomorphism, which not only has the effect of early SEO, but also can reuse a large number of business logic. With the development of mobile Internet in China, the cost of acquiring customers has increased, and all kinds of effective business models have entered the Red Sea. However, only the head users can earn money. Matthew effect is becoming more and more serious, and pure technical solutions can no longer meet the business demands.
9. The age of small programs (2017 ~ now)
The era of small programs almost coincides with the era of the three frameworks, but it comes from different groups of people, and the platform for decisive battle is different.
The front-end technology has always been dominated by foreign developers, even vue.js was created by Chinese in the United States. However, there are generation differences in domestic and foreign technology updates, which are usually postponed for two or three years in China. This time difference can enable some imitators to survive (such as seajs, FIS, Avalon). But as the time of closure is getting longer and longer, there will certainly be its own proprietary species in China. Applets are one of them.
The emergence of small programs has obvious business demands. Because of Matthew effect, some apps with large traffic are born. These large flow apps integrate many functions, but obviously no matter how many employees the company has, they can’t do all the functions by themselves, so they generate the “outsourcing” means of small programs.
Small program is a accumulation of domestic front-end technology: the virtual dom of mini react running at the bottom, the built-in component is web component, the API comes from hybrid bridge method, the package uses webpack, the debugging platform is a simplified version of chrome console, the syntax highlight of wxml and wxss should also be webpack or vs code plug-in, and the module mechanism is commonjs of node.js One of the most noteworthy is wechat developer tools, which have become the standard configuration of various small programs / fast applications in the future.
But at the beginning, the reuse ability of wechat applets was very weak, there was no class inheritance, NPM could not be used, and less and sass were not supported, so its translation framework came into being. The first generation of translation frameworks are wept, wepy and mpvue, all of which are Vue style. Because the template instruction of wxml is very similar to Vue, it can be compatible with only one change. At that time, there was also a mina framework. It was said that it was developed by wechat team. You can set up the back end of node.js independently, so that the small program can be used in the browser for unit test.
The first generation of translation framework is mainly based on the template tag to implement the component mechanism, and the custom component mechanism is the future. This makes it difficult to upgrade small program projects written with the first generation translation framework. At that time, it was a paradise for individual developers, and these frameworks were all developed by a big bull alone.
The second generation translation framework is dominated by large companies, because more and more small programs need to be compatible. Baidu, Alipay, byte beating, millet, HUAWEI and other companies have launched their own small programs and fast applications. It’s hard for individual developers to develop translation frameworks with their own strength. At this time, major teams have launched their own wheels: taro of JD, chameleon of Didi, megalo of Netease, Nachi of qunari, Okam of Baidu, etc.
In this period, angular is obviously behind the times. First, the upgrade of angular is too fast, the domestic experts have not digested it, and a new version of angular has been released. Second, there is a lack of mini angular wheels in China, which makes the huge angular unable to be crammed into small programs.
Overseas Google has released a cross platform translation framework for flutter, but its programming language is dart, and it can’t cross into applets.
In the future, not only the domestic first-line giants will compete for small programs, but the second and third-line giants may also join in the scuffle of small programs, for example, some people say 360 is also building its own small program platform. The new traffic realization mode of small programs has a profound impact on the domestic Internet layout.
Our front-end developers touch not only the browser, but also the back-end, desktop, mobile phone and small program. The cost performance of the front-end developers is getting higher and more important. It can be said that the times make heroes.
The author is lucky to be a member of the front-end developer team, and firmly believes that our front-end developers will have a wider and better future.
Appendix: article on Web instant messaging technology
New to web instant messaging:
Novice post: explain the principle of instant messaging technology on the web
Please refer to:
An inventory of instant messaging technology on the Web: short polling, comet, websocket, SSE
About Ajax short polling:
There is no point in looking for this information. Unless you cheat the customer, please consider the other three options.
For a detailed introduction to comet technology, see:
Detailed introduction to comet Technology: real time communication technology on Web based on HTTP long connection
Instant messaging on the Web: http long polling details
Instant messaging on the Web: instant messaging without websocket
Open source comet server icomet: an instant messaging solution supporting millions of concurrent web terminals
For more details on websocket, see:
“Getting started with websocket”
Detailed explanation of websocket (1): preliminary understanding of websocket Technology
Websocket details (2): technical principles, code demonstration and application cases
Websocket details (3): go deep into websocket communication protocol details
Detailed explanation of websocket (4): the relationship between HTTP and websocket (Part I)
Detailed explanation of websocket (5): the relationship between HTTP and websocket (2)
Detailed explanation of websocket (6): the relationship between websocket and socket
Integrating theory with practice: understanding the communication principle, protocol format and security of websocket from zero
Introduction to socket.io: supporting websocket and instant messaging framework for Web
What is the relationship between socket.io and websocket? What’s the difference? “
For a detailed introduction to SSE, see:
Detailed explanation of SSE Technology: a new HTML5 server push event technology
For more web im articles, see:
(this article is published synchronously at: http://www.52im.net/thread-27…)