ES6 at PayPal

ES6 at PayPalEarly Learnings

Why ES6?

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”));

SYNTACTIC SUGAR

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 = {

name: “Simon McKenzie”,

age: 24,

devices: {

iphone: true,

galaxyS3: true

}

};

var name = person.name,

age = person.age,

iphone = person.devices.iphone;

Destructuring

var person = {

name: “Simon McKenzie”,

age: 24,

devices: {

iphone: true,

galaxyS3: true

}

};

var { name, age, devices: { iphone } } = person;

Real-life Example

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,

showAddress = code.indexOf('ADDRESS') !== -1;

this.set({

user: data.user,

showAddress: showAddress,

showDOB: showDOB

});

}

/* … */

}

handleServiceErrors: function(model, { error: { code = ‘’ }, data = {} }) {

if (code.indexOf(‘identity') !== -1) {

let showDOB = code.indexOf('DOB') !== -1,

showAddress = code.indexOf('ADDRESS') !== -1;

this.set({

user: data.user,

showAddress: showAddress,

showDOB: showDOB

});

}

/* … */

}

handleServiceErrors: function(model, { error: { code = ‘’ }, data = {} }) {

if (code.indexOf(‘identity') !== -1) {

this.set({

user: data.user,

showAddress: code.indexOf('ADDRESS') !== -1,

showDOB: code.indexOf('DOB') !== -1

});

}

/* … */

}

handleServiceErrors: function(model, { error: { code = ‘’ }, data = {} }) {

if (code.includes('identity')) {

this.set({

user: data.user,

showDOB: code.includes('DOB'),

showAddress: code.includes('ADDRESS')

});

}

/* … */

}

SUGAR IS AN EASY SELL

Adding ES6 to your

infrastructure is

not complicated.

It’s super easy.

npm install 6to5

{

“scripts”: {

“start”: “npm run compile && node dist/app”,

“compile”: “6to5 —-out-dir dist src”

}

}

Update package.json

npm start

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!

It’s that simple.

Use ES6 Today

The End

@xjamundx

Demos: https://github.com/xjamundx/es6-test

What about io.js?

What about JSHint?

How about the front-

end?

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

header.jsheader.es6

IDE Support