This is the first day of my participation in the More text Challenge. For details, see more text Challenge

Developers focus on creating things with technology, driving forward with innovation and product iteration; Hobbyists have a different perspective, and the strangeness of the industry inspires curiosity, trying to figure out the evolution of this thing from ancient times to the present.

Birth of the World Wide Web

“All I have to do is combine the hypertext system with the TRANSMISSION control protocol, the DOMAIN name system, and — dah! – The World Wide Web.”

With the rapid development of the ’70s and’ 80s, personal computers have become ubiquitous, and people enjoy the stand-alone world of editing documents, graphics, and games on their personal devices. Although the Internet has been around for a long time, its limited and complex dialing process and monotonous usage scenarios have failed to make it popular.

It wasn’t until 1991 that Tim Berners-Lee invented the World Wide Web, created the first browser and the first web server. Open a browser to the web and completely change the way people use the Internet.

Text on a web page is different from normal text. It can contain links that take you to another web page. These links are called hyperlinks. As awesome as that sounds, the type of text that can contain hyperlinks has a great name — Hypertext.

To be retrieved by hyperlinks, each web page needs a unique address, called a “uniform resource locator” (URL). For example, juejin.cn/frontend is a good URL. When you visit a site, the computer first does a DNS lookup to determine the IP address corresponding to the domain name. Then the browser opens a TCP connection with port 80 by default. After connecting to the Web server at the target address through TCP, we need to inform the server to return to the page corresponding to the path, which requires the application layer Protocol. Therefore, Tim proposed HTTP/1.0 (HyperText Transfer Protocol) as the Web communication Protocol. The server parses the HTTP content and returns the corresponding page. The request-response is complete.

What the browser gets is plain text encoded in ASCII or UTF-8. How do you distinguish between links and content? A Markup method was needed, so Tim developed The HyperText Markup Language (HTML). The browser parses the HTML to display the content, and “render” is complete.

World Wide Web + browser + web server, information interconnection has a foundation, the Internet era opened.

ECMAScript

In 1995, Netscape’s Brendan Eich was assigned by his company to create the JavaScript language in 10 days. A simple and easy to use programming language, it is responsible for the “quick start to achieve web interaction” mission birth.

It’s so extraordinary. C teaches basic grammar; Java language education it “everything is an object”, but did not teach “object-oriented” that set of martial arts experience, after all, for the pursuit of simple new friends too tedious; The Schema language tells it that functions should be “first class citizens”; Finally, the Self language taps it to simulate object-oriented programming with “prototype chain implementation inheritance.” This way, it can describe steps in sequence, it can abstract logic into functions that are called repeatedly, and it can handle “encapsulation, inheritance, and polymorphism.” Yes, it is a new language with procedural programming, object-oriented programming, and functional programming genes at the same time.

It’s so simple. Without specifying variable types, the JavaScript interpreter is flexible; You don’t need to know about memory allocation and reclamation; the JavaScript interpreter will do everything; Merge object-oriented programming without having to understand the concepts of classes, generics, overrides, overloads, interfaces, etc. The JavaScript interpreter simplifies a lot of work, allowing users to focus on rapid creation.

In 1997, to end the interusability of Netscape’s JavaScript, Microsoft’s JScript, and CEnvi’s ScriptEase, ECMA coordinated the formation of a working group to identify a common standard for web interaction languages: Ecma-262 standard and calls the standard language ECMAScript.

ECMAScript was first published in June 1997; ES3, released in 1999, added a number of language features such as regular expressions and exception handling; ES4, which was ready for release in 2008, was aborted because it changed too much for consensus; ES5, released in 2009, added strict mode, extended native objects (such as getters/setters), and clarified the vague specification of the previous version; In 2011, ES5.1 was released and became an ISO standard.

ECMAScript 2015

In 2015, the milestone arrived.

ECMAScript 2015 was released, also known as ES6, and it changed a lot:

  • Block scope sumconst/let
  • Class
  • Module
  • Arrow Function
  • Iterator and for... ofSpread syntax for iterable objects
  • Generator
  • Symbol
  • Promise
  • Proxy/Reflect
  • Template literals
  • Function parameter strengthening: Rest parameters, Default parameters
  • Deconstruction assignment
  • A collection ofMap/Set/WeakMap/WeakSet
  • Built-in object extensions
  • TypedArray: buffer for binary data
  • Optimize tail calls (not implemented on most platforms, however)

ECMAScript version formulation process

