Modern Javascript Round Up

A3c3d8a2b363c794bf2f0da138fb9684?s=47 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.

A3c3d8a2b363c794bf2f0da138fb9684?s=128

Adam Smith

August 13, 2016
Tweet

Transcript

  1. MODERN JAVASCRIPT ROUND UP ES6, ES2015, ES7

  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
  3. Destructuring Arrow Functions Blocked Scope Declarations Import / Export Modules

    String Interpolation FEATURES
  4. The destructuring assignment syntax is a JavaScript expression that makes

    it possible to extract data from arrays or objects into distinct variables. DESTRUCTURING
  5. ES5 ES6

  6. NO MORE FALSY

  7. NESTED DESTRUCTURING

  8. DESTRUCTURING REASSIGNMENT

  9. DESTRUCTURING IN LOOPS

  10. ES5 FUNCTION ARGUMENT ES6 FUNCTION ARGUMENT

  11. DESTRUCTURING DEFAULT VALUES

  12. DESTRUCTURING DEFAULT FUNCTION ARGUMENTS

  13. DEFAULT FUNCTION ARGUMENTS, WHAT?!

  14. DESTRUCTURING WITH DEFAULT FUNCTION ARGUMENTS AND REASSIGNMENT

  15. ARROW FUNCTIONS An arrow function expression has a shorter syntax

    compared to function expressions and lexically binds the this value.
  16. ES5 STANDARD FUNCTION ES6 ARROW FUNCTION

  17. ES6 ARROW FUNCTION ES5 STANDARD FUNCTION

  18. ES6 IMPLIED "RETURN" SELF INVOKING FUNCTION

  19. WON’T WORK WILL WORK

  20. 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.
  21. BLOCK SCOPE WITH THE LET KEYWORD THE LET KEYWORD INSIDE

    A LOOP
  22. 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
  23. ES6 IMPORT ES6 IMPORT AND DESTRUCTURING ES6 IMPORT ALIASING

  24. 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.
  25. ES6 EXPORT ES6 EXPORTING DEFAULT

  26. ES6 EXPORT ALTERNATIVE

  27. ES6 EXPORT SCOPE

  28. STRING INTERPOLATION AKA TEMPLATE LITERALS Template literals are string literals

    allowing embedded expressions.
  29. ES5 STRING BUILDING ES6 TEMPLATE LITERALS

  30. ES6 TEMPLATE LITERALS MULTIPLE LINES

  31. 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…
  32. COOL STORY BRO, BUT HOW DO I GET IT TO

    WITH WORK IE9?
  33. None
  34. 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.
  35. 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.
  36. BABEL CAN BE USED WITH: Gulp Grunt Webpack Rollup

  37. WEBPACK Install the Babel package via npm then add it

    your loaders:
  38. GRUNT Install the Babel package via npm then add it

    your config object:
  39. GULP Install the Babel package via npm then add a

    new task.
  40. THANK YOU! Adam Smith acodesmith.com @acodesmith