Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Identity in the Future of Embeddables & Wearables
Next
Download to read offline and view in fullscreen.

Share

ES6 at PayPal

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

ES6 at PayPal

  1. 1. ES6 at PayPal Early Learnings
  2. 2. Why ES6?
  3. 3. ES6 standardizes common practices.
  4. 4. ES6 helps us write more expressive code.
  5. 5. Expressive code is easier to understand.
  6. 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. 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. 8. SYNTACTIC SUGAR
  9. 9. ES6 Basics • block scope (let and const) • default parameters • destructuring
  10. 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. 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. 12. Default Parameters function printAge(a = 10) { console.log(a); } printAge(); // “10” printAge(20); // “20”
  13. 13. Default Parameters function validate(model) { model = model || this.toJSON(); return model.age >= 21; } function validate(model = this.toJSON()) { return model.age >= 21; }
  14. 14. Destructuring var { EventEmitter } = require(“events"); var { map, each } = require(“underscore”);
  15. 15. Destructuring var person = { name: “Simon McKenzie”, age: 24 }; var { name, age } = person;
  16. 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. 17. Destructuring var person = { name: “Simon McKenzie”, age: 24, devices: { iphone: true, galaxyS3: true } }; var { name, age, devices: { iphone } } = person;
  18. 18. Real-life Example
  19. 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. 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. 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. 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. 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. 24. SUGAR IS AN EASY SELL
  25. 25. Adding ES6 to your infrastructure is not complicated.
  26. 26. It’s super easy.
  27. 27. npm install 6to5
  28. 28. { “scripts”: { “start”: “npm run compile && node dist/app”, “compile”: “6to5 —-out-dir dist src” } } Update package.json
  29. 29. npm start
  30. 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. 31. Did you know node has source maps?
  32. 32. Update package.json { “scripts”: { “start”: “npm run compile && node dist/app”, “compile”: “6to5 -—source-maps —-out-dir dist src” } }
  33. 33. require(‘source-map-support’).install()
  34. 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. 35. It’s that simple.
  36. 36. Use ES6 Today
  37. 37. The End @xjamundx Demos: https://github.com/xjamundx/es6-test
  38. 38. What about io.js?
  39. 39. What about JSHint?
  40. 40. How about the front- end?
  41. 41. 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
  42. 42. header.jsheader.es6
  43. 43. IDE Support
  • thomas37266454

    May. 21, 2015
  • kamiyam

    Apr. 16, 2015
  • oameya

    Feb. 17, 2015
  • BrandonDoran

    Feb. 16, 2015
  • syuichitsuji

    Feb. 13, 2015
  • g13n

    Feb. 12, 2015
  • takueof

    Feb. 12, 2015
  • kawa0117

    Feb. 11, 2015

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.

Views

Total views

3,336

On Slideshare

0

From embeds

0

Number of embeds

47

Actions

Downloads

11

Shares

0

Comments

0

Likes

8

×