Intro to ES2015

Transcript

1. ES2015 Getting Started with Modern JavaScript
2. I’m @neogeek Web Developer/Designer
3. What is ES2015?
4. ES2015 is native* JavaScript, evolved.
5. *Almost 100% supported in modern browsers.
6. *Almost 100% supported in modern browsers.
8. More on that later …
9. Let’s check out the basics of ES2015
10. let & const
11. let & const let language = 'ES6'; language = 'ES2015';
12. let & const const scaredOfHeights = true; scaredOfHeights = false; / / TypeError
13. Variable Scope
14. let & const are { block-scoped }
15. var is this.not
16. Variable Scope let name = 'Scott'; { let name = 'Scott Prime'; } console.log(name); / / Scott
17. Variable Scope for (let i = 0; i < 10; i++) { console.log(i); } console.log(i); / / ReferenceError
18. Variable Scope for (let i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 1); }
19. String template
20. String template const first = 'Scott'; console.log(`Hi ${first}!`); / / Hi Scott!
21. String template const first = 'Scott'; console.log(`Hi ${first}!`); / / Hi Scott!
22. String template const food = ['apple', 'orange', 'pear']; console.log(`${food.map(function (item) { return item; })}`); / / apple,orange,pear
23. String template const food = ['apple', 'orange', 'pear']; console.log(`${food.map(function (item) { return item; })}`); / / apple,orange,pear
24. New function() syntax
25. New function() syntax const sayhi = () => console.log('hi!') sayhi();
26. New function() syntax const sayhi = () => console.log('hi!') sayhi();
27. New function() syntax const drawRect = (context) => { context.save(); context.fillStyle = '#E9434F'; context.fillRect(0, 0, 100, 100); context.restore(); } drawRect(canvas.getContext(‘2d'));
28. New function() syntax const drawRect = (context) => { context.save(); context.fillStyle = '#E9434F'; context.fillRect(0, 0, 100, 100); context.restore(); } drawRect(canvas.getContext(‘2d'));
29. Default function values
30. Default function values const logMessage = (content = 'No message supplied.') => { const message = `${Date.now()} – ${content}`; console.log(message); return message; } logMessage(); / / 1471307510395 – No message supplied. logMessage('Oh hai!'); / / 1471307510398 – Oh hai!
31. Default function values const logMessage = (content = 'No message supplied.') => { const message = `${Date.now()} – ${content}`; console.log(message); return message; } logMessage(); / / 1471307510395 – No message supplied. logMessage('Oh hai!'); / / 1471307510398 – Oh hai!
32. Now for some more fun (advanced) ES2015
33. Classes
34. Classes class Game { constructor () { console.log('New game object!'); } play () { console.log('Let\s do this!'); } } const snake = new Game(); / / New game object! snake.play(); / / Let’s do this!
35. Destructing arrays & objects
36. Destructing arrays & objects const [a, b] = [1, 2]; console.log(`${a}, ${b}`); / / 1, 2
37. Destructing arrays & objects const [a, b] = [1, 2]; console.log(`${a}, ${b}`); / / 1, 2
38. Destructing arrays & objects const {first, last} = {first: 'Scott', last: 'Doxey'}; console.log(`${last}, ${first} ${last}`); / / Doxey, Scott Doxey
39. Destructing arrays & objects const {first, last} = {first: 'Scott', last: 'Doxey'}; console.log(`${last}, ${first} ${last}`); / / Doxey, Scott Doxey
40. Spread syntax
41. Spread syntax const food = ['apple', 'orange', 'pear']; console.log(...food); / / apple orange pear
42. Spread syntax const food = ['apple', 'orange', 'pear']; console.log(...food); / / apple orange pear
43. Spread syntax const food = ['apple', 'orange', 'pear']; food.push(...['potato', 'avacado']); console.log(…food); / / apple orange pear potato avacado
44. Spread syntax const food = ['apple', 'orange', 'pear']; food.push(...['potato', 'avacado']); console.log(…food); / / apple orange pear potato avacado
45. Modules
46. Modules / / utils.js export default function logMessage (message = '') { console.log(message); } / / main.js import {logMessage} from './utils.js'; logMessage('Hello, friend.');
47. Object.assign
48. Object.assign const DEFAULT_SETTINGS = { sounds: 'beep', type: 'notice', color: 'blue' } const logMessage = (content, options) => { const settings = Object.assign({}, DEFAULT_SETTINGS, options); console.log(settings); } logMessage('OMG LOOK OUT!', {type: 'error', color: 'red'}); / / Object {sounds: "beep", type: "error", color: "red"}
49. Object.assign const DEFAULT_SETTINGS = { sounds: 'beep', type: 'notice', color: 'blue' } const logMessage = (content, options) => { const settings = Object.assign({}, DEFAULT_SETTINGS, options); console.log(settings); } logMessage('OMG LOOK OUT!', {type: 'error', color: 'red'}); / / Object {sounds: "beep", type: "error", color: "red"}
50. So what about the browsers that don’t support ES2015?
52. Babel converts ES2015 to JavaScript all browsers can read.
53. Setting up Babel is easy
54. First install Babel via NPM. Then create a .babelrc file with references to the plugins you want to use. Then install the plugins via NPM. Repeat the same process if you need polyfills. Then either setup an NPM run script or use a build took like Gulp or Grunt with the appropriate plugins for Babel. If you want Babel to rebuild whenever you make a change you can either use a standalone node script to watch for changes or use a watch plugin for either Gulp or Grunt.
56. Luckily there is another way.
57. [Shameless plug for personal project here.]
58. https:/ /github.com/neogeek/spire-of-babel
59. What does Spire of Babel do?
60. Spire of Babel Features • Converts ES2015 to ES5 • Converts React (JSX) • Bundles code with Browserify • Lints code with ESLint • Generates Source Maps • Watch for changes and rebuild
61. How easy is it to setup Spire of Babel?
62. npm install spire-of-babel —save-dev
64. exit;