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

ES6: Features By Testing

ES6: Features By Testing

ES6 (aka ES2015) offers many new and exciting features, from expressive syntax, to new powerful built-in APIs, to entirely new-to-JS programming paradigms. We'll start by quickly reviewing some of the best of these coming attractions.

But how do we properly and responsibly bridge from our current code to the new ES6? Browser support in the newest browsers is already very strong, but has a long way to go, and older browsers still loom.

Let's look to feature testing to fully embrace everything JS has to offer our applications, not only now but beyond ES6!

Kyle Simpson
PRO

September 18, 2015
Tweet

More Decks by Kyle Simpson

Other Decks in Programming

Transcript

  1. kyle simpson
    http://getify.me
    @getify
    ES6: features
    by testing

    View Slide

  2. ES6/2015

    View Slide

  3. Block-Scoped Declarations
    Spread / Rest
    Default Parameter Values
    Destructuring
    Object Literal Extensions
    Template Literals
    Arrow Functions
    `for..of` Loops
    Regular Expression Extensions
    Number Literal Extensions
    Unicode
    Symbols
    Iterators
    Generators
    Modules
    Classes

    View Slide

  4. Promises
    Generators + Promises
    Typed Arrays
    Maps
    WeakMaps
    Sets
    WeakSets
    `Array`
    `Object`
    `Math`
    `Number`
    `String`
    Function Names
    Meta Properties
    Well Known Symbols
    Proxies
    `Reflect` API
    Tail Call Optimization (TCO)

    View Slide

  5. the hype

    View Slide

  6. arrow functions

    View Slide

  7. arrow functions

    View Slide

  8. arrow functions
    • will it ever need this/super?
    • will it ever need a lexical name?
    • will it ever need more than one
    statement?
    • will its return have side effects?
    • are all the syntax variances
    really readable/obvious?
    caveats

    View Slide

  9. arrow functions

    View Slide

  10. the substance

    View Slide

  11. array spread
    :(

    View Slide

  12. array spread
    \o/

    View Slide

  13. array spread
    :(

    View Slide

  14. array spread
    \o/

    View Slide

  15. array gather (aka "rest")
    :(

    View Slide

  16. array gather (aka "rest")
    \o/

    View Slide

  17. parameter defaults
    :(

    View Slide

  18. parameter defaults
    \o/

    View Slide

  19. destructuring
    :(

    View Slide

  20. destructuring & concise properties
    :/

    View Slide

  21. destructuring & concise properties
    whitespace / indentation ftw
    \o/

    View Slide

  22. destructuring (renaming/defaults)
    :(

    View Slide

  23. destructuring (renaming/defaults)
    \o/

    View Slide

  24. destructuring & restructuring

    View Slide

  25. destructuring & restructuring
    :(

    View Slide

  26. \o/
    destructuring & restructuring

    View Slide

  27. async: promises & generators
    :(

    View Slide

  28. async: promises & generators
    :/

    View Slide

  29. async: promises & generators
    github.com/getify/asynquence
    \o/

    View Slide

  30. \o/
    async: promises & generators

    View Slide

  31. \o/
    async: promises & generators

    View Slide

  32. \o/
    async: promises & generators

    View Slide

  33. async: promises & generators async functions (es7'ish)
    \o/

    View Slide

  34. :/
    async: promises & generators

    View Slide

  35. \o/
    async: promises & generators

    View Slide

  36. iterators
    :(

    View Slide

  37. iterators
    \o/

    View Slide

  38. iterators
    :/

    View Slide

  39. \o/
    iterators

    View Slide

  40. excited yet!?

    View Slide

  41. ES6 browsers are
    ubiquitous, right?
    not exactly. :(

    View Slide

  42. transpiling ftw
    \o/

    View Slide

  43. View Slide

  44. polyfills ftw
    \o/

    View Slide

  45. github.com/paulmillr/es6-shim

    View Slide

  46. View Slide

  47. what features do
    you need?

    View Slide

  48. 96% of all JS
    programs need less
    than 37% of ES6
    *totally made up
    *
    *

    View Slide

  49. Microsoft Edge 0.11.10074.0 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

    View Slide

  50. View Slide

  51. transpiling & polyfilling: can't
    • several well-known symbols
    • subclassing natives
    • __proto__
    • tail call optimization
    (rewriting to tail calls can)
    https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/
    suggestions/6850816-es6-tail-call-optimization
    • others...
    caveats

    View Slide

  52. transpiling ftl
    polyfills ftl
    :(

    View Slide

  53. View Slide

  54. feature testing ftw
    \o/

    View Slide

  55. feature testing: APIs

    View Slide

  56. feature testing: syntax

    View Slide

  57. feature testing: syntax

    View Slide

  58. https://FeatureTests.io

    View Slide

  59. https://FeatureTests.io

    View Slide

  60. demo

    View Slide

  61. don't shy away from
    ES6+, start using
    these features now

    View Slide

  62. ongoing gap

    View Slide

  63. don't serve code on
    the trailing edge
    of that gap

    View Slide

  64. transpiling &
    polyfilling =>
    developing for the
    current & future

    View Slide

  65. serve the right
    code for the right
    browser

    View Slide

  66. blog.getify.com/smarter-transpilation-strategy

    View Slide

  67. kyle simpson
    http://getify.me
    @getify
    thanks!
    https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&
    %20beyond/README.md#you-dont-know-js-es6--beyond

    View Slide