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.

ES6 at PayPal

3,074 views

Published on

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.

Published in: Technology
  • MADE $30 ON MY FIRST DAY! Being a fresh graduate and having lots of free time, I stumbled upon your site when I was searching for work at home opportunities, good thing I did! Just on my first day of joining I already made $30! Now I'm averaging close to $80 a day just for filling out surveys! ◆◆◆ https://tinyurl.com/vd3y33w
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×