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!

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