ES6 at PayPal - Speaker Deck

Slide 1

Slide 1 text

ES6 at PayPal

Slide 2

Slide 2 text

Why are you here? » Already familiar with ES6? » Using ES6 every day » Just learning node? » New to JavaScript? » ???

Slide 3

Slide 3 text

A LITTLE HISTORY OF JavaScript

Slide 4

Slide 4 text

JavaScript was created in 1995

Slide 5

Slide 5 text

European Computer Manufacturers Association adopted JavaScript in 1997 calling it EcmaScript

Slide 6

Slide 6 text

We still call it JavaScript though...

Slide 7

Slide 7 text

By 1999 EcmaScript was on version 3 and was being supported IE6+

Slide 8

Slide 8 text

EcamScript 3 Example var states = { "CA": "California", "WA": "Washington" }; for (var state in states) { if (states.hasOwnProperty(state)) { console.log(state); // "CA", "WA" } }

Slide 9

Slide 9 text

10 Years of Sadness

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

EcamScript 5 Example var states = { "CA": "California", "WA": "Washington" }; Object.keys(states).forEach(function(state) { console.log(state); // "CA", "WA" });

Slide 12

Slide 12 text

JavaScript Today

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

JavaScript Today let states = { "CA": "California", "WA": "Washington" }; Object.keys(states) .forEach(state => console.log(state)); // "CA", "WA"

Slide 15

Slide 15 text

Syntactic Sugar

Slide 16

Slide 16 text

Let's Get Started

Slide 17

Slide 17 text

Default Parameters

Slide 18

Slide 18 text

Default Parameters (ES5) $.fn.makeJump = function(height) { height = height || 50; $(this).css({ top: -1 * height, position: "relative" }); }; // make the chickens jump $(".chickens").makeJump();

Slide 19

Slide 19 text

Default Parameters (ES6) $.fn.makeJump = function(height = 50) { $(this).css({ top: -1 * height, position: "relative" }); }; // make the chickens jump $(".chickens").makeJump();

Slide 20

Slide 20 text

Template Literals

Slide 21

Slide 21 text

Anytime you need to concatenate strings together consider using template literals instead. var name = ﬁrst + ' ' + last; magically becomes: var name = `${ﬁrst} ${last}`;

Slide 22

Slide 22 text

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 `;

Slide 23

Slide 23 text

Destructuring

Slide 24

Slide 24 text

Destructuring Objects (ES5) // jquery example var data = $('body').data(), house = data.house, mouse = data.mouse;

Slide 25

Slide 25 text

Destructuring Objects (ES6) // jquery example var { house, mouse } = $('body').data();

Slide 26

Slide 26 text

Destructuring Objects (ES5) // node example var middleware = require('my-module').middleware;

Slide 27

Slide 27 text

Destructuring Objects (ES6) // node example var { middleware } = require('my-module');

Slide 28

Slide 28 text

Destructuring Arrays (ES5) // jquery example var columns = $(".column"), column1 = columns[0], column2 = columns[1];

Slide 29

Slide 29 text

Destructuring Arrays (ES6) // jquery example var [column1, column2] = $('.column');

Slide 30

Slide 30 text

Destructuring Arrays (ES5) // node example var ﬁle = fs.readFileSync('myFile.txt', 'utf8'); var contents = ﬁle.split('\n'); var line1 = contents[0]; var line2 = contents[1]; var line3 = contents[2]; var line5 = contents[4];

Slide 31

Slide 31 text

Destructuring Arrays (ES6) // node example var ﬁle = fs.readFileSync('myFile.txt', 'utf8'); var contents = ﬁle.split('\n'); var [line1,line2,line3,,line5] = contents;

Slide 32

Slide 32 text

Arrow Functions

Slide 33

Slide 33 text

Arrow Functions (ES5) var people = [ { name: "suzie", age: 26 }, { name: "joe", age 32 }, { name: "sally", age: 5 } ]; // var greetings = people.ﬁlter(function(person) { // return person.age > 18; // }) // .map(function(person) { // return "Hello " + person.name; // });

Slide 34

Slide 34 text

Arrow Functions (ES5) var people = [ { name: "suzie", age: 26 }, { name: "joe", age 32 }, { name: "sally", age: 5 } ]; var greetings = people.ﬁlter(function(person) { return person.age > 18; }) // .map(function(person) { // return "Hello " + person.name; // });

Slide 35

Slide 35 text

Arrow Functions (ES5) var people = [ { name: "suzie", age: 26 }, { name: "joe", age 32 }, { name: "sally", age: 5 } ]; var greetings = people.ﬁlter(function(person) { return person.age > 18; }).map(function(person) { return "Hello " + person.name; });

Slide 36

Slide 36 text

Arrow Functions (ES6) var people = [ { name: "suzie", age: 26 }, { name: "joe", age 32 }, { name: "sally", age: 5 } ]; var greetings = people .ﬁlter(person => person.age > 18) .map(person => "Hello " + person.name);

Slide 37

Slide 37 text

Arrow Functions (ES5) var self = this; $.get("/awesome/api", function(data) { self.doSomethingWith(data); });

Slide 38

Slide 38 text

Arrow Functions (ES6) $.get("/awesome/api", data => { this.doSomethingWith(data); });

Slide 39

Slide 39 text

Arrow Functions (ES5) $("button").click(function(event) { $(this).closest("form").submit(); });

Slide 40

Slide 40 text

Arrow Functions (ES6) $("button").click(event => { $(event.target).closest("form").submit(); });

Slide 41

Slide 41 text

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 ﬁrst

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

All of the Above

Slide 44

Slide 44 text

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 ﬁrst = names[0]; console.log(ﬁrst + ' is ' + age + '.'); }); }

Slide 45

Slide 45 text

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 ﬁrst = names[0]; // console.log(ﬁrst + ' is ' + age + '.'); // }); }

Slide 46

Slide 46 text

Default Params (ES6) function getUser(id = USER_ID) { // $.get('/people/' + id, function(person) { // var age = person.age; // var names = person.name.split(' '); // var ﬁrst = names[0]; // console.log(ﬁrst + ' is ' + age + '.'); // }); }

Slide 47

Slide 47 text

Advanced Example function getUser(id = USER_ID) { $.get('/people/' + id, function(person) { var age = person.age; var names = person.name.split(' '); var ﬁrst = names[0]; console.log(ﬁrst + ' is ' + age + '.'); }); }

Slide 48

Slide 48 text

Destructuring Objects (ES6) function getUser(id = USER_ID) { $.get('/people/' + id, function(person) { var { name, age } = person; // var [ﬁrst, last] = name.split(' '); // console.log(ﬁrst + ' is ' + age + '.'); }); }

Slide 49

Slide 49 text

Destructuring Arrays (ES6) function getUser(id = USER_ID) { $.get('/people/' + id, function(person) { var { name, age } = person; var [ﬁrst, last] = name.split(' '); // console.log(ﬁrst + ' is ' + age + '.'); }); }

Slide 50

Slide 50 text

Combined Example function getUser(id = USER_ID) { $.get('/people/' + id, function(person) { var { name, age } = person; var [ﬁrst, last] = name.split(' '); console.log(ﬁrst + ' is ' + age + '.'); }); }

Slide 51

Slide 51 text

Arrow Functions(ES6) function getUser(id = USER_ID) { $.get('/people/' + id, (person) => { var { name, age } = person; var [ﬁrst, last] = name.split(' '); console.log(ﬁrst + ' is ' + age + '.'); }); }

Slide 52

Slide 52 text

Template Literals function getUser(id = USER_ID) { $.get(`/people/${id}`, (person) => { var { name, age } = person; var [ﬁrst, last] = name.split(' '); console.log(`${ﬁrst} is ${age}.`); }); }

Slide 53

Slide 53 text

amazing!

Slide 54

Slide 54 text

Promises

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

Simple Callback Example readFile("data.txt", function(err, data) { if (err) { throw err; } console.log(data); });

Slide 57

Slide 57 text

Simple Promise Example readFile("data.txt").then(function(data) { console.log(data) });

Slide 58

Slide 58 text

Simple Promise Example readFile("data.txt").then(function(data) { console.log(data) }, function(err) { // handle error somehow });

Slide 59

Slide 59 text

There are a lot of promise implementations » Q » BlueBird » jQuery Deferred » Deferred.js » Vow » avow » ...

Slide 60

Slide 60 text

Promise Version $.get(`/people/${id}`).then((person) => { var { name, age } = person; var [ﬁrst, last] = name.split(' '); console.log(`${ﬁrst} is ${age}.`); });

Slide 61

Slide 61 text

What happens where there's a problem? $.get(`/people/${id}`).then((person) => { var { name, age } = person; var [ﬁrst, last] = name.split(' '); console.log(`${ﬁrst} is ${age}.`); }).fail(function() { console.log(`Could not retrieve person ${id}`); });

Slide 62

Slide 62 text

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}`); });

Slide 63

Slide 63 text

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}`); });

Slide 64

Slide 64 text

catch() is coming in jQuery 3

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Cool!

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

ES7 Object Spread // object literal let person = { name: "jamund", age: 24 }; // simple and fancy object merging... let me = { age: 32, ...person }

Slide 70

Slide 70 text

Array Methods [1,2,3].includes("1"); // goodbye .indexOf(1) >= 0 ["a","b","c"].ﬁnd((item) => item === "a");

Slide 71

Slide 71 text

One more thing...

Slide 72

Slide 72 text

Modules

Slide 73

Slide 73 text

Modules Coming in many shapes & sizes

Slide 74

Slide 74 text

Module Pattern var MY_MODULE = (function($) { var x, y, z; return $.doSomething(); }(jQuery));

Slide 75

Slide 75 text

AMD Modules deﬁne(['jquery'], function($) { var x, y, z; return $.doSomething(); });

Slide 76

Slide 76 text

CommonJS Modules var $ = require('jquery'); var x, y, z; module.exports = $.doSomething();

Slide 77

Slide 77 text

ES6 MODULES: THE MODULE FORMAT TO END ALL MODULE FORMATS

Slide 78

Slide 78 text

ES6 Modules import $ from 'jquery'; var x, y, z; export default $.doSomething();

Slide 79

Slide 79 text

ES6 Modules (Examples) // export stuff in one ﬁle export var age = 32; export function printName() { console.log('Jamund Ferguson'); }; // in another ﬁle import { age, printName } from 'my-module'; import * as myThing from 'my-module'; printName(); // Jamund Ferguson console.log(age); // 32

Slide 80

Slide 80 text

Write Modular JavaScript

Slide 81

Slide 81 text

There's a lot of JavaScript these days Embrace It!

Slide 82

Slide 82 text

Using ES6 w/ Kraken

Slide 83

Slide 83 text

Babel & Kraken Apps Add a .babelrc ﬁle: { "presets": ["es2015"], "plugins": ["add-module-exports"] }

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Babel & Kraken Apps Add babel-register to your index.js ﬁle // Add ES6 Support require('babel-register');

Slide 86

Slide 86 text

Babel & Kraken Apps That's It!