ES6 at PayPal

ES6 standardizes
common practices.

ES6 helps us write
more expressive code.

Expressive code is
easier to understand.

// create a world with no people
var world = { people: [] };
// make it easy to populate the world
world.populate = function () {
for (var i = 0; i < arguments.length; i++) {
world.people.push(arguments[i]);
}
}
// add some people to the world
world.populate(new Person(“Sally”), new Person(“Joan”));

// create a world with no people
var world = { people: [] };
// makes it easier to populate the world
world.populate = function (...people) {
world.people.push(...people);
}
// add some people to the world
world.populate(new Person(“Sally”), new Person(“Joan”));

ES6 Basics
• block scope (let and const)
• default parameters
• destructuring

Block Scope
// es6
let name = getName();
if (name === “jamund”) {
let emotion = “happy”;
makePeople(emotion);
}
// es5 version
var name = getName(),
emotion;
if (name === “jamund”) {
emotion = “happy”;
makePeople(emotion);
}

// let fixes the problem
for (let i = 0; i < 5; i++) {
process.nextTick(function() {
console.log(i); // 0 1 2 3 4
});
}
And then there’s the old
async loop problem
// this happens from time to time
for (var i = 0; i < 5; i++) {
process.nextTick(function() {
console.log(i); // 5 5 5 5 5
});
}

Default Parameters
function printAge(a = 10) {
console.log(a);
}
printAge(); // “10”
printAge(20); // “20”

Default Parameters
function validate(model) {
model = model || this.toJSON();
return model.age >= 21;
}
function validate(model = this.toJSON()) {
return model.age >= 21;
}

Destructuring
var { EventEmitter } = require(“events");
var { map, each } = require(“underscore”);

Destructuring
var person = {
name: “Simon McKenzie”,
age: 24
};
var { name, age } = person;

Destructuring
var person = {
age: 24,
devices: {
iphone: true,
galaxyS3: true
}
};
var name = person.name,
age = person.age,
iphone = person.devices.iphone;

Destructuring
var person = {
age: 24,
devices: {
iphone: true,
galaxyS3: true
}
};
var { name, age, devices: { iphone } } = person;

handleServiceErrors: function(model, response) {
var error = response.error,
data = (response && response.data) || {},
code = error.code || '',
showDOB,
showAddress;
if (code.indexOf('identity') !== -1) {
showDOB = code.indexOf('DOB') !== -1;
showAddress = code.indexOf('ADDRESS') !== -1;
this.set({
user: data.user,
showAddress: showAddress,
showDOB: showDOB
});
}
/* … */
}

handleServiceErrors: function(model, response) {
var error = response.error,
data = (response && response.data) || {},
code = error.code || ‘';
if (code.indexOf('identity') !== -1) {
let showDOB = code.indexOf('DOB') !== -1,
this.set({
user: data.user,
showDOB: showDOB
});
}
/* … */
}

handleServiceErrors: function(model, { error: { code = ‘’ }, data = {} }) {
if (code.indexOf(‘identity') !== -1) {
let showDOB = code.indexOf('DOB') !== -1,
this.set({
user: data.user,
showDOB: showDOB
});
}
/* … */
}

if (code.indexOf(‘identity') !== -1) {
this.set({
user: data.user,
showAddress: code.indexOf('ADDRESS') !== -1,
showDOB: code.indexOf('DOB') !== -1
});
}
/* … */
}

if (code.includes('identity')) {
this.set({
user: data.user,
showDOB: code.includes('DOB'),
showAddress: code.includes('ADDRESS')
});
}
/* … */
}

Adding ES6 to your
infrastructure is
not complicated.

{
“scripts”: {
“start”: “npm run compile && node dist/app”,
“compile”: “6to5 —-out-dir dist src”
}
}
Update package.json

Error: where am i?
at /Users/jamuferguson/dev/es6-test/dist/routes.js:20:34
at process._tickCallback (node.js:442:13)
Wrong path :(
Wrong line number :(

Did you know node has
source maps?

Update package.json
{
“scripts”: {
“start”: “npm run compile && node dist/app”,
“compile”: “6to5 -—source-maps —-out-dir dist src”
}
}

require(‘source-map-support’).install()

Error: where am i?
at /Users/jamuferguson/dev/es6-test/src/routes.js:15:34
at process._tickCallback (node.js:442:13)
Right path!
Right line number!

The End
@xjamundx
Demos: https://github.com/xjamundx/es6-test

Front-end
• Our front-end code takes about 1s to build using 6to5
• For development mode we use a custom middleware
that transpiles silently in the in the background
• 2 step process to opt-in to ES6

ES6 at PayPal

More Related Content

ES6 at PayPal

Editor's Notes