$30 off During Our Annual Pro Sale. View Details »

Embracing ES6

Embracing ES6


July 25, 2016

More Decks by r31gN_

Other Decks in Technology


  1. Embracing ES6

  2. ES6 history • ES6 is also known as Harmony •

    The correct term however is ES2015 (naming convention established) • Was finalised in June 2015 • Future versions will follow the ES[YYYY] pattern
  3. ES6 release lifecycle • Yearly release schedule (yay) • Features

    that don’t make the cut take the next train • This release cycle will pressure browser vendors into quickly implementing new features
  4. So … what is it? • Simply … next JS

    version • An evolution of the language (syntax and functionality) • Minimises the initial gap for true OOP developers • Better, faster, more reliable development
  5. How to use it? • Browsers do not fully support

    ES6 features (though some are natively implemented) • You can still write ES6 code though • Use transpilers in your build process
  6. Transpilers • Transpilers are simply JS-to-JS tools • They transform

    your ES6 code (and unsupported features) to ES5 code • Some features can’t be exactly transformed (let, const) so transpilers fall back to old stuff - var
  7. Transpilers • Best transpiler ever: Babel • It has human-readable

    output • Babel also works server-side (for Node) • Babel has a thriving ecosystem that already supports some of ES2016 and has plugin support
  8. Transpilers • Use babel to transpile ES6 to ES5 for

    static builds • Use babelify with Gulp, Grunt or simple npm run (usually with browserify for require statements) • Use babel-node with any version of node, as it transpiles modules into ES5
  9. Install babel & configure the build process

  10. Let & const • Better alternatives to the var keyword

    • Let and const fix something that was confusing in JS - they employ block-level scoping • TDZ (temporal dead zone) - beginning of block, end where declaration happens
  11. Let & const • Declaration of the same variable (both

    with let and const) will fail • Const variables must be initialized • Assigning to const after initialization fails (silently or loudly depending on use strict)
  12. Let & const

  13. Assignment destructuring • A shorthand for pulling values out of

    objects or arrays • Supports defaults, aliases and nesting
  14. Assignment destructuring

  15. Spread operator & rest parameters • Used with … •

    Rest parameter is a better arguments • Spread operator helps avoid apply, or casts array-like collections to arrays (list of DOM nodes to array)
  16. Spread operator & rest parameters

  17. Arrow functions • Terse way to declare functions • Depending

    on how you specify them, you might have implicit return • You can’t name them • Arrow functions are bound to their lexical scope (actually they don’t define a this, arguments, etc.)
  18. Arrow functions

  19. Template literals • Declared using ` (backtick) in addition to

    “, ‘ • They can be multiline • They allow interpolation of variables or valid JS expressions
  20. Template literals

  21. Object literals • Objects now have property value shorthand •

    You can also have computed property names • Method definitions in object literals also have an improved, more terse syntax
  22. Object literals

  23. Classes • Syntactic sugar on top of old prototypes •

    Supports inheritance (via extend keyword), constructors, super calls, static methods • They still rely on prototype inheritance (this is different than traditional OOP languages)
  24. Classes

  25. Symbols • A new primitive type in ES6 (an awful

    lot like strings) • Symbols are immutable and unique • They have the type symbol
  26. Symbols • Symbols are not iterable (some exceptions - Symbol.

    iterator) • Can be as global as you want (cross-realm) • There are built-in symbols - Symbol.iterator, Symbol. match • Use them for name clashes (objects as hash maps) or for defining protocols (eg: iterator)
  27. Symbols

  28. Iterators • Iterators and the iterable protocol define how to

    iterate over any object • Uses the Symbol.iterator built-in symbol • Must return an object that has a next method (with value and done)
  29. Iterators • Object that have implemented the iterable protocol are

    iterable (you can use the for … of, spread operator, etc.) • Some built-ins are iterable by default (Arrays, Strings, arguments, NodeList, etc.) • Iterators are lazy (one item at a time)
  30. Iterators

  31. Generators • Generators are a special kind of iterator •

    Make use of the yield keyword • Generator function execution is suspended, remembering the last position • Useful to make async flows feel synchronous
  32. Generators

  33. Promises • A way to deal with async code (in

    a sync-like manner) • Created by using the Promise “class” (will either be resolved or rejected) • Promises are chainable (then or catch - return new promises)
  34. Promises • Start out in pending state and are settled

    at a later time (resolved or rejected) • Promises can be settled only once • Only one of the then or catch branch (and sub-branches) will be executed • There is Promise.all and Promise.race
  35. Promises

  36. Maps • A replacement to the common pattern of creating

    a hash-map using POJOs • Adheres to the iterable protocol • Keys can be arbitrary values (eg: DOM nodes, strings, functions, etc.) • Methods to get, set or check values
  37. Maps

  38. WeakMaps • A subset of Map with limited functionality •

    It’s not iterable • Keys must be objects (does not support primitive types as keys)
  39. WeakMaps • WeakMap holds references to its keys weakly, meaning

    that if there are no other references to one of its keys, the object is subject to garbage collection • Use it when you need to specify object metadata or extend an object while still being able to garbage collect it if nobody else cares about it
  40. WeakMaps

  41. Sets • Quite similar to Map (iterable, same methods) •

    Sets don’t have keys, only values (the key is the value) • Sets can’t have duplicate values because the values are also used as keys
  42. Sets

  43. WeakSets • Quite similar to WeakMap • Has only values

    (they act as keys also) • Not iterable, works only with objects
  44. WeakSets

  45. Proxies • Used to augument behaviour of objects through traps

    (proxies act as a passthrough) • Your defined handlers determine the access rules to the underlying object • Can be revocable • A lot of traps: get, set, has, defineProperty, apply, ownKeys, etc.
  46. Proxies

  47. Numbers • Some cool additions were made to the Number

    class • Methods like isInteger, isSafeInteger or constants such as EPSILON, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, etc.
  48. Numbers

  49. Math • Some cool additions were made to the Math

    class • Methods like sine, trunc, cbrt, sinh, cosh, asinh, hypot, fround, etc.
  50. Math

  51. Arrays • Some cool additions were made to the Array

    class • Methods like Array.from, Array.of, copyWithin, fill, find, findIndex, etc.
  52. Arrays

  53. Objects • Some cool additions were made to the Object

    class • Methods like assign, is, getOwnPropertySymbols, setPrototypeOf, and object literals
  54. Objects

  55. Strings • Some cool additions were made to the String

    class • Methods like startsWith, endsWith, repeat, include, codePointAt, fromCodePoint, etc.
  56. Strings

  57. Modules • ES6 modules are files that export an API

    • You can export named or default bindings • You can export a list (multiple bindings)
  58. Modules • Import is done in CommonJS style (using the

    import keyword) • You can alias imports, import everything within a module, etc.
  59. Modules

  60. That’s all folks! • ES6 (ES2015) is here to stay

    and evolve • Embrace it today (production as well)
  61. Thanks! Vlad “Reign” Zelinschi (UI Tech Lead at 3Pillar Global)