ES6 at PayPal

An internal talk given at PayPal about how to take advantage of ES6 in our Kraken/Express apps.

Transcript

1. ES6 at PayPal
2. Why are you here? » Already familiar with ES6? » Using ES6 every day » Just learning node? » New to JavaScript? » ???
3. A LITTLE HISTORY OF JavaScript
4. JavaScript was created in 1995
5. European Computer Manufacturers Association adopted JavaScript in 1997 calling it EcmaScript
6. We still call it JavaScript though...
7. By 1999 EcmaScript was on version 3 and was being supported IE6+
8. EcamScript 3 Example var states = { "CA": "California", "WA": "Washington" }; for (var state in states) { if (states.hasOwnProperty(state)) { console.log(state); // "CA", "WA" } }
9. 10 Years of Sadness
10. EcmaScript 5 » Finalized in late 2009 » Includes things like Object.keys(), Object.create() and Array.forEach() » As well as standardizing JSON » A lot of cool HTML5 features came out around this time including CSS3 and much of what is known as HTML5 (localStorage, Canvas, etc.)
11. EcamScript 5 Example var states = { "CA": "California", "WA": "Washington" }; Object.keys(states).forEach(function(state) { console.log(state); // "CA", "WA" });
12. JavaScript Today
14. JavaScript Today let states = { "CA": "California", "WA": "Washington" }; Object.keys(states) .forEach(state => console.log(state)); // "CA", "WA"
15. Syntactic Sugar
16. Let's Get Started
17. Default Parameters
18. Default Parameters (ES5) $.fn.makeJump = function(height) { height = height || 50; $(this).css({ top: -1 * height, position: "relative" }); }; // make the chickens jump $(".chickens").makeJump();
19. Default Parameters (ES6) $.fn.makeJump = function(height = 50) { $(this).css({ top: -1 * height, position: "relative" }); }; // make the chickens jump $(".chickens").makeJump();
20. Template Literals
21. Anytime you need to concatenate strings together consider using template literals instead. var name = first + ' ' + last; magically becomes: var name = `${first} ${last}`;
22. Here's another handy use for template literals: var x = ` I have a wonderful block of text here and I want it to span many many many lines `;
23. Destructuring
24. Destructuring Objects (ES5) // jquery example var data = $('body').data(), house = data.house, mouse = data.mouse;
25. Destructuring Objects (ES6) // jquery example var { house, mouse } = $('body').data();
26. Destructuring Objects (ES5) // node example var middleware = require('my-module').middleware;
27. Destructuring Objects (ES6) // node example var { middleware } = require('my-module');
28. Destructuring Arrays (ES5) // jquery example var columns = $(".column"), column1 = columns[0], column2 = columns[1];
29. Destructuring Arrays (ES6) // jquery example var [column1, column2] = $('.column');
30. Destructuring Arrays (ES5) // node example var file = fs.readFileSync('myFile.txt', 'utf8'); var contents = file.split('\n'); var line1 = contents[0]; var line2 = contents[1]; var line3 = contents[2]; var line5 = contents[4];
31. Destructuring Arrays (ES6) // node example var file = fs.readFileSync('myFile.txt', 'utf8'); var contents = file.split('\n'); var [line1,line2,line3,,line5] = contents;
32. Arrow Functions
33. Arrow Functions (ES5) var people = [ { name: "suzie", age: 26 }, { name: "joe", age 32 }, { name: "sally", age: 5 } ]; // var greetings = people.filter(function(person) { // return person.age > 18; // }) // .map(function(person) { // return "Hello " + person.name; // });
34. Arrow Functions (ES5) var people = [ { name: "suzie", age: 26 }, { name: "joe", age 32 }, { name: "sally", age: 5 } ]; var greetings = people.filter(function(person) { return person.age > 18; }) // .map(function(person) { // return "Hello " + person.name; // });
35. Arrow Functions (ES5) var people = [ { name: "suzie", age: 26 }, { name: "joe", age 32 }, { name: "sally", age: 5 } ]; var greetings = people.filter(function(person) { return person.age > 18; }).map(function(person) { return "Hello " + person.name; });
36. Arrow Functions (ES6) var people = [ { name: "suzie", age: 26 }, { name: "joe", age 32 }, { name: "sally", age: 5 } ]; var greetings = people .filter(person => person.age > 18) .map(person => "Hello " + person.name);
37. Arrow Functions (ES5) var self = this; $.get("/awesome/api", function(data) { self.doSomethingWith(data); });
38. Arrow Functions (ES6) $.get("/awesome/api", data => { this.doSomethingWith(data); });
39. Arrow Functions (ES5) $("button").click(function(event) { $(this).closest("form").submit(); });
40. Arrow Functions (ES6) $("button").click(event => { $(event.target).closest("form").submit(); });
41. Arrow Functions » No need to return in most cases » Parens generally required around params » Multi-line arrow funcs need curly brackets » To self-execute wrap in parens first
42. Arrow Function Examples var sayHi = () => console.log("hi"); var getName = (person) => person.name; var getName = person => person.name; var longThing = (one, two) => { return one * two; }; (x => console.log(x))("hey"); // self executing
43. All of the Above
44. Advanced Example (ES5) function getUser(id) { var id = id || USER_ID; $.get('/people/' + id, function(person) { var age = person.age; var names = person.name.split(' '); var first = names[0]; console.log(first + ' is ' + age + '.'); }); }
45. Advanced Example (ES5) function getUser(id) { var id = id || USER_ID; // $.get('/people/' + id, function(person) { // var age = person.age; // var names = person.name.split(' '); // var first = names[0]; // console.log(first + ' is ' + age + '.'); // }); }
46. Default Params (ES6) function getUser(id = USER_ID) { // $.get('/people/' + id, function(person) { // var age = person.age; // var names = person.name.split(' '); // var first = names[0]; // console.log(first + ' is ' + age + '.'); // }); }
47. Advanced Example function getUser(id = USER_ID) { $.get('/people/' + id, function(person) { var age = person.age; var names = person.name.split(' '); var first = names[0]; console.log(first + ' is ' + age + '.'); }); }
48. Destructuring Objects (ES6) function getUser(id = USER_ID) { $.get('/people/' + id, function(person) { var { name, age } = person; // var [first, last] = name.split(' '); // console.log(first + ' is ' + age + '.'); }); }
49. Destructuring Arrays (ES6) function getUser(id = USER_ID) { $.get('/people/' + id, function(person) { var { name, age } = person; var [first, last] = name.split(' '); // console.log(first + ' is ' + age + '.'); }); }
50. Combined Example function getUser(id = USER_ID) { $.get('/people/' + id, function(person) { var { name, age } = person; var [first, last] = name.split(' '); console.log(first + ' is ' + age + '.'); }); }
51. Arrow Functions(ES6) function getUser(id = USER_ID) { $.get('/people/' + id, (person) => { var { name, age } = person; var [first, last] = name.split(' '); console.log(first + ' is ' + age + '.'); }); }
52. Template Literals function getUser(id = USER_ID) { $.get(`/people/${id}`, (person) => { var { name, age } = person; var [first, last] = name.split(' '); console.log(`${first} is ${age}.`); }); }
53. amazing!
54. Promises
55. What are promises? Promises are an alternative way to deal with asynchronous code in JavaScript. They are composable and can help simplify error handling in while doing complex asynchronous operations.
56. Simple Callback Example readFile("data.txt", function(err, data) { if (err) { throw err; } console.log(data); });
57. Simple Promise Example readFile("data.txt").then(function(data) { console.log(data) });
58. Simple Promise Example readFile("data.txt").then(function(data) { console.log(data) }, function(err) { // handle error somehow });
59. There are a lot of promise implementations » Q » BlueBird » jQuery Deferred » Deferred.js » Vow » avow » ...
60. Promise Version $.get(`/people/${id}`).then((person) => { var { name, age } = person; var [first, last] = name.split(' '); console.log(`${first} is ${age}.`); });
61. What happens where there's a problem? $.get(`/people/${id}`).then((person) => { var { name, age } = person; var [first, last] = name.split(' '); console.log(`${first} is ${age}.`); }).fail(function() { console.log(`Could not retrieve person ${id}`); });
62. What if there's a problem inside our code? $.get(`/people/${id}`).then((person) => { var { name, age } = notPerson; // throws a ReferenceError // ... }).fail(function() { console.log(`Could not retrieve person ${id}`); });
63. What if there's a problem inside our code? $.get(`/people/${id}`).then((person) => { var { name, age } = notPerson; // throws a ReferenceError // ... }).catch(function() { // catch can handle both types of errors console.log(`Could not retrieve person ${id}`); });
64. catch() is coming in jQuery 3
65. Using catch with jQuery today // wrap $.get or $.ajax in Promise.resolve function get(url) { return Promise.resolve($.get(url)); } // reference the newly created function get("/my/url") .then(doSomething) .catch(allErrors);
66. Cool!
67. Rest / Spread // 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”));
68. Rest / Spread // 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”));
69. ES7 Object Spread // object literal let person = { name: "jamund", age: 24 }; // simple and fancy object merging... let me = { age: 32, ...person }
70. Array Methods [1,2,3].includes("1"); // goodbye .indexOf(1) >= 0 ["a","b","c"].find((item) => item === "a");
71. One more thing...
72. Modules
73. Modules Coming in many shapes & sizes
74. Module Pattern var MY_MODULE = (function($) { var x, y, z; return $.doSomething(); }(jQuery));
75. AMD Modules define(['jquery'], function($) { var x, y, z; return $.doSomething(); });
76. CommonJS Modules var $ = require('jquery'); var x, y, z; module.exports = $.doSomething();
77. ES6 MODULES: THE MODULE FORMAT TO END ALL MODULE FORMATS
78. ES6 Modules import $ from 'jquery'; var x, y, z; export default $.doSomething();
79. ES6 Modules (Examples) // export stuff in one file export var age = 32; export function printName() { console.log('Jamund Ferguson'); }; // in another file import { age, printName } from 'my-module'; import * as myThing from 'my-module'; printName(); // Jamund Ferguson console.log(age); // 32
80. Write Modular JavaScript
81. There's a lot of JavaScript these days Embrace It!
82. Using ES6 w/ Kraken
83. Babel & Kraken Apps Add a .babelrc file: { "presets": ["es2015"], "plugins": ["add-module-exports"] }
84. Babel & Kraken Apps Install some dependencies: npm i --save babel-core npm i --save babel-register npm i --save babel-preset-es2015 npm i --save babel-plugin-add-module-exports
85. Babel & Kraken Apps Add babel-register to your index.js file // Add ES6 Support require('babel-register');
86. Babel & Kraken Apps That's It!