A brief history of front-end development
In 1990, Tim created the original Web browser based on the hypertext language HTML on the NeXT computer.
In 1991, Tim was widely promoting the idea of the Web on the Internet as an evangelist, and at the same time, the National Center for Supercomputer Applications showed a keen interest in it, And developed a browser called Mosaic, which was released in April 1993.
In May 1994, the first World Wide Web Conference was held in Geneva.
1994.7 Release of HTML 2.0 Specification In September 1994, the Internet Engineering Task Force established an HTML Working Group.
In November 1994, the developers of the Mosaic browser founded Netscape Communications Corp. and released the Mosaic Netscape 1.0 beta browser, later renamed Navigator.
In late 1994, the World Wide Web Consortium, led by Tim, was established, marking the official birth of the World Wide Web.
At this time, the Web page is mainly HTML, is pure static Web page, the Web page is “read-only”, information flow can only be one-way through the server to the client flow, so the world has entered the Web 1.0 era.
In 1995, Netscape engineer Brendan Eich designed the JavaScript language in 10 days. The scripting language was originally called Mocha, later changed to LiveScript, and eventually changed to JavaScript for good marketing with the Java language. Netscape built the scripting language into Navigator 2.0 to run in the browser.
In contrast, Microsoft released VBScript and JScript in 1996. JScript is a reverse-engineered implementation of JavaScript built into Internet Explorer 3. But JavaScript and JScript are implemented differently, resulting in web pages that aren’t compatible with both Navigator and Internet Explorer. Internet Explorer began to steal market share from Netscape, which led to the first browser wars.
The first Browser Wars In November 1996, in an effort to secure JavaScript’s market leadership, Netscape submitted JavaScript to the European Computer Manufacturers Association for international standardization.
The CSS 1.0 specification was released as a W3C recommendation in December 1996
In June 1997, ECMA developed the ECMAScript standard specification ECMA-262 based on the JavaScript language. JavaScript is one of the most well-known implementations of the ECMAScript specification. In addition, ActionScript and JScript are also the implementation languages of the ECMAScript specification. Since then, browser vendors have progressively implemented the ECMAScript specification.
In June 1998, the ECMAScript 2 specification was released, And through ISO to generate a formal international standard ISO/IEC 16262.
The ECMAScript 3 specification was released in December 1999, and remained largely unchanged for a decade. ECMAScript 3 becomes the most widely used and implemented language specification foundation for today’s major browsers.
The first browser wars ended with Internet Explorer trouncing Netscape, and IE began to dominate the browser market, peaking at 96 percent share in 2002. With the end of the first round, browser innovation has declined.
XHTML 1999 THE W3C released the HTML 4.01 standard, Microsoft introduced ActiveX for asynchronous data transfer, and browser vendors imitated XMLHttpRequest (a precursor to AJAX). 2000: The W3C adopted a bold plan to bring XML to HTML, XHTML1.0 was released as a W3C recommendation in May 2005. The W3C released the DRAFT CSS 3.0 specification 2002-2006. XHTML2.0 was finally abandoned in 2009. With the advent of JavaScript, you can change the style of the front-end DOM to implement small functions like clocks. JavaScript at the time was limited to that, and most of the front interfaces were simple, displaying purely static text and images. This kind of static page cannot read the data in the background database. In order to make the Web more vibrant, dynamic page technology represented by PHP, JSP and ASP.NET was born one after another.
PHP (PHP: Hypertext Preprocessor) was originally developed by Rasmus Lerdorf in 1995, and the PHP standard is now maintained by the PHP Group. PHP is an open source general-purpose computer scripting language, especially suitable for web development and embedded in HTML. PHP’s syntax is easy for the average programmer to learn by borrowing features from popular computer languages such as C, Java, and Perl. The main goal of PHP is to allow web developers to write dynamic pages quickly.
JSP (JavaServer Pages) is a technical standard of Web Pages which is initiated by Sun Company and co-created by many companies so that software developers can respond to client requests and dynamically generate HTML, XML or other format documents. JSP technology is based on the Java language. In 1999, the JSP 1.2 specification was released with J2EE 1.2.
ASP (Active Server Pages) 1.0 was released with IIS 3.0 in 1996. In 2002, ASP. Net was released to replace ASP.
With the advent of these dynamic server page technologies, the page is no longer static, the page can retrieve server data information and constantly update. The emergence of search engines represented by Google and various forums makes the Web full of vitality.
With the continuous development of dynamic page technology, the backend code becomes huge and bloated, and the back-end logic becomes more and more complex, which is gradually difficult to maintain. At this time, various MVC frameworks at the back end gradually developed. Taking JSP as an example, Struct, Spring and other frameworks emerged in an endless stream.
From the birth of the Web to 2005, it has been in the state of backend heavy, front-end light.
The popularity of AJAX In the early days of the Web, front-end pages had to refresh the entire page in order to get background information, which was a terrible user experience.
Google released two major Web products in 2004 and 2005: Gmail and Google Map. Both of these Web products make extensive use of AJAX technology that allows the front end to communicate with the server over the network without requiring a page refresh, which may seem like a no-brainer today, but a decade ago AJAX was a revolutionary technology that changed the user experience.
With the popularity of AJAX, more and more websites are using AJAX to dynamically fetch data, which makes dynamic web content possible, and social networks like Facebook are starting to flourish, and the front end is booming for a while.
AJAX helped drive Web 2.0 by making it easier for browser clients to send data to the server.
Google Trend: AJAX has been getting a lot of attention from developers since 2005.
XMLHttpRequest is officially a W3C standard in 2006.
Browser War II The emergence of a front-end compatibility framework Internet Explorer won the First Browser War against Netscape, monopolizing the browser market. As a dictator, IE did not follow the W3C standards, IE became the de facto standard.
Netscape created the Mozilla community before it was acquired by AOL in 1998. Firefox was first released in November 2004 and downloaded more than 60 million copies within nine months, a huge success that first challenged the dominance of Internet Explorer. Firefox is considered the spiritual successor to Netscape.
Since then, Firefox has been able to catch up with Internet Explorer and gradually erode its market share, leading to the second browser war. At the end of 2008, Firefox’s market share had reached more than 25%, while IE’s had fallen below 65%.
In the second browser war, as the W3C group led by Firefox and Opera intensified their fight against Internet Explorer, the fragmentation of browsers became more and more serious. Different browsers implemented different standards, which was a nightmare for developers.
In order to solve the browser compatibility problem, Dojo, jQuery, YUI, ExtJS, MooTools and other front-end frameworks have been born. The front-end developer uses these frameworks to send frequent AJAX requests to the background and update the DOM tree when the data is available.
JQuery is the standard on almost every website. Dojo, YUI, ExtJS, and more provide many components that make it possible to develop complex enterprise-level Web applications.
Google Trends: Blue jQuery, red Dojo, green YUI, purple ExtJS, yellow MooTools
In 1999, the W3C released HTML 4.01, and no updated Web standard was published for several years. With the rapid development of Web, the old Web standards can not meet the rapid growth of Web applications.
In June 2004, The Mozilla Foundation and Opera Software presented a joint proposal at a workshop hosted by the World Wide Web Consortium (W3C) that included a preliminary draft specification for Web Forms 2.0. It is recommended to hold a vote on whether the W3C should extend HTML and DOM to meet new requirements in Web applications. In the end, the conference voted 8-14 against the proposal, which raised some eyebrows. Soon after, some browser vendors announced the formation of a Web Hypertext Technology Working Group (WHATWG) to continue the development of the specification. The GROUP again proposed a draft specification for Web Applications 1.0. Later, the two specifications were combined to form HTML5. In 2007, it was accepted by W3C and a new HTML working group was formed. On 22 January 2008, the first official draft was released.
Shortly after the release of Chrome in December 2008, Google entered the second browser war with the release of Chrome. Chrome uses Safari’s open source WebKit as its layout engine and has developed an efficient JavaScript engine called V8.
Although HTML5 is well known among web developers, it became a topic of conversation in the mainstream media in April 2010, when Apple CEO Steve Jobs published an article titled “Thoughts on Flash,” pointing out that with the development of HTML5, watching videos and other content, Adobe Flash will no longer be required. This has led to debate among developers, including the fact that while HTML5 offers enhanced functionality, developers must take into account how different browsers support different parts of the standard, as well as the functional differences between HTML5 and Flash.
In the second browser war, various browser manufacturers have taken improving the efficiency of JavaScript and supporting various new features of HTML5 as the main goal, promoting the healthy competition of browsers. In this battle, Chrome gains ground and grabs market share from IE. In 2013, Chrome surpassed Internet Explorer to become the browser with the largest market share. In 2016, Chrome accounted for half of the browser market.
Since 2008, developers have been excited by the continued support for new HTML5 features in browsers: WebWorker can make JavaScript run in multithreading, WebSocket can realize duplex communication between the front end and the background, WebGL can create Web3D web games…
HTML5 support for desktop browsers (2009-2017)
TypeScript public edition TypeScript is a free and open source programming language developed by Microsoft. It is a superset of JavaScript, and essentially adds optional static typing and class-based object-oriented programming to the language.
TypeScript extends JavaScript’s syntax so that any existing JavaScript program can work in TypeScript unchanged. TypeScript is designed for large application development and generates JavaScript at compile time to ensure compatibility.
On October 28, 2014, the W3C released the HTML 5.0 recommendation. Back in 1994, Netspace released an implementation of Server scripting in Netspace Enterprise Server called LiveWire, the first server-side JavaScript, Even before JavaScript in the browser. Netspace has been trying to use this Turing-complete language on the back end for an early time.
Microsoft built its own JScript language, compatible with JavaScript syntax, into Internet Explorer 3.0 in 1996. In early 1997, Microsoft included JScript in its server IIS 3.0, which is the scripting language we use in ASP.
In 1997, Netspace created the Rhino project to implement JavaScript in Java, and Rhino eventually evolved into a Java implementation-based JavaScript engine, maintained and open-source by Mozilla. Rhino provides scripting capabilities for Java applications. In December 2006, J2SE 6 introduced Rhino as the default Java scripting engine.
SpiderMonkey is a JavaScript engine implemented by Mozilla in C/C++ as a JavaScript compilation engine since Firefox 3.5 and used by projects such as CouchDB as a server-side scripting language.
As you can see, JavaScript can run on both the front and back ends from the start, but the treatment on the front and back ends is not the same. With the popularity of server-side technologies such as Java, PHP,.net, etc., server-side JavaScript has gradually declined compared with the increasing popularity of JavaScript in the front-end browser.
When Chrome was released in 2008, the efficient execution of its JavaScript engine V8 caught Ryan Dahl’s attention. In 2009, Ryan used Chrome’s V8 engine to create an asynchronous I/O framework based on event loops — Node.js was born.
Node.js has the following features:
Asynchronous I/O framework based on event loop to improve I/O throughput
Running in a single thread avoids the problem of multi-threaded variable synchronization
Make JavaScript can write background code, the front and back end programming language unity.
Node.js has attracted many front-end developers to develop server code in JavaScript, and its asynchronous programming style is also favored by developers. Node.js is great not only because it expands the possibilities of JavaScript on the server side, but also because it builds a huge ecosystem.
NPM was first released as a package management system for Node.js in January 2010. Developers can write Node.js modules according to CommonJS specifications and then publish them on NPM for other developers to use. Currently, NPM has about 400,000 modules, making it the largest package module management system in the world.
NPM ranked first in the number of common package management system modules in 2016
Node.js has also spawned projects such as Node-WebKit, making it possible to develop cross-platform desktop software using JavaScript. Node.js has brought endless imagination to developers, and JavaScript has a tendency to dominate the world.
With the popularity of HTML5, the front end is no longer a gadget in people’s eyes. The functions of desktop software realized in C/S have been gradually migrated to the front end, and the front-end code logic has gradually become complicated.
MV and other architectures that used to be used only in the background gradually come into use in the front end. The following lists some commonly used MV frameworks.
With the advent of these MV* frameworks, the Web evolved from a Web Site to a Web App, eventually leading to the emergence of complex Single Page applications.
Mobile Web and Hybrid apps With the widespread use of smartphones such as iOS and Android, mobile browsers have gradually increased their support for HTML5 features.
HTML5 support in mobile browsers (2009-2017)
The development of mobile browsers has led to the gradual diversion of traffic from PC to mobile platform, which is a new opportunity for the development of the Web. The Mobile Web is facing greater fragmentation and compatibility issues, with jQuery Mobile, Sencha Touch, Framework7, Ionic and other Mobile Web frameworks coming along.
Compared with Native Apps, mobile Web has more and more obvious advantages of low development cost, cross-platform and short release cycle. However, the performance and UI experience of Native Apps are far superior to mobile Web. The debate over the merits of mobile Web and Native App is becoming more and more intense. In the practice of countless developers, people find that the two are not substitutes, but should be combined to learn from each other and Hybrid technology is gradually recognized.
Hybrid technology refers to the organic combination of mobile and Web by using Web development technology and calling Native related API, which can not only reflect the advantages of short Web development cycle, but also provide users with Native experience.
According to the implementation principle, Hybrid technology can be divided into two categories:
The HTML 5 code is put into the WebView control of the Native App to run. The WebView provides the host environment for the Web, and the JavaScript code calls the Native API through the WebView. PhoneGap(Cordova) and AppCan are typical examples.
The HTML 5 code is compiled into different Native applications for different platforms, realizing Web development and Native deployment. Examples of this are Titanium and NativeScript.
Among a series of Hybrid technologies, it is difficult to find a solution suitable for all application scenarios, so we need to screen and integrate different technologies according to our own needs.
The JavaScript language is an implementation of the ECMAScript standard. As of February 2017, ECMAScript has been released in seven versions.
In June 1997, the ECMAScript 1.0 standard was released.
In June 1998, ECMAScript 2.0 was released.
In December 1999, ECMAScript 3.0 was released.
In October 2007, Mozilla’s proposed ECMAScript 4.0 draft, a major upgrade to 3.0, was released and was strongly opposed by major companies, including Yahoo, Microsoft, and Google. Brendan Eich, the creator of the JavaScript language, and Chris Wilson, the architect of IE, even got into a spat on the blog about backward compatibility with ES4, and eventually ECMA met and decided to scrap the DRAFT of ECMAScript 4.0. Some of the enhanced features were put into the ECMAScript 3.1 standard and some of the radical features in the original ECMAScript 4.0 draft were put into the later standard without compromising backwards compatibility. Soon, ECMAScript 3.1 was renamed ECMAScript 5.
ECMAScript 5 was released in December 2009 in line with the ‘Don’t break the Web’ principle. Added strict mode, property getters, setters, etc.
In June 2011, ECMAScript 5.1 was released.
In June 2015, ECMAScript 6.0 was released. This version adds many new syntax, Includes support for let, const, Arrow function, Class, Module, Promise, Iterator, Generator, Set, Map, Async, Symbol, Proxy, Reflect, Decorator, etc. The TC39 Committee plans to release a new version of ECMAScript every year, so ECMAScript 6.0 was renamed ECMAScript 2015.
In June 2016, ECMAScript 2016 was released with partial enhancements to ECMAScript 2015.
Of the various versions of ECMAScript, ECMAScript 6.0 is undoubtedly the most notable, adding so many new features that it expands JavaScript syntax and capabilities so much that many browsers only support some of the new features in ES6. Babel and TypeScript became popular, writing ES6 code and compiling it into JavaScript supported by browsers like ES5 using Babel or TypeScript.
With the release of a new version of ECMAScript every year, there is no doubt that browser vendors will continue to inject new functionality and features into JavaScript, and JavaScript is on the right track for rapid growth.
The resources
A brief history of front-end development
Front-end development history