Lo que la cafeína le hizo a JS

Edición extendida y revisada dada en MadridJS. Enero 2015.

Transcript

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

   View Slide

2. Sergio Arbeo
   {Back,Front}-end developer at codecantor
   @Serabe
   Lo  que  la  cafeína  le  hizo  a  JS  
   Historia  de  un  despecho  transpilado  
   Extended version,
   just not Peter-
   Jackson-extended
   

   View Slide

3. Sergio Arbeo
   {Back,Front}-end developer at codecantor
   @Serabe
   Lo  que  la  cafeína  le  hizo  a  JS  
   Historia  de  un  despecho  transpilado  
   Extended version,
   just not Peter-
   Jackson-extended
   You know what I
   mean
   

   View Slide

4. View Slide

5. CODECANTOR
   

   View Slide

6. /Ember-js-Madrid
   

   View Slide

7. I loved
   CoffeeScript
   

   View Slide

8. I loved
   CoffeeScript
   

   View Slide

9. CoffeeScript
   V
   JavaScript
   

   View Slide

10. CoffeeScript
    V
    ES5
    

    View Slide

11. CoffeeScript
    ES6
    V
    

    View Slide

12. WHY?  
    

    View Slide

13. WHY?  
    Implicit returns
    

    View Slide

14. WHY?  
    Implicit returns
    No named functions
    

    View Slide

15. WHY?  
    Implicit returns
    No named functions
    Strange regexes
    

    View Slide

16. WHY?  
    Implicit returns
    No named functions
    Strange regexes
    Significant whitespace
    

    View Slide

17. WHY?  
    Implicit returns
    No named functions
    Strange regexes
    Significant whitespace
    Generators
    

    View Slide

18. Ember.JS  
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. ES6  
    

    View Slide

23. Destructuring  
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. NESTABLE  
    

    View Slide

29. View Slide

30. View Slide

31. Destructuring  
    DE
    

    View Slide

32. View Slide

33. Arrays  too  
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. NESTABLE  
    TOO
    

    View Slide

39. MODULES  
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. Named  exports  
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. Ember-­‐CLI  
    

    View Slide

51. let  /  const  
    

    View Slide

52. let  
    •  The  new  var.  
    •  Block  scope.  
    •  No  hoisRng.  
    

    View Slide

53. let  
    •  The  new  var.  
    •  Block  scope.  
    •  No  hoisRng.  
    Actually, it does hoist, but
    raises a syntactic error at
    runtime when used before
    being asigned.
    

    View Slide

54. Symbols  
    Interlude
    

    View Slide

55. Symbol  
    New  primiRve  type  that  serves  as  unique  IDs.  
    

    View Slide

56. Symbol  
    

    View Slide

57. CLASSES  
    

    View Slide

58. CLASSES  
    The Good Parts
    

    View Slide

59. METHODS  
    

    View Slide

60. View Slide

61. STRING  
    TEMPLATES  
    Interlude
    

    View Slide

62. View Slide

63. Computed  
    properRes  
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. SYMBOLS  
    Interlude
    

    View Slide

69. Symbol  
    Can  be  used  as  property  names.  
    keys
    

    View Slide

70. View Slide

71. Some  symbols  
    •  Symbol.hasInstance  
    •  Symbol.isConcatSpreadable  
    •  Symbol.isRegExp  
    •  Symbol.toPrimiRve  
    •  Symbol.toStringTag  
    •  Symbol.unscopables  
    •  Symbol.iterator  
    

    View Slide

72. {G,S}ETTER  
    

    View Slide

73. View Slide

74. View Slide

75. FUNCTIONS  
    

    View Slide

76. SPREAD  OP  
    

    View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. 1  -­‐>  2  -­‐>  3  
    

    View Slide

84. 1  -­‐>  2  -­‐>  3  
    14
    

    View Slide

85. View Slide

86. Symbol.iterator  
    12.2.4.2
    

    View Slide

87. View Slide

88. DEFAULT  
    

    View Slide

89. View Slide

90. View Slide

91. fn
    

    View Slide

92. View Slide

93. View Slide

94. Most  important  =>  fn  feature  
    LEXICAL
    THIS
    

    View Slide

95. View Slide

96. No  Rme  for…  
    

    View Slide

97. CLASSES  
    The not-that-good Parts
    

    View Slide

98. GENERATOR  
    

    View Slide

99. COMPREHENSIONS  
    

    View Slide

100. async/await  
     ES7
     

     View Slide

101. NAMED  EXPORTS  
     

     View Slide

102. #  LITERALS  
     

     View Slide

103. #  LITERALS  
     BINARY: 0b101
     

     View Slide

104. #  LITERALS  
     BINARY: 0b101
     OCTAL: 0o67
     

     View Slide

105. #  LITERALS  
     

     View Slide

106. APIs  
     

     View Slide

107. QUESTIONS?
     

     View Slide

108. Thank you!
     @Serabe
     sergio@codecantor.com
     

     View Slide