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

Modern Javascript Round Up

Adam Smith
August 13, 2016

Modern Javascript Round Up

Together we will review how you can write ES2015 / ES6 syntax in your Drupal application. We will learn how to run a "transpiler" in order to build backwards-compatible javascript while utilizing modern syntax. We will compare old techniques to modern techniques so you can start refactoring immediately.

Adam Smith

August 13, 2016
Tweet

More Decks by Adam Smith

Other Decks in Technology

Transcript

  1. MODERN JAVASCRIPT ROUND UP
    ES6, ES2015, ES7

    View full-size slide

  2. ES6, also known as ECMAScript 2015,
    is the latest version of the ECMAScript
    standard. ES6 is a significant update to
    the language, and the first update to the
    language since ES5 was standardized in
    2009.
    ES6

    View full-size slide

  3. Destructuring
    Arrow Functions
    Blocked Scope Declarations
    Import / Export Modules
    String Interpolation
    FEATURES

    View full-size slide

  4. The destructuring assignment syntax is a
    JavaScript expression that makes it possible to
    extract data from arrays or objects into
    distinct variables.
    DESTRUCTURING

    View full-size slide

  5. NO MORE FALSY

    View full-size slide

  6. NESTED DESTRUCTURING

    View full-size slide

  7. DESTRUCTURING REASSIGNMENT

    View full-size slide

  8. DESTRUCTURING IN LOOPS

    View full-size slide

  9. ES5 FUNCTION ARGUMENT
    ES6 FUNCTION ARGUMENT

    View full-size slide

  10. DESTRUCTURING DEFAULT VALUES

    View full-size slide

  11. DESTRUCTURING DEFAULT
    FUNCTION ARGUMENTS

    View full-size slide

  12. DEFAULT FUNCTION
    ARGUMENTS, WHAT?!

    View full-size slide

  13. DESTRUCTURING
    WITH DEFAULT FUNCTION ARGUMENTS
    AND REASSIGNMENT

    View full-size slide

  14. ARROW FUNCTIONS
    An arrow function expression has a shorter
    syntax compared to function expressions
    and lexically binds the this value.

    View full-size slide

  15. ES5 STANDARD FUNCTION
    ES6 ARROW FUNCTION

    View full-size slide

  16. ES6 ARROW FUNCTION
    ES5 STANDARD FUNCTION

    View full-size slide

  17. ES6 IMPLIED "RETURN"
    SELF INVOKING FUNCTION

    View full-size slide

  18. WON’T WORK
    WILL WORK

    View full-size slide

  19. BLOCK SCOPE DECLARATIONS
    `let` allows you to declare variables that
    are limited in scope to the block, statement,
    or expression on which it is used. This is
    unlike the var keyword, which defines a
    variable globally, or locally to an entire
    function regardless of block scope.

    View full-size slide

  20. BLOCK SCOPE WITH THE LET KEYWORD
    THE LET KEYWORD INSIDE A LOOP

    View full-size slide

  21. IMPORT
    The import statement is used to import
    functions, objects or primitives that have
    been exported from an external module,
    another script, etc.
    The export statement is used to export
    functions, objects or primitives from a
    given file (or module).
    EXPORT

    View full-size slide

  22. ES6 IMPORT
    ES6 IMPORT AND DESTRUCTURING
    ES6 IMPORT ALIASING

    View full-size slide

  23. WHY DO I NEED ALIASING?
    A file can export multiple items.
    Using the * will import all the
    exported pieces to single variable
    It also helps to avoid conflicts
    between similarly named libraries.
    For example two libraries which
    both use the symbol $ as their
    constructor.

    View full-size slide

  24. ES6 EXPORT
    ES6 EXPORTING DEFAULT

    View full-size slide

  25. ES6 EXPORT ALTERNATIVE

    View full-size slide

  26. ES6 EXPORT SCOPE

    View full-size slide

  27. STRING INTERPOLATION
    AKA TEMPLATE LITERALS
    Template literals are string literals allowing
    embedded expressions.

    View full-size slide

  28. ES5 STRING BUILDING
    ES6 TEMPLATE LITERALS

    View full-size slide

  29. ES6 TEMPLATE LITERALS
    MULTIPLE LINES

    View full-size slide

  30. SO MUCH MORE!
    Class, yes, very much like php, with
    extends, getters / setters, a
    constructor function.
    Native Promises to help with async
    calls to the server.
    yield keyword to stop the process
    thread.
    and on… and on… and on…

    View full-size slide

  31. COOL STORY BRO,
    BUT HOW DO I GET IT TO WITH WORK IE9?

    View full-size slide

  32. ES2015 AND BEYOND
    Babel has support for the latest version
    of JavaScript through syntax
    transformers. These plugins allow you
    to use new syntax, right now without
    waiting for browser support.

    View full-size slide

  33. WHAT?
    It rewrites your code to work with older
    browsers, bro. For example it will
    rename all your let variables to avoid
    out of scope conflicts.

    View full-size slide

  34. BABEL CAN BE USED WITH:
    Gulp
    Grunt
    Webpack
    Rollup

    View full-size slide

  35. WEBPACK
    Install the Babel package via npm then
    add it your loaders:

    View full-size slide

  36. GRUNT
    Install the Babel package via npm then
    add it your config object:

    View full-size slide

  37. GULP
    Install the Babel package via npm then
    add a new task.

    View full-size slide

  38. THANK YOU!
    Adam Smith
    acodesmith.com
    @acodesmith

    View full-size slide