ES-What?!

ES-What?! - A talk for JavaScript North West, 18th October 2016:
http://www.meetup.com/JavaScript-North-West/events/233732806

Transcript

1. @furzeface #JSNorthWest ES-What?! Daniel Furze danielfurze.co.uk
2. @furzeface #JSNorthWest Hello
3. @furzeface #JSNorthWest I am… Daniel Furze @furzeface - Twitter furzeface - GitHub danielfurze.co.uk - Internet
4. @furzeface #JSNorthWest #JSNorthWest
5. @furzeface #JSNorthWest I have seen the JavaScripts… Blackledge, A (2015)
6. @furzeface #JSNorthWest ECMAScript 6 Harmony ES-Next ES6 ES2015
7. @furzeface #JSNorthWest ES2015 ES-WTF?!
8. @furzeface #JSNorthWest ES[YYYY] `ES${new Date().getFullYear()}` ES-WTF?!
9. @furzeface #JSNorthWest ES2015 ES6 We’ll go with
10. @furzeface #JSNorthWest ES-What?!
11. @furzeface #JSNorthWest Great, but browsers?
12. @furzeface #JSNorthWest New stuff?
13. @furzeface #JSNorthWest • New variable declarations • Template literals • New String methods • New Array methods • Default function parameters New stuff!
14. @furzeface #JSNorthWest let and const const surname = 'White' // Constant declaration of surname - can’t change this let forename = 'Walter' // First declaration of forename function sayMyName () { forename = 'Flynn' // `let` can be overridden let nickname = 'Walt Jr.' // Block-scoped declaration of nickname let fullName = forename + ' \'' + nickname + '\' ' + surname console.log(fullName) } console.log(nickname) // Uncaught ReferenceError: nickname is not defined surname = 'White!' // SyntaxError: "surname" is read-only
15. @furzeface #JSNorthWest let and const var surname = 'White' var forename = 'Walter' function sayMyName () { forename = 'Flynn' var nickname = 'Walt Jr.' var fullName = forename + ' \'' + nickname + '\' ' + surname console.log(fullName) } console.log(nickname) surname = 'White!'
16. @furzeface #JSNorthWest Template literals const surname = `White` let forename = `Walter`
17. @furzeface #JSNorthWest Template literals var fullName = forename + ' \'' + nickname + '\' ' + surname
18. @furzeface #JSNorthWest Template literals var fullName = forename + ' \'' + nickname + '\' ' + surname let fullName = `${forename} ${nickName} ${surname}`
19. @furzeface #JSNorthWest Template literals let fullDetails = `Forename: ${forename} Surname: ${surname}`
20. @furzeface #JSNorthWest Template literals let template = ` <ul> <li>Forename: ${forename}</li> <li>Surname: ${surname}</li> </ul> `
21. @furzeface #JSNorthWest New String() methods const quote = `I am the one who knocks` quote.startsWith('I') // true quote.startsWith('Me') // false quote.endsWith('knocks') // true quote.endsWith('rings') // false quote.includes('the') // true quote.repeat(2) // I am the one who knocksI am the one who knocks
22. @furzeface #JSNorthWest New Array() methods const listItems = document.querySelectorAll(‘li') let listItemsArray = Array.from(listItems) Array.from()
23. @furzeface #JSNorthWest New Array() methods let arrayOf = Array.of(1, 2, 3) // Similar to new Array(1, 2, 3) Array.of()
24. @furzeface #JSNorthWest New Array() methods let characters = [ 'Walt', 'Jesse' ] characters.fill('Heisenberg') // Fill all with new value Array.fill()
25. @furzeface #JSNorthWest New Array() methods let characters = [ 'Walt', 'Jesse' ] let name = characters.find(function (name) { return name !== 'Jesse' }) // Returns first element that matches the query // e.g. 'Walt' Array.find()
26. @furzeface #JSNorthWest New Array() methods Array.findIndex() let characters = [ 'Walt', 'Jesse' ] let nameIndex = characters.findIndex(function (name) { return name !== 'Hank' }) // Returns first element index that is true // or -1 for false // Better than (indexOf(name) !== -1)
27. @furzeface #JSNorthWest Default parameters function listFamily(husband, wife) { var husband = (husband !== undefined) ? husband : 'Walt' var wife = (wife !== undefined) ? wife : 'Skylar' }
28. @furzeface #JSNorthWest Default parameters function listFamily (husband = 'Walt', wife = 'Skylar') { let family = `The husband, ${husband}. The wife, ${wife}.` console.log(family) }
29. @furzeface #JSNorthWest Great, but browsers?
30. @furzeface #JSNorthWest http://babeljs.io
31. @furzeface #JSNorthWest Babel npm install babel-cli -D npm install babel-preset-es2015 —D npm install babel-polyfill -D command line
32. @furzeface #JSNorthWest Babel { "presets": ["es2015"] } .babelrc
33. @furzeface #JSNorthWest Babel { "presets": [“es2015”], "plugins": ["transform-runtime"] } .babelrc
34. @furzeface #JSNorthWest Babel babel script.js --out-file compiled.js command line
35. @furzeface #JSNorthWest Babel const name = 'Daniel' // constant declaration let surname = 'Furze' // let declaration var myName = () => { let middlename = 'James' // block-scoped let declaration surname = 'Furzo' let fullName = `${name} ${middlename} ${surname}` // multi-line template string console.log(fullName) } myName() 'use strict'; var name = 'Daniel'; var surname = 'Furze'; var myName = function myName() { var middlename = ‘James'; surname = 'Furzo'; var fullName = name + '\n\t ' + middlename + '\n\t ' + surname; console.log(fullName); }; myName();
36. @furzeface #JSNorthWest • https://github.com/babel/gulp-babel • https://github.com/babel/grunt-babel • https://github.com/babel/broccoli-babel-transpiler • https://github.com/babel/babel-loader • https://github.com/rollup/rollup-plugin-babel
37. @furzeface #JSNorthWest v6.x.x http://node.green
38. @furzeface #JSNorthWest More new stuff? • Arrow functions • Destructuring • Spread/rest parameters • Classes (not classes) • Promises • Generators • Proxies
39. @furzeface #JSNorthWest Resources • http://es6.io - Wes’ course • http://leanpub.com/exploring-es6 - free eBook • http://ponyfoo.com/articles/tagged/es6 - articles • http://es6katas.org - interactive exercises
40. @furzeface #JSNorthWest Thank you! #JSNorthWest
41. @furzeface #JSNorthWest Daniel Furze Front-end development consultant danielfurze.co.uk @furzeface http://bit.ly/df-es-what