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. 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
  2. The destructuring assignment syntax is a JavaScript expression that makes

    it possible to extract data from arrays or objects into distinct variables. DESTRUCTURING
  3. ARROW FUNCTIONS An arrow function expression has a shorter syntax

    compared to function expressions and lexically binds the this value.
  4. 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.
  5. 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
  6. 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.
  7. 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…
  8. 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.
  9. 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.