Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to ES2015

Intro to ES2015

Scott Doxey

August 17, 2016
Tweet

More Decks by Scott Doxey

Other Decks in Programming

Transcript

  1. ES2015
    Getting Started with Modern JavaScript

    View full-size slide

  2. I’m @neogeek
    Web Developer/Designer

    View full-size slide

  3. What is ES2015?

    View full-size slide

  4. ES2015 is native*
    JavaScript, evolved.

    View full-size slide

  5. *Almost 100% supported
    in modern browsers.

    View full-size slide

  6. *Almost 100% supported
    in modern browsers.

    View full-size slide

  7. More on that later …

    View full-size slide

  8. Let’s check out the
    basics of ES2015

    View full-size slide

  9. let & const
    let language = 'ES6';
    language = 'ES2015';

    View full-size slide

  10. let & const
    const scaredOfHeights = true;
    scaredOfHeights = false; /
    / TypeError

    View full-size slide

  11. Variable Scope

    View full-size slide

  12. let & const are
    { block-scoped }

    View full-size slide

  13. var is this.not

    View full-size slide

  14. Variable Scope
    let name = 'Scott';
    {
    let name = 'Scott Prime';
    }
    console.log(name); /
    / Scott

    View full-size slide

  15. Variable Scope
    for (let i = 0; i < 10; i++) {
    console.log(i);
    }
    console.log(i); /
    / ReferenceError

    View full-size slide

  16. Variable Scope
    for (let i = 0; i < 10; i++) {
    setTimeout(function () {
    console.log(i);
    }, 1);
    }

    View full-size slide

  17. String template

    View full-size slide

  18. String template
    const first = 'Scott';
    console.log(`Hi ${first}!`); /
    / Hi Scott!

    View full-size slide

  19. String template
    const first = 'Scott';
    console.log(`Hi ${first}!`); /
    / Hi Scott!

    View full-size slide

  20. String template
    const food = ['apple', 'orange', 'pear'];
    console.log(`${food.map(function (item) {
    return item;
    })}`); /
    / apple,orange,pear

    View full-size slide

  21. String template
    const food = ['apple', 'orange', 'pear'];
    console.log(`${food.map(function (item) {
    return item;
    })}`); /
    / apple,orange,pear

    View full-size slide

  22. New function() syntax

    View full-size slide

  23. New function() syntax
    const sayhi = () => console.log('hi!')
    sayhi();

    View full-size slide

  24. New function() syntax
    const sayhi = () => console.log('hi!')
    sayhi();

    View full-size slide

  25. New function() syntax
    const drawRect = (context) => {
    context.save();
    context.fillStyle = '#E9434F';
    context.fillRect(0, 0, 100, 100);
    context.restore();
    }
    drawRect(canvas.getContext(‘2d'));

    View full-size slide

  26. New function() syntax
    const drawRect = (context) => {
    context.save();
    context.fillStyle = '#E9434F';
    context.fillRect(0, 0, 100, 100);
    context.restore();
    }
    drawRect(canvas.getContext(‘2d'));

    View full-size slide

  27. Default function values

    View full-size slide

  28. 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!

    View full-size slide

  29. 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!

    View full-size slide

  30. Now for some more
    fun (advanced) ES2015

    View full-size slide

  31. 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!

    View full-size slide

  32. Destructing
    arrays & objects

    View full-size slide

  33. Destructing arrays & objects
    const [a, b] = [1, 2];
    console.log(`${a}, ${b}`); /
    / 1, 2

    View full-size slide

  34. Destructing arrays & objects
    const [a, b] = [1, 2];
    console.log(`${a}, ${b}`); /
    / 1, 2

    View full-size slide

  35. Destructing arrays & objects
    const {first, last} = {first: 'Scott', last: 'Doxey'};
    console.log(`${last}, ${first} ${last}`); /
    / Doxey, Scott Doxey

    View full-size slide

  36. Destructing arrays & objects
    const {first, last} = {first: 'Scott', last: 'Doxey'};
    console.log(`${last}, ${first} ${last}`); /
    / Doxey, Scott Doxey

    View full-size slide

  37. Spread syntax

    View full-size slide

  38. Spread syntax
    const food = ['apple', 'orange', 'pear'];
    console.log(...food); /
    / apple orange pear

    View full-size slide

  39. Spread syntax
    const food = ['apple', 'orange', 'pear'];
    console.log(...food); /
    / apple orange pear

    View full-size slide

  40. Spread syntax
    const food = ['apple', 'orange', 'pear'];
    food.push(...['potato', 'avacado']);
    console.log(…food); /
    / apple orange pear potato avacado

    View full-size slide

  41. Spread syntax
    const food = ['apple', 'orange', 'pear'];
    food.push(...['potato', 'avacado']);
    console.log(…food); /
    / apple orange pear potato avacado

    View full-size slide

  42. Modules
    /
    / utils.js
    export default function logMessage (message = '') {
    console.log(message);
    }
    /
    / main.js
    import {logMessage} from './utils.js';
    logMessage('Hello, friend.');

    View full-size slide

  43. Object.assign

    View full-size slide

  44. 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"}

    View full-size slide

  45. 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"}

    View full-size slide

  46. So what about the
    browsers that don’t
    support ES2015?

    View full-size slide

  47. Babel converts ES2015
    to JavaScript all
    browsers can read.

    View full-size slide

  48. Setting up Babel is easy

    View full-size slide

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

    View full-size slide

  50. Luckily there is
    another way.

    View full-size slide

  51. [Shameless plug for
    personal project here.]

    View full-size slide

  52. https:/
    /github.com/neogeek/spire-of-babel

    View full-size slide

  53. What does
    Spire of Babel do?

    View full-size slide

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

    View full-size slide

  55. How easy is it to setup
    Spire of Babel?

    View full-size slide

  56. npm install spire-of-babel —save-dev

    View full-size slide