background

Since Browserify was born in 2011, build and engineering have become an integral part of the front-end developer’s development ecosystem with the spread of build tools like WebPack/rollup/Parcel that we now use more widely. In daily development, we are used to following new features in ESMAScript or TypeScript with simpler syntax and more efficient execution. A typical example is class in ES6:

class Person {
  constructor(name) {
    this.name = name;
  }

  greeting() {
    return `Hi, this is The ${this.name}. `; }}class Man extends Person {}
Copy the code

But I’m sure most people would crash if they had to use constructor functions and prototype chains to declare two classes and implement inheritance:

function Person(name) {
  this.name = name;
}

Person.prototype.greeting = function() {
  return `Hi, this is The ${this.name}. `;
}

function Man(name) {
  Persona.call(this, name);
}
Man.prototype = Object.assign(Person.prototype);
Man.prototype.constructor = Man;
Copy the code

The problem is that these improved features don’t work 100% in all browsers, such as Internet Explorer 8. From this background, a compiler like 6to5 was born to help us compile ES6 syntax into ES5 syntax at development time and execute it in the browser. Of course, 6to5 also evolved with us to become Babel.

But Babel isn’t a panacea. While it helps with the syntax, it also has some side effects. For example, compiled code often inserts built-in functions or pollyfills, resulting in a huge increase in code size. Our source code implementation for Class Person above totals 155B, and when compiled into ES5 code using Babel, it becomes 2.7K!

From what we thinkThe next generation of JavaScript standardsIt has been more than five years since ECMAScript 2015. ECMAScript continues to update the language standard every year, and browser vendors have been involved in the specification of the standard as well as the support for the native implementation of the new language standard in browsers. I don’t know if you’ve noticed, but on this day in 2021,classBrowser support has reached95%Supported by all major browsersclassFeatures:

A feature like Class is a waste of building, storing, transferring, or executing larger, slower compiled ES5 code if the browser already supports it. Which brings us to the subject of this article: Modern JavaScript.

What is Modern JavaScript

Modern JavaScript does not refer to a specific version of the ECMAScript standard, but rather to a collection of features already supported by Modern browsers.

Common modern browsers include Chrome, Edge, Firefox and Safari, which account for over 90% of the browser market share. In addition, there are other browser implementations based on the same rendering engine as these browsers, such as UC and QQ, which account for around 5% of the market share. This means that some of our most widely used features are 95% supported, including:

  • classclass
  • Arrow functionarrow function
  • The constructorgenerator
  • Block-level scopelet / const
  • deconstructiondestructuring
  • Rest parametersrest and spread parameters
  • Object shorthandobject shorthand
  • Async functionasync / await

Modern JavaScript is not a fixed set of features, it dynamically follows the support we define for Modern browsers. For now, ES2017 is the closest thing to a Modern JavaScript standard.

Legacy JavaScript

For Modern JavaScript, the result of compiling ES5 can be called Legacy JavaScript, which is the result of what we ask of the browser-container.

In modern browsers, this conversion is not worth the cost: we increase our code support from 95% to 98% by compiling, yet it gives us a 20% increase in code size and a lower code execution efficiency. Also, with node_modules hell, the effect can be exponential.

How to transform the

  1. The browser

<script type="module" />

Modern browsers support ES6+ code directly in the browser via , so we can load Modern JavaScript in this way for Modern browsers, while a small number of older browsers rely on fallback logic. Load and execute Legacy JavaScript.

<script type="module" src="https://cdn/modern.js" />
<script nomodule src="https://cdn/ledacy.js" />
Copy the code
  1. NPM

{ "exports": "./modern.js" }

In the [email protected] version, the exports field in package.json was introduced to enhance the package entry that was previously declared only through main.

{
  "main": "./index.js"."exports": {
    ".": "./index.js"."./submodule": {
	  "import": "./submodule/index.js"."require": "./submodule/index.cjs"}}}Copy the code

With the entry declaration above we can implement the exposed default entry and subModule entry, and subModule can provide different implementations depending on whether require or import:

import pkg from 'pkg';

import submodule from 'pkg/submodule';
const submodule = require('pkg/submodule');
Copy the code

Exports, in addition to providing powerful features such as multi-entry and conditional entry, can also be used as a basis for Modern JavaScript implementation as [email protected] already supports ES2019, So if we detect modules in node_modules that offer exports entry at build time, we can build our Modern JavaScript Bundle for them individually.

  1. Bundle

With support for Modern JavaScript features in both the browser and the NPM package, we have solved the export problem and can fallback to Legacy JavaScript execution in unsupported scenarios.

Then it’s just a matter of resource building, providing Modern JavaScript bundles that are 95% executable for Modern browsers and Legacy JavaScript bundles for fallback’s older browsers.

Using Babel with different Browserslist targets is easy to achieve. There are also ready-made plug-ins that can be used directly, such as optimize-plugin, babel-ESm-plugin, or Babel-preset-modern-Browsers.

In terms of construction mode, we can choose to build Modern Bundle and Legacy Bundle respectively from source code:

Or build Modern Bundle from source and Legacy Bundle from Modern Bundle:

Web. Dev /publish-mod…

More like an idea than a technology, Modern JavaScript allows developers, users, and even more, The improvements in storage, delivery, and execution that Modern JavaScript brings can also save energy and reduce emissions for the planet.

Break free from ES5 and move to Modern JavaScript!

related

  • Transitioning to modern JavaScript
  • Publish, ship, and install modern JavaScript for faster applications
  • Serve modern code to modern browsers for faster page loads
  • Bringing Modern JavaScript to Libraries

We are the team of CCO Technology Department of Alibaba. We hope that more students will join us to do more meaningful things. React stack, experience with Typescript preferred, Base nanjing or Hangzhou. Interested parties contact: [email protected]