Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lo que la cafeína le hizo a JS

Sergio Arbeo
November 22, 2014

Lo que la cafeína le hizo a JS

Un paseo por la nueva sintaxis de ECMAScript 6

Sergio Arbeo

November 22, 2014
Tweet

More Decks by Sergio Arbeo

Other Decks in Programming

Transcript

  1. MADRID · NOV 21-22 · 2014
    Sergio Arbeo
    {Back,Front}-end developer at codecantor
    @Serabe
    Historia de un despecho transpilado
    Lo que la cafeína
    le hizo a JS

    View full-size slide

  2. MADRID · NOV 21-22 · 2014
    CODECANTOR

    View full-size slide

  3. MADRID · NOV 21-22 · 2014
    I loved
    CoffeeScript

    View full-size slide

  4. MADRID · NOV 21-22 · 2014
    I loved
    CoffeeScript

    View full-size slide

  5. MADRID · NOV 21-22 · 2014
    CoffeeScript
    V
    JavaScript

    View full-size slide

  6. MADRID · NOV 21-22 · 2014
    CoffeeScript
    V
    ES5

    View full-size slide

  7. MADRID · NOV 21-22 · 2014
    CoffeeScript
    ES6
    V

    View full-size slide

  8. MADRID · NOV 21-22 · 2014
    WHY?

    View full-size slide

  9. MADRID · NOV 21-22 · 2014
    WHY?
    Implicit returns

    View full-size slide

  10. MADRID · NOV 21-22 · 2014
    WHY?
    Implicit returns
    No named functions

    View full-size slide

  11. MADRID · NOV 21-22 · 2014
    WHY?
    Implicit returns
    No named functions
    Strange regexes

    View full-size slide

  12. MADRID · NOV 21-22 · 2014
    WHY?
    Implicit returns
    No named functions
    Strange regexes
    Significant whitespace

    View full-size slide

  13. MADRID · NOV 21-22 · 2014
    WHY?
    Implicit returns
    No named functions
    Strange regexes
    Significant whitespace
    Generators

    View full-size slide

  14. MADRID · NOV 21-22 · 2014
    Ember.JS

    View full-size slide

  15. MADRID · NOV 21-22 · 2014

    View full-size slide

  16. MADRID · NOV 21-22 · 2014

    View full-size slide

  17. MADRID · NOV 21-22 · 2014

    View full-size slide

  18. MADRID · NOV 21-22 · 2014
    ES6

    View full-size slide

  19. MADRID · NOV 21-22 · 2014
    Destructuring

    View full-size slide

  20. MADRID · NOV 21-22 · 2014

    View full-size slide

  21. MADRID · NOV 21-22 · 2014

    View full-size slide

  22. MADRID · NOV 21-22 · 2014

    View full-size slide

  23. MADRID · NOV 21-22 · 2014

    View full-size slide

  24. MADRID · NOV 21-22 · 2014
    NESTABLE

    View full-size slide

  25. MADRID · NOV 21-22 · 2014

    View full-size slide

  26. MADRID · NOV 21-22 · 2014

    View full-size slide

  27. MADRID · NOV 21-22 · 2014
    Destructuring
    DE

    View full-size slide

  28. MADRID · NOV 21-22 · 2014

    View full-size slide

  29. MADRID · NOV 21-22 · 2014
    Arrays too

    View full-size slide

  30. MADRID · NOV 21-22 · 2014

    View full-size slide

  31. MADRID · NOV 21-22 · 2014

    View full-size slide

  32. MADRID · NOV 21-22 · 2014

    View full-size slide

  33. MADRID · NOV 21-22 · 2014

    View full-size slide

  34. MADRID · NOV 21-22 · 2014
    NESTABLE
    TOO

    View full-size slide

  35. MADRID · NOV 21-22 · 2014
    MODULES

    View full-size slide

  36. MADRID · NOV 21-22 · 2014

    View full-size slide

  37. MADRID · NOV 21-22 · 2014

    View full-size slide

  38. MADRID · NOV 21-22 · 2014

    View full-size slide

  39. MADRID · NOV 21-22 · 2014

    View full-size slide

  40. MADRID · NOV 21-22 · 2014

    View full-size slide

  41. MADRID · NOV 21-22 · 2014
    Ember-CLI

    View full-size slide

  42. MADRID · NOV 21-22 · 2014
    let / const

    View full-size slide

  43. MADRID · NOV 21-22 · 2014
    let
    •  The new var.
    •  Block scope.
    •  No hoisting.

    View full-size slide

  44. MADRID · NOV 21-22 · 2014
    let
    •  The new var.
    •  Block scope.
    •  No hoisting.
    Actually, it does hoist, but
    raises a syntactic error at
    runtime when used before
    being asigned.

    View full-size slide

  45. MADRID · NOV 21-22 · 2014
    Hard to transpile properly.

    View full-size slide

  46. MADRID · NOV 21-22 · 2014
    CLASSES

    View full-size slide

  47. MADRID · NOV 21-22 · 2014
    CLASSES
    The Good Parts

    View full-size slide

  48. MADRID · NOV 21-22 · 2014
    METHODS

    View full-size slide

  49. MADRID · NOV 21-22 · 2014

    View full-size slide

  50. MADRID · NOV 21-22 · 2014
    STRING
    TEMPLATES
    Interlude

    View full-size slide

  51. MADRID · NOV 21-22 · 2014

    View full-size slide

  52. MADRID · NOV 21-22 · 2014
    Computed
    properties

    View full-size slide

  53. MADRID · NOV 21-22 · 2014

    View full-size slide

  54. MADRID · NOV 21-22 · 2014

    View full-size slide

  55. MADRID · NOV 21-22 · 2014

    View full-size slide

  56. MADRID · NOV 21-22 · 2014

    View full-size slide

  57. MADRID · NOV 21-22 · 2014
    {G,S}ETTER

    View full-size slide

  58. MADRID · NOV 21-22 · 2014

    View full-size slide

  59. MADRID · NOV 21-22 · 2014

    View full-size slide

  60. MADRID · NOV 21-22 · 2014
    FUNCTIONS

    View full-size slide

  61. MADRID · NOV 21-22 · 2014
    SPREAD OP

    View full-size slide

  62. MADRID · NOV 21-22 · 2014

    View full-size slide

  63. MADRID · NOV 21-22 · 2014

    View full-size slide

  64. MADRID · NOV 21-22 · 2014

    View full-size slide

  65. MADRID · NOV 21-22 · 2014

    View full-size slide

  66. MADRID · NOV 21-22 · 2014

    View full-size slide

  67. MADRID · NOV 21-22 · 2014

    View full-size slide

  68. MADRID · NOV 21-22 · 2014
    1 -> 2 -> 3

    View full-size slide

  69. MADRID · NOV 21-22 · 2014
    1 -> 2 -> 3
    14

    View full-size slide

  70. MADRID · NOV 21-22 · 2014

    View full-size slide

  71. MADRID · NOV 21-22 · 2014
    DEFAULT

    View full-size slide

  72. MADRID · NOV 21-22 · 2014

    View full-size slide

  73. MADRID · NOV 21-22 · 2014

    View full-size slide

  74. MADRID · NOV 21-22 · 2014
    fn

    View full-size slide

  75. MADRID · NOV 21-22 · 2014

    View full-size slide

  76. MADRID · NOV 21-22 · 2014

    View full-size slide

  77. MADRID · NOV 21-22 · 2014
    Most important => fn feature
    LEXICAL
    THIS

    View full-size slide

  78. MADRID · NOV 21-22 · 2014

    View full-size slide

  79. MADRID · NOV 21-22 · 2014
    No time for…

    View full-size slide

  80. MADRID · NOV 21-22 · 2014
    CLASSES
    The not-that-good Parts

    View full-size slide

  81. MADRID · NOV 21-22 · 2014
    GENERATOR

    View full-size slide

  82. MADRID · NOV 21-22 · 2014
    COMPREHENSIONS

    View full-size slide

  83. MADRID · NOV 21-22 · 2014
    async/await
    ES7

    View full-size slide

  84. MADRID · NOV 21-22 · 2014
    NAMED EXPORTS

    View full-size slide

  85. MADRID · NOV 21-22 · 2014
    # LITERALS

    View full-size slide

  86. MADRID · NOV 21-22 · 2014
    # LITERALS
    BINARY: 0b101

    View full-size slide

  87. MADRID · NOV 21-22 · 2014
    # LITERALS
    BINARY: 0b101
    OCTAL: 0o67

    View full-size slide

  88. MADRID · NOV 21-22 · 2014
    # LITERALS

    View full-size slide

  89. MADRID · NOV 21-22 · 2014
    APIs

    View full-size slide

  90. MADRID · NOV 21-22 · 2014
    QUESTIONS?

    View full-size slide

  91. MADRID · NOV 21-22 · 2014
    Thank you!
    @Serabe
    [email protected]

    View full-size slide