¿Qué ES 6? - Introducción a ECMAScript y Babel

Transcript

1. ¿Qué ES 6? Introducción a ECMAScript 6 y Babel (aka 6to5) / Dan Zajdband @dzajdband
2. getmango.com
3. ¿Qué es ES? 1995: Sun y Netscape anuncian JavaScript para Netscape 2.0 1996: Microsoft introduce JScript para IE 3.0 1996/97: Netscape estandariza JavaScript bajo el nombre de ECMAScript
4. ECMAScript "ECMAScript was always an unwanted trade name that sounds like a skin disease." Brendan Eich
5. ECMAScript 1999: ES3 introduce expresiones regulares y manejo de excepciones entre otras features. 2008: La especificación de ES4 es abandonada por razones políticas. 2009/11: ES5 trae strict mode, soporte para JSON, getters & setters... 2015: ES6 la especificación está pautada para ser presentada a mitad de este año. (2015-): ES7 Work in progress.
6. Evolución
7. ECMAScript 6 Metas Brindar una base para la creación de aplicaciones complejas Agregar utilidades del lenguaje Mantener compatibilidad con ES5
8. ECMAScript 6 Overview*
9. *Ordenado por nivel de polémica entre los presentes Un poquito de quilombo sin romper nada
10. Variables & scoping
11. let vs. var - Block scoping / / E S 6 i f ( t r u e ) { v a r x = 1 ; l e t y = 2 ; } c o n s o l e . l o g ( x ) ; / / 1 c o n s o l e . l o g ( y ) ; / / y i s n o t d e f i n e d / / E S 5 i f ( t r u e ) { v a r x = 1 ; v a r _ y = 2 ; } c o n s o l e . l o g ( x ) ; / / 1 c o n s o l e . l o g ( y ) ; / / y i s n o t d e f i n e d
12. const c o n s t P I = 3 . 1 4 ; P I = 8 ; / / E r r o r
13. Object literals
14. Shorthands / / E S 6 l e t f o o = ' b a r ' ; l e t x = { m y F u n c ( ) { r e t u r n 3 ; } , f o o } ; x . f o o ; / / b a r x . m y F u n c ( ) ; / / 3 / / E S 5 v a r f o o = " b a r " ; v a r x = { m y F u n c : f u n c t i o n m y F u n c ( ) { r e t u r n 3 ; } , f o o : f o o } ; x . f o o ; / / b a r x . m y F u n c ( ) ; / / 3
15. Computed property keys / / E S 6 l e t n o m b r e = ' M é t o d o ' ; l e t y = { [ ' m i ' + n o m b r e ] : " E s t e e s m i n o m b r e " } ; x . m i N o m b r e ; / / " E s t e e s m i n o m b r e " / / E S 5 v a r _ d e f i n e P r o p e r t y = f u n c t i o n ( o b j , k e y , v a l u e ) { r e t u r n O b j e c t . d e f i n e P r o p e r t y ( o b j , k e y , { v a l u e : v a l u e , e n u m e r a b l e : t r u e , c o n f i g u r a b l e : t r u e , w r i t a b l e : t r u e } ) ; } ; v a r n o m b r e = " M é t o d o " ; v a r y = _ d e f i n e P r o p e r t y ( { } , " m i " + n o m b r e , " E s t e e s m i n o m b r e " ) ; x . m i N o m b r e ; / / " E s t e e s m i n o m b r e "
16. Destructuring
17. Object destructuring / / E S 6 l e t f u l l N a m e = { " f i r s t " : " C o s m e " , " l a s t " : " F u l a n i t o " } ; c o n s t { f i r s t : F , l a s t : L } = f u l l N a m e ; l e t { f i r s t : f , l a s t : l } = f u l l N a m e ; f ; / / C o s m e l ; / / F u l a n i t o f = " C a r l o s " ; F = " C a r l o s " ; / / e r r o r : " F " i s r e a d - o n l y / / E S 5 v a r f u l l N a m e = { f i r s t : " C o s m e " , l a s t : " F u l a n i t o " } ; v a r F = f u l l N a m e . f i r s t ; v a r L = f u l l N a m e . l a s t ; v a r f = f u l l N a m e . f i r s t ; v a r l = f u l l N a m e . l a s t ; f ; / / C o s m e l ; / / F u l a n i t o f = " C a r l o s " ; F = " C a r l o s " ; / / e r r o r : " F " i s r e a d - o n l y
18. Array destructuring / / E S 6 l e t f = " C o s m e " ; l e t l = " F u l a n i t o " ; [ f , l ] = [ l , f ] ; f ; / / F u l a n i t o l ; / / C o s m e / / E S 5 v a r f = " C o s m e " ; v a r l = " F u l a n i t o " ; v a r _ r e f = [ l , f ] ; v a r _ r e f 2 = _ s l i c e d T o A r r a y ( _ r e f , 2 ) ; f = _ r e f 2 [ 0 ] ; l = _ r e f 2 [ 1 ] ; f ; / / F u l a n i t o l ; / / C o s m e
19. Multiple return values / / E S 6 f u n c t i o n m u l t i R e t ( ) { l e t x = " f o o " ; l e t y = " b a r " ; r e t u r n { x , y } ; } l e t { x , y } = m u l t i R e t ( ) ; x ; / / " f o o " y ; / / " b a r " / / E S 5 f u n c t i o n m u l t i R e t ( ) { v a r x = " f o o " ; v a r y = " b a r " ; r e t u r n { x : x , y : y } ; } v a r _ m u l t i R e t = m u l t i R e t ( ) ; v a r x = _ m u l t i R e t . x ; v a r y = _ m u l t i R e t . y ; x ; / / " f o o " y ; / / " b a r "
20. Parameter handling
21. Default, Named, Rest and Spread parameters / / E S 6 f u n c t i o n m i S P r i n t f ( s t r = ' C u a l q u i e r c o s a ' , { u p p e r c a s e } , . . . f o r m a t ) { f o r ( l e t p a r a m e t e r o f f o r m a t ) { s t r = s t r . r e p l a c e ( / % s / , p a r a m e t e r ) ; } i f ( u p p e r c a s e ) s t r = s t r . t o U p p e r C a s e ( ) ; r e t u r n s t r ; } m i S P r i n t f ( ' H o l a m e l l a m o % s y t e n g o % s a ñ o s . ' , { u p p e r c a s e : t r u e , f o o : ' b a r ' } , ' D a n ' , 2 5 ) ; / / " H O L A M E L L A M O D A N Y T E N G O 2 5 A Ñ O S " l e t b l a ; m i S P r i n t f ( . . . [ b l a , { u p p e r c a s e : f a l s e , f o o : ' b a r ' } , ' D a n ' , 2 5 ] ) ; / / " C u a l q u i e r c o s a "
22. Default, Named, Rest and Spread parameters / / E S 5 f u n c t i o n m i S P r i n t f ( _ x , _ r e f ) { f o r ( v a r _ l e n = a r g u m e n t s . l e n g t h , f o r m a t = A r r a y ( _ l e n > 2 ? _ l e n - 2 : 0 ) , _ k e y f o r m a t [ _ k e y - 2 ] = a r g u m e n t s [ _ k e y ] ; } v a r s t r = a r g u m e n t s [ 0 ] = = = u n d e f i n e d ? " C u a l q u i e r c o s a " : a r g u m e n t s [ 0 ] ; v a r u p p e r c a s e = _ r e f . u p p e r c a s e ; f o r ( v a r _ i t e r a t o r = f o r m a t [ S y m b o l . i t e r a t o r ] ( ) , _ s t e p ; ! ( _ s t e p = _ i t e r a t o r . n e x t v a r p a r a m e t e r = _ s t e p . v a l u e ; s t r = s t r . r e p l a c e ( / % s / , p a r a m e t e r ) ; } i f ( u p p e r c a s e ) s t r = s t r . t o U p p e r C a s e ( ) ; r e t u r n s t r ; } m i S P r i n t f ( " H o l a m e l l a m o % s y t e n g o % s a ñ o s . " , { u p p e r c a s e : t r u e , f o o : " b a r " } , " / / " H O L A M E L L A M O D A N Y T E N G O 2 5 A Ñ O S " v a r b l a = u n d e f i n e d ;
23. Arrow functions
24. Shorthand syntax / / E S 6 l e t d a t a = [ 1 , 2 , 3 ] ; l e t d o u b l e s = d a t a . m a p ( n u m = > n u m * 2 ) ; / / [ 2 , 4 , 6 ] d o u b l e s . f o r E a c h ( ( e l e m e n t , i n d e x ) = > { e l e m e n t = e l e m e n t * 2 ; d o S o m e t h i n g ( e l e m e n t ) ; } ) ; m y O b j . o n ( ' d a t a ' , ( ) = > c o n s o l e . l o g ( d o u b l e s ) ) ; / / E S 5 v a r d a t a = [ 1 , 2 , 3 ] ; v a r d o u b l e s = d a t a . m a p ( f u n c t i o n ( n u m ) { r e t u r n n u m * 2 ; } ) ; / / [ 2 , 4 , 6 ] d o u b l e s . f o r E a c h ( f u n c t i o n ( e l e m e n t , i n d e x ) { e l e m e n t = e l e m e n t * 2 ; d o S o m e t h i n g ( e l e m e n t ) ; } ) ; m y O b j . o n ( " d a t a " , f u n c t i o n ( ) { r e t u r n c o n s o l e . l o g ( d o u b l e s ) ; } ) ;
25. Lexical this / / E S 6 c o n s t a n c h o r = d o c u m e n t . g e t E l e m e n t B y I d ( ' c l i c k m e ' ) ; f u n c t i o n m y C o m p o n e n t ( ) { a n c h o r . a d d E v e n t L i s t e n e r ( ' c l i c k ' , ( ) = > t h i s . o n C l i c k ( ) ) ; } / / E S 5 v a r a n c h o r = d o c u m e n t . g e t E l e m e n t B y I d ( " c l i c k m e " ) ; f u n c t i o n m y C o m p o n e n t ( ) { v a r _ t h i s = t h i s ; a n c h o r . a d d E v e n t L i s t e n e r ( " c l i c k " , f u n c t i o n ( ) { r e t u r n _ t h i s . o n C l i c k ( ) ; } ) ; }
26. Classes
27. Basics / / E S 6 c l a s s P l a y e r { c o n s t r u c t o r ( n a m e , s k i l l s = 1 0 ) { t h i s . n a m e = n a m e ; t h i s . s k i l l s = s k i l l s ; } m a k e G o a l ( ) { t h i s . s k i l l s + = 5 ; } }
28. Basics / / E S 5 v a r P l a y e r = ( f u n c t i o n ( ) { f u n c t i o n P l a y e r ( n a m e ) { v a r s k i l l s = a r g u m e n t s [ 1 ] = = = u n d e f i n e d ? 1 0 : a r g u m e n t s [ 1 ] ; _ c l a s s C a l l C h e c k ( t h i s , P l a y e r ) ; t h i s . n a m e = n a m e ; t h i s . s k i l l s = s k i l l s ; } _ p r o t o t y p e P r o p e r t i e s ( P l a y e r , n u l l , { m a k e G o a l : { v a l u e : f u n c t i o n m a k e G o a l ( ) { t h i s . s k i l l s + = 5 ; } , w r i t a b l e : t r u e , c o n f i g u r a b l e : t r u e } } ) ; r e t u r n P l a y e r ; } ) ( ) ;
29. Static methods c l a s s P l a y e r { c o n s t r u c t o r ( n a m e , s k i l l s = 1 0 ) { t h i s . n a m e = n a m e ; t h i s . s k i l l s = s k i l l s ; } s t a t i c d o r s a l ( ) { r e t u r n M a t h . f l o o r ( M a t h . r a n d o m ( ) ) ; } }
30. Subclassing c l a s s M i l i t o e x t e n d s P l a y e r { c o n s t r u c t o r ( f n a m e ) { l e t s k i l l s = 2 5 ; s k i l l s = f n a m e = = = ' G a b r i e l ' ? 5 : 8 0 ; s u p e r ( f n a m e , ' M i l i t o ' , s k i l l s ) ; } m a k e G o a l ( ) { i f ( t h i s . f n a m e = = = ' D i e g o ' ) { s u p e r . m a k e G o a l ( ) ; } } }
31. Modules
32. Named exports / / E S 6 / / m e n u . j s e x p o r t f u n c t i o n g e t I t e m ( i n d e x ) { r e t u r n i t e m s [ i n d e x ] ; } e x p o r t c o n s t P I = 3 . 1 4 ; / / m a i n . j s i m p o r t { g e t I t e m } f r o m ' m e n u ' ; g e t I t e m ( 1 ) ; i m p o r t * a s m e n u f r o m ' m e n u ' ; m e n u . g e t I t e m ( 1 ) ; / / E S 5 / / m e n u . j s e x p o r t s . g e t I t e m = g e t I t e m ; f u n c t i o n g e t I t e m ( i n d e x ) { r e t u r n i t e m s [ i n d e x ] ; } v a r P I = e x p o r t s . P I = 3 . 1 4 ; / / m a i n . j s v a r _ m e n u = r e q u i r e ( " m e n u " ) ; v a r g e t I t e m = _ m e n u . g e t I t e m ; g e t I t e m ( 1 ) ; v a r m e n u = r e q u i r e ( " m e n u " ) ; m e n u . g e t I t e m ( 1 ) ;
33. Default exports / / E S 6 / / m e n u . j s e x p o r t d e f a u l t g e t I t e m ( i n d e x ) { r e t u r n i t e m s [ i n d e x ] ; } / / m a i n . j s i m p o r t g e t I t e m f r o m ' m e n u ' ; g e t I t e m ( 1 ) ; / / E S 5 / / m e n u . j s m o d u l e . e x p o r t s = g e t I t e m ; f u n c t i o n g e t I t e m ( i n d e x ) { r e t u r n i t e m s [ i n d e x ] ; } / / m a i n . j s v a r g e t I t e m = r e q u i r e ( ' m e n u ' ) ; g e t I t e m ( 1 ) ;
34. Template strings
35. Interpolation / / E S 6 c o n s t c h a m p i o n = ` R a c i n g ` ; c o n s t m y S t r i n g = ` e s t e e s m i s t r i n g m u l t i l i n e a . $ { c h a m p i o n } C a m p e ó n ! ` ; / / E S 5 c o n s t c h a m p i o n = ' R a c i n g ' ; c o n s t m y S t r i n g = " \ n e s t e e s \ n m i s t r i n g \ n
36. Tagged template strings f u n c t i o n t a g ( s t r i n g s , . . . v a l u e s ) { a s s e r t ( s t r i n g s [ 0 ] = = = ' a ' ) ; a s s e r t ( s t r i n g s [ 1 ] = = = ' b ' ) ; a s s e r t ( v a l u e s [ 0 ] = = = 0 ) ; r e t u r n ' w h a t e v e r ' ; } t a g ` a $ { 4 2 } b ` / / " w h a t e v e r "
37. stdlib
38. Maps l e t m a p = n e w M a p ( ) ; l e t o b j = { } ; m a p . s e t ( o b j , 1 2 3 ) ; m a p . g e t ( o b j ) ; / / 1 2 3 m a p . h a s ( o b j ) ; / / t r u e m a p . d e l e t e ( o b j ) ; f o r ( l e t [ k , v ] o f m a p ) { c o n s o l e . l o g ( k , v ) ; }
39. Sets l e t s e t = n e w S e t ( ) ; s e t . a d d ( ' h o l a ' ) ; s e t . a d d ( ' m u n d o ' ) ; s e t . a d d ( ' h o l a ' ) ; f o r ( l e t e l e m o f s e t ) { c o n s o l e . l o g ( e l e m ) ; } / / " h o l a m u n d o " l e t u n i q u e = [ . . . n e w S e t ( [ 1 , 2 , 3 , 5 , 1 , 2 , 3 , 1 , 5 ] ) ; ] ; / / [ 1 , 2 , 3 , 5 ]
40. Object.assign l e t o b j = { x : 8 , y : 1 0 } ; O b j e c t . a s s i g n ( o b j , { y : 5 } ) ; o b j ; / / { x : 8 : y 5 }
41. Strings utilities ` $ { ' n a n ' . r e p e a t ( 6 ) } a B a t m a n ` ; / / n a n a n a n a n a n a n a n a n a n a B a t m a n ' a b c ' . s t a r t s W i t h ( ' a b ' ) ; / / t r u e ' a b c ' . e n d s W i t h ( ' b c ' ) ; / / t r u e ' n e u q u e n ' . i n c l u d e s ( ' u q u ' ) ; / / t r u e http://esdiscuss.org/topic/having-a-non-enumerable- array-prototype-contains-may-not-be-web-compatible
42. Symbols
43. Symbols c o n s t M Y _ K E Y = S y m b o l ( ) ; l e t o b j = { } ; o b j [ M Y _ K E Y ] = 1 2 3 ; c o n s o l e . l o g ( o b j [ M Y _ K E Y ] ) ; / / 1 2 3
44. Iteration
45. Iterables l e t f i b o n a c c i = { [ S y m b o l . i t e r a t o r ] ( ) { l e t p r e = 0 , c u r = 1 ; r e t u r n { n e x t ( ) { [ p r e , c u r ] = [ c u r , p r e + c u r ] ; r e t u r n { d o n e : f a l s e , v a l u e : c u r } } } } } f o r ( v a r n o f f i b o n a c c i ) { / / t r u n c a t e t h e s e q u e n c e a t 1 0 0 0 i f ( n > 1 0 0 0 ) b r e a k ; }
46. for-of / / E S 6 l e t i t e m s = [ 1 , 2 , 4 ] ; f o r ( l e t i t e m o f i t e m s ) { c o n s o l e . l o g ( i t e m ) ; } / / E S 5 v a r i t e m s = [ 1 , 2 , 4 ] ; f o r ( v a r _ i t e r a t o r = i t e m s [ S y m b o l . i t e r a t o r ] ( ) , _ s t e p ; ! ( _ s t e p = _ i t e r a t o r . n e x t ( ) ) v a r i t e m = _ s t e p . v a l u e ; c o n s o l e . l o g ( i t e m ) ; }
47. Comprehensions v a r s q u a r e d = [ f o r ( x o f [ 1 , 2 , 3 , 4 , 5 ] ) i f ( x > 2 ) x * x ] ;
48. Generators
49. Generators v a r f i b o n a c c i = { [ S y m b o l . i t e r a t o r ] : f u n c t i o n * ( ) { v a r p r e = 0 , c u r = 1 ; f o r ( ; ; ) { v a r t e m p = p r e ; p r e = c u r ; c u r + = t e m p ; y i e l d c u r ; } } } f o r ( v a r n o f f i b o n a c c i ) { / / t r u n c a t e t h e s e q u e n c e a t 1 0 0 0 i f ( n > 1 0 0 0 ) b r e a k ; c o n s o l e . l o g ( n ) ; }
50. Otros Promises Proxies Tail call optimization
51. Use next generation JavaScript, today.
52. Babel Transpiler de ES6+ a ES5 Genera código claro y legible Funciona tanto en node.js como en el navegador Extensible via plugins (hay muchos andando) Comunidad creciente
53. Features de ES7 async/await f u n c t i o n p r o m i s i n g O p e r a t i o n ( ) { r e t u r n n e w P r o m i s e ( f u n c t i o n ( r e s o l v e , r e j e c t ) { s e t T i m e o u t ( f u n c t i o n ( ) { i f ( M a t h . r o u n d ( M a t h . r a n d o m ( ) ) ) r e s o l v e ( ' S u c c e s s ! ' ) ; e l s e r e j e c t ( ' F a i l u r e ! ' ) ; } , 1 0 0 0 ) ; } } a s y n c f u n c t i o n f o o ( ) { v a r m e s s a g e = a w a i t p r o m i s i n g O p e r a t i o n ( ) ; c o n s o l e . l o g ( m e s s a g e ) ; }
54. Referencias ES6 Rocks Understanding ES6 Blog de Axel Rauschmayer Tour de Babel ES6 Overview
55. Preguntas?
56. Gracias