Fabrício Matté
Web developer, open source projects contributor and Stack Overflow citizen.
The new era
Fabrício Matté
twitter.com/Ult_Combo
github.com/UltCombo
Dynamic object-oriented general-purpose programming language.
The scripting language of the Web.
!=
A platform to run JavaScript.
Asynchronous event-driven, non-blocking I/O model.
The package manager for JavaScript.
Over 180,000 public packages.
Build cross platform desktop apps with web technologies.
Use HTML, CSS, and JavaScript with Chromium and Node.js to build your app.
The current official JavaScript standard, supported in all major JS engines.
The next edition of the JavaScript standard.
Feature-complete, frozen, approved, official publication scheduled to June 2015.
Code name for Post-ECMAScript 5.1 work.
(ECMAScript 2015 and beyond)
Refers to the next version of the spec., or features that are not part of an official publication yet.
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'
};
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();
});
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
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 });
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 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
Babel: installable via Package Control
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)
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.
Do not pollute or rely on the global scope — avoid unexpected bugs.
But... polyfills are global.
What if:
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) => {/*...*/});
Babel + ESLint + Mocha + modularity + incremental builds.
Incremental build:
(ECMAScript twenty double-x)
(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
Fabrício Matté
twitter.com/Ult_Combo
github.com/UltCombo
https://slides.com/fabriciomatte/javascript
By Fabrício Matté
#JavaScript #nodejs #iojs #es6 #es2015 #es20xx
Web developer, open source projects contributor and Stack Overflow citizen.