JavaScript.next

Workflow & tooling

Fabrício Matté

twitter.com/Ult_Combo

github.com/UltCombo

Terminology

The current official JavaScript standard, supported in all major JS engines.

ECMAScript 5.1 (ES5)

The next edition of the JavaScript standard.

Feature-complete, frozen, approved, official publication scheduled to June 2015.

ECMAScript 2015 (ES6)

Terminology

Code name for Post-ECMAScript 5.1 work.
(ECMAScript 2015 and beyond)

ECMAScript Harmony

Refers to the next version of the spec., or features that are not part of an official publication yet.

ECMAScript.next

ECMAScript 2015

Remove boilerplate, add syntactic sugar

  • Arrow functions
  • Class syntax
  • Enhanced object literals
  • Template strings
  • Default parameters
  • Rest Parameters
  • Destructuring parameters
  • Destructuring assignment
  • Spread operator
  • Binary and octal literals
  • Block scoping (let, const)
  • (Weak)Map + (Weak)Set
  • Modules
  • Symbols
  • Subclassable Built-ins
  • Unicode
  • Promises
  • Generators, iterators, for...of
  • Proxy and Reflect APIs
  • new Math, Number, String, Array and Object methods

New features and
built-ins

Enhanced object literals

var width = 500, height = 300;

var obj = { width: width, height: height };
var width = 500, height = 300;

var obj = { width, height };
var obj = {
    method: function() {
        // ...
    }
};
var obj = {
    method() {
        // ...
    }
};
var prop = 'blimineimer';
var obj = {};
obj[prop] = 'blibiribs';
var prop = 'blimineimer';
var obj = {
    [prop]: 'blibiribs'
};

Arrow functions

var odds = [1, 2, 3].filter(function(v) {
    return v % 2;
});
var odds = [1, 2, 3].filter(v => v % 2);
this.glimmer = function() {
    console.log('glimmer');
};
var that = this;
binner(function() {
    that.glimmer();
});
this.glimmer = () => {
    console.log('glimmer');
};

binner(() => {
    this.glimmer();
});

Default parameters

function f(x) {
    if (x === undefined) x = 42;
    console.log(x);
}

f();          // 42
f(undefined); // 42
f(10);        // 10
function f(x = 42) {
    console.log(x);
}


f();          // 42
f(undefined); // 42
f(10);        // 10

Destructuring

function slider(opt) {
    console.log(opt.width, opt.height);
}

slider({ width: 500, height: 300 });
function slider({ width, height }) {
    console.log(width, height);
}

slider({ width: 500, height: 300 });

Destructuring + default

function slider(opt) {
  if (opt === undefined) opt = {};
  if (opt.width === undefined) opt.width = 500;
  if (opt.height === undefined) opt.height = 300;

  console.log(width, height);
}

slider();
slider({ width: 600 });
function slider({ width=500, height=300 } = {}) {
  console.log(width, height);
}





slider();
slider({ width: 600 });

Async functions

async function compileLess(lessIndexPath, cssDir) {
    const lessInput = await fs.readFileAsync(lessIndexPath, { encoding: 'utf8' });
    const { css } = await less.render(lessInput, { filename: lessIndexPath });
    await fs.writeFileAsync(path.join(cssDir, 'main.css'), css);
}
function compileLess(lessIndexPath, cssDir) {
    return fs.readFileAsync(lessIndexPath, { encoding: 'utf8' })
        .then(function(lessInput) {
            return less.render(lessInput, { filename: lessIndexPath });
        })
        .then(function({ css }) {
            return fs.writeFileAsync(path.join(cssDir, 'main.css'), css);
        });
}

“ Use next generation JavaScript, today. ”

— Babel

(previously 6to5)

Supports most of ECMAScript 2015, plus features proposed for post-ES2015 and React's JSX.

https://github.com/babel/babel-sublime

Syntax highlighting

Babel: installable via Package Control

ESLint

Fully pluggable linting tool.

babel-eslint: plug Babel's parser into ESLint.

No more worries about varying ES.next support in compiler vs linter!

Babel vs linting tools (other than ESLint)

Babel and ESLint (with babel-eslint)

Unit tests

Automate testing = - time testing * productivity - bugs²

BDD or TDD does not matter, the unit test framework does not matter, just write good tests that cover your use cases.

Modularity

Do not pollute or rely on the global scope — avoid unexpected bugs.

But... polyfills are global.

What if:

  • One of the target environments has an incomplete feature implementation
  • The consumer includes other libraries which depend on different versions of the global polyfill

Modularity

Babel's `runtime` transformer helps here.

"use strict";

var _Object$assign = require("babel-runtime/core-js/object/assign")["default"];

var _Promise = require("babel-runtime/core-js/promise")["default"];

_Object$assign(dest, src);
var p = new _Promise(function (fulfill, reject) {/*...*/});
Object.assign(dest, src);
const p = new Promise((fulfill, reject) => {/*...*/});

es20xx

Babel + ESLint + Mocha + modularity + incremental builds.

Incremental build:

  1. Watch files for changes.
  2. Lint and build only the affected files: compile added and changed files; remove built file when source is deleted.
  3. Run unit tests if there are no syntax errors, otherwise report the syntax errors.
  4. Repeat indefinitely.

(ECMAScript twenty double-x)

es20xx

(ECMAScript twenty double-x) 

npm i -g slush slush-es20xx
mkdir my-project
cd my-project
slush es20xx # start a new project
npm run dev  # build and watch

Demo

Thanks!

Fabrício Matté

twitter.com/Ult_Combo

github.com/UltCombo

https://slides.com/fabriciomatte/es20xx

References

  • https://github.com/JSRocksHQ/slush-es20xx
  • https://github.com/lukehoban/es6features#readme
  • http://babeljs.io/
  • http://eslint.org/

Copy of es20xx

By Denis Stoyanov

Source: Fabrício Matté

Copy of es20xx

#JavaScript #nodejs #iojs #es6 #es2015 #es20xx

  • 1,310

More from Denis Stoyanov