Hi I m Jamund and I love ES6 and I m giving this talk.

Transcription

1 ES6 for Everyone

2 Hi I m Jamund and I love ES6 and I m giving this talk.

3 Why are you here?» Node.js People?» UI Engineers?» Designers?» Web Devs?» Non-technical folks?

4 A LITTLE HISTORY OF JavaScript

5 JavaScript was created in 1995

6 European Computer Manufacturers Association adopted JavaScript in 1997 calling it EcmaScript

7 We still call it JavaScript though...

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

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

10 10 Years of Sadness

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

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

13 JavaScript Today

14

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

16 Syntactic Sugar

17 Let's Get Started

18 Default Parameters

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

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

21 Template Literals

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

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

24 Destructuring

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

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

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

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

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

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

31 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];

32 Destructuring Arrays (ES6) // node example var file = fs.readfilesync('myfile.txt', 'utf8'); var contents = file.split('\n'); var [line1,line2,line3,,line5] = contents;

33 Arrow Functions

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

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

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

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

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

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

42 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

43 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

44 All of the Above

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

47 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 + '.'); // }); }

48 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 + '.'); }); }

49 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 + '.'); }); }

50 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 + '.'); }); }

51 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 + '.'); }); }

52 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 + '.'); }); }

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

54 amazing!

55 Promises

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

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

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

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

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

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

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

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

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

65 catch() is coming in jquery 3

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

67 One more thing...

68 Modules

69 Modules Coming in many shapes & sizes

70 Module Pattern var MY_MODULE = (function($) { var x, y, z; return $.dosomething(); }(jquery));

71 AMD Modules define(['jquery'], function($) { var x, y, z; return $.dosomething(); });

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

73 ES6 MODULES: THE MODULE FORMAT TO END ALL MODULE FORMATS

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

75 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'; printname(); // Jamund Ferguson console.log(age); // 32

76 Write Modular JavaScript

77 We've covered a lot

78 We've covered a lot» Default Paramaters» Destructuring» Template Literals» Arrow Functions» Promises» ES6 Modules

79 What's Missing Here?

80 What's Missing?» Classes» Rest / Spread» Symbols» Object Shorthand» Generators / Iterators» Proxies» etc...

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

82

83

84 Questions?

85 use webpack & babel

86 Babel & Application Code // index.js require('babel/register') require('app.js'); // app.js import "thing" from thing; // command line node index.js

87 Babel & NPM Modules

88 That's it