JavaScript.next
Workflow & toolingFabrí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:
- Watch files for changes.
- Lint and build only the affected files: compile added and changed files; remove built file when source is deleted.
- Run unit tests if there are no syntax errors, otherwise report the syntax errors.
- 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
Copy of es20xx
#JavaScript #nodejs #iojs #es6 #es2015 #es20xx
- 1,318