Front-end technology development route
The front end mainly refers to the client, App, and browser. Here we mainly introduce the browser.
The development of front-end technology is a long process.
1. The era of static web pages
Initially, static text or image information was mainly displayed in the browser, while GIF images introduced dynamic elements to HTML pages for the first time.
2. The CGI era
However, people are not only satisfied with accessing static files placed on the Web server. In 1993, CGI (Common Gateway Interface) appeared, and dynamic information services on the Web began to flourish. CGI defines the communication interface standard between a Web server and an external application. Therefore, the Web server can execute an external program through CGI, allowing the external program to generate dynamic content based on the content of the Web request. Perl has become the main programming language for CGI because of its cross-operating system and easy-to-modify characteristics. Of course, CGI can be written in any language that supports standard input and output and environment variables, such as Shell script, C/C++ language, as long as it conforms to the interface standard. For example, if you write a CGI program in C language, you can send the HTML content you want to return through printf output to the Web server, and then return it to the user.
3. Web programming script language: PHP/ASP/JSP, CSS1.0
At this time, we can already provide dynamic functions on the Web, such as counting website visits and processing forms. CGI will start a process to process each request, so the performance scalability is not high. In addition, imagine the program used in Perl and C to output a lot of complex HTML strings. Is it a bit painful? Readability and maintainability are big issues. In order to handle more complex applications, one method is to save the fixed part of the HTML return (we call it a template) and mark the dynamic part. When the Web request is processed, your program first generates the dynamic part The content, then read in the template, fill in the dynamic content, and form the final return. For example, to search for a keyword, the web server of the search engine can first get the data from the background index server, then fill the data into the HTML template of the returned result, and return it to the browser. But doing this by yourself is obviously too cumbersome and repetitive. So in 1994, PHP was born. PHP can embed programs (dynamic content) into HTML (template) for execution, which not only better organizes the content of Web applications, but also executes more efficiently than CGI. After that, the ASP that appeared in 1996 and the JSP that appeared in 1998 can essentially be regarded as a template engine that supports a certain scripting language programming (VB and Java respectively).
JSP inserts JAVA program segments and JSP tags into traditional web page HTML files to form JSP files. It is a server-side web template technology. The Internet back-end development model is generally a typical MVC model: it is divided into three layers: Controller (Action) layer, Service layer, and Dao layer. Among them, the main function of the Controller layer is to receive parameters, call Service, fill data, perform routing jumps, render JSP pages, and return the page content to the browser. At this time, because many front-end and back-end operations must be modified in the JSP file, it is easy to cause serious business coupling dependencies.
In 1996, W3C released the CSS1.0 specification. CSS allows developers to replace difficult-to-maintain inline styles with external style sheets, instead of modifying HTML elements one by one, which makes HTML pages easier to create and maintain. At this time, with these scripting languages, coupled with back-end database technology, the Web is beginning to kill all parties, and application systems like e-commerce can also be built through Web technology. The Web has truly changed from a static resource sharing medium to a distributed computing platform.
4. Distributed enterprise computing platform: J2EE/.Net
When the Web began to be widely used to build large-scale applications, the requirements of distributed, security, transactional and other aspects gave birth to the J2EE (now renamed Java EE) platform was born in 1999, and since then it has provided support for enterprise applications. Various application servers of the platform have also become popular. Java Servlet, Java Server Pages (JSP) and Enterprise Java Bean (EJB) are the core specifications in Java EE. Servlet and JSP are Web components that run on the server side, and EJB is a business component that runs on the server side, which is a distributed component technology. . The .net platform that followed in 2000, its ASP.net component-based Web development method and the strong support of the Visual Stidio.net development environment, greatly reduced the complexity of developing enterprise applications. For the first time, ASP.Net allowed programmers to create Web pages in components like dragging and dropping components to create Windows Form programs. JSF, which later appeared on the Java platform, also inherited this idea. The two platforms continue to move forward in mutual competition and imitation.
5. The magic on the browser side: AJAX
Web applications involve both the browser side and the server side. In addition to briefly mentioning the CSS specification, the previous introduction mainly focuses on the technical development of the server side.
On the client side, JavaScript designed by NetScape in 1995 was used as a scripting language to run on the browser to add dynamics to web pages. Microsoft subsequently launched a similar JScript, but the lack of a unified language specification, making browser compatibility a programmer's nightmare. JavaScript was finally submitted to the European Computer Manufacturers Association (ECMA), as a neutral ECMA began the road to standardized scripting language, and named it ECMAScript. JavaScript can respond to user events on the browser side, detect the correctness of the form, dynamically modify the HTML page structure DOM, so it can reduce the communication overhead with the server side, and make a cool page dynamic effect. The concept of AJAX that appeared in 2005 makes JavaScript shine again.
The dynamic pages before 2004 were driven by back-end technology. Although dynamic interaction and instant data access were realized, the browser needed to be refreshed for every data interaction. Frequent page refreshes greatly affect the user experience. This problem was not resolved until the release of Gmail and Google Maps developed by Google using Ajax technology in 2004.
The secret behind this is the asynchronous HTTP request implemented in the Ajax technology, which allows the page to initiate an HTTP request without refreshing, and the user does not have to wait for the response of the request, but can continue to browse or operate the web page.
Ajax opened the era of web2.0.
In addition, ajax, as a front-end and back-end separation solution, has also been adopted by most domestic companies that are not very low, which indirectly led to the decline of web scripting languages such as PHP.
After NetScape lost to IE in the first browser battle, he founded the Mozilla technical community. The community later released the firefox browser that follows the W3C standard. Together with the Opera browser, it started the second time on behalf of the W3C camp and IE. Browser wars. Different browser technical standards have considerable differences, which are not conducive to compatible development. This has given birth to front-end compatible frameworks such as Dojo, Mooltools, YUIExtJS, and jQuery, among which jQuery is the most widely used.
6. HTML5, V8 engine
In 2008, Google's V8 engine was released, ending the Microsoft IE era.
After Mozilla and Opera proposed the W3C to extend the HTML and DOM Web Forms 2.0 draft in June 2004 was rejected, some browser manufacturers established the Web Hypertext Application Technology Working Group (WHATWG), and proposed the Web Applications 1.0 specification draft. The two specifications were later merged into HTML5. W3C accepted the HTML5 draft specification in 2007 and established a new HTML working team. On January 22, 2008, the HTML5 draft was officially released. On October 28, 2014, W3C officially released the HTML5.0 recommended standard.
Under the guidance of the new HTML5 specification, various browser manufacturers have continuously improved their browsers in order to support HTML5, and the second browser war has moved towards healthy competition. It is worth noting that the Chrome browser developed by Google based on the javascript engine V8 has developed rapidly.
To quote a passage, HTML5 is just a trio of people. It attracts more attention than it provides. HTML5 only provides some new APIs, which is equivalent to an app upgrade from 1.0 to 2.0 to increase the functions of nearby people. . And the API it provides is to try the water on the mobile terminal. On the PC side, due to compatibility issues, it has not been able to be married by the media. The development of the PC terminal is gradually enhanced based on HTML4.0+CSS2. As for css3, its most concerned animation is the rest of the flash game.
The rapid development of mobile terminals has catalyzed the development of HTML5, and the development of HTML5 has also promoted the standardization of browsers. On this road to standardization, WeChat contributed a lot. 1024, surrounded by Neural Cat, Taobao for ten years, LEXUS NX, which integrates a large number of HTML5+CSS3 elements, is impressive.
In addition, Microsoft abandoned the IE codename, developed the edge, the continuous standardization of major browser manufacturers, the finalization of HTML5 drafts, and the continuous implementation and improvement of ES6 drafts. The front-end road seems to be a thorny road. I am full of expectations.
7. The front-end counterattack at the service end: Node
The competition of major browsers has continuously improved the performance of their engines. So far, the performance of the Google V8 engine has been sufficient to run large-scale Javascript programs. On top of V8, built-in modules such as network and file system have formed Node.js today.
In 2009, Ryan Dahl developed Node.js, an asynchronous I/O framework based on the event loop based on Chrome's V8 engine. Node.js enables front-end developers to use javascript to develop server-side programs, which is very popular among front-end developers. Soon, more and more tools were developed with the help of Node, which is equivalent to primitive people learning to make tools, leaving the era of slash and burn. Package managers such as Webpack and NPM were born. A large number of Node.js users have built an automated deployment Node.js ecosystem managed by NPM package management tools.
Among them, the emergence of V8 and node enables front-end developers to write back-end systems with familiar syntactic sugar, and provides the front-end with the opportunity to implement full-stack development in the same language (JavaScript is no longer a mocked, only page interaction Scripting language).
8. Front-end MVC: Angular, Vue, React
As major browsers began to support HTML5, the more interactive functions the front-end can implement, the corresponding code complexity has also increased rapidly, and the MVC framework used in the back-end has also begun to appear in the front-end. The emergence of MVVM front-end frameworks such as React, Angular, and Vue has enabled the front-end to realize the real application of the project (SPA single-page application), no longer relying on the back-end developers to handle the page routing Controller, and realize the self-management of page jumps. The application of these frameworks made the website evolve from Web Site to Web App, opening the era of SPA (Single Page Application) for website applications.
9. The era of all-round front-end
Beginning in 2009, large-screen smart phones began to appear one after another, and later 4G mobile networks became popular. This enables the front end to display web applications from a single PC browser to cover mobile phones and tablets (HTML, CSS, and JavaScript have also introduced their own new standards one after another). The front end has an increasing demand for cross-end browsing. The front end is no longer just PC web development, mobile phone configuration, and hybrid app development have become the norm.
Reference
Reference material 1 Web development technology development history
Reference 2 A brief history of the development of Web front-end technology