ES6 is coming and it’s chock-full of really amazing features. PayPal recently started adopting certain ES6 features and Jamund will show what parts of the language they are using, how they are able to use it today and the performance impact.

1. ES6 at PayPal
Early Learnings

2. Why ES6?

3. ES6 standardizes
common practices.

4. ES6 helps us write
more expressive code.

5. Expressive code is
easier to understand.

6. // 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”));

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

8. SYNTACTIC SUGAR

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

10. 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);
}

11. // 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
});
}

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

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

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

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

16. Destructuring
var person = {
name: “Simon McKenzie”,
age: 24,
devices: {
iphone: true,
galaxyS3: true
}
};
var name = person.name,
age = person.age,
iphone = person.devices.iphone;

17. Destructuring
var person = {
name: “Simon McKenzie”,
age: 24,
devices: {
iphone: true,
galaxyS3: true
}
};
var { name, age, devices: { iphone } } = person;

18. Real-life Example

19. 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
});
}
/* … */
}

20. 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
});
}
/* … */
}

21. 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
});
}
/* … */
}

22. 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
});
}
/* … */
}

23. handleServiceErrors: function(model, { error: { code = ‘’ }, data = {} }) {
if (code.includes('identity')) {
this.set({
user: data.user,
showDOB: code.includes('DOB'),
showAddress: code.includes('ADDRESS')
});
}
/* … */
}

24. SUGAR IS AN EASY SELL

25. Adding ES6 to your
infrastructure is
not complicated.

26. It’s super easy.

27. npm install 6to5

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

29. npm start

30. 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 :(

31. Did you know node has
source maps?

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

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

34. 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!

35. It’s that simple.

36. Use ES6 Today

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

38. What about io.js?

41. What about JSHint?

42. How about the front-
end?

43. 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

44. header.jsheader.es6

45. IDE Support