2015 was also a watershed for ECMAScript process normalization, starting in 2015:

  • The TECHNICAL Committee 39 (ECMA Technical Committee 39) is the organization responsible for the development and publication of the ECMAScript specification. Its members include the employees of major JS engine manufacturers and other reputable developers
  • The new version is named “ECMAScript+ year”
  • Determine the standard development process:
    • Stage 0: Strawman submits new feature descriptions as PR to github.com/tc39/ecma26… ;
    • Stage 1: Proposal, initially write standards and implement Demo or Polyfill; The purpose is to identify solutions as well as potential difficulties;
    • Stage 2: Draft, which initializes the specification description and requires two experimental implementations; The goal is to generate “syntax and semantics that are accurately described using formal language”;
    • Stage 3: Candidate, who completes the specification description and is confirmed by reviewers and ECMAScript specification editors; The purpose is to optimize and improve the specification;
    • Stage4: Finished, complete Test262 tests with at least two actual implementations (such as in V8, JavaScriptCore or SpiderMonkey), submitted PR to TC39 / ECMA262; The purpose is to confirm that the specification is ready to be added to the ECMAScript standard. Proposals that reach Stage4 are almost certain to appear in future versions, so the Stage4 proposal set is also called ES Next;
    • After passing the ECMA assembly vote, the proposal formally joins the standard

An overview of ECMAScript version iteration

ECMAScript 2016, a few new features and syntax:

  • Power operator2 * * 5
  • Array.prototype.includes

ECMAScript 2017 adds a few new features and syntax:

  • increaseasync/await
  • increaseObjectA static methodvalues/entries/getOwnPropertyDescriptors
  • increaseString paddingRelevant methods
  • removearguments.caller

ECMAScript 2018 has a few new features and syntax:

  • Asynchronous iterator
  • Object propertiesrest/spread
  • Promise.prototype.finally

ECMAScript 2019 adds a few new features and syntax:

  • Array.prototype.{flat,flatMap}
  • Object.fromEntries
  • increaseString trimmingRelevant methods

ECMAScript 2020, new features and syntax:

  • Add BigInt
  • The Optional Changing operator? .)
  • Nullish coalescing operator??)
  • String.prototype.matchAll
  • Promise.allSettled
  • globalThis

ECMAScript 2021: new features and syntax

  • WeakReferences
  • Logical Assignment
  • String.prototype.replaceAll
  • Promise.any
  • numeric separators

ECMAScript 2022

  • Example Add access permissions to class members
  • The top await

They encompass all the proposals of Stage 4, each of which has a description of the motivation, solution, mode of use, current status and can be a direct resource for tracking updates to the ES.

All current proposals can be queried in TC39 / Proposals.

Babel

With the iteration of ES version, each JS running platform will follow up the implementation. However, the pace of the platform is not completely consistent, and users may not update the platform in time, so code compatibility is required.

ECMAScript 6 Compatibility Table (kangax.github. IO) is a very good open source project. It lists the functional points of various ES versions and the support of various platforms.

Babel converts code written in ES6+ into equivalent, lower-version code, and parses the code into AST translation to generate object code. Babel can translate the syntax but not the API (built-in objects and object methods), which needs to be used in conjunction with the polyfill provided by core-JS and Regenerator-Runtime.

Thanks to open source projects like Babel, Core-JS, and ReGenerator, front-end developers are now able to implement upper-layer applications with the latest syntax and features without worrying about platform compatibility.

Present and Future

JavaScript is still a 90 generation youth, at first he has a simple and friendly personality, is loved by the public, of course, sometimes he also has some weird behavior, let a person exclamation he is not as mature as Java/C these big brothers; With the development of The Times, the hardware capability is rapidly growing, and JavaScript needs more powerful power to support large projects. Therefore, he is humble to learn the excellent design ideas of other languages, and at the same time, he tries to strengthen his own asynchronous characteristics, so as to meet the needs of The Times in an orderly way. All this has benefited from the continuous and orderly progress of the regulations.

Of course, it was always expected to do more, like java-like object-oriented support, static typing system, and so forth TypeScript. For example, the interpreter +JIT is not fast enough, the compiler is better, so there is WebAssembly. The front end community is always full of enthusiastic thinkers and doers, young and vibrant.

The resources

The Birth of Javascript – Ruan Yifeng’s blog (ruanyifeng.com)

Introduction to ECMAScript 6 – Getting Started (ruanyifeng.com)

Computer Science is the best Course in Computer science

The TC39 Process

How-we-work /champion. Md at Master · tc39/ How-we-work (github.com)