enterjs 2014 : ECMAScript 6 – the future is now

My enterjs 2014 slides (http://www.enterjs.de/abstracts#ecmascript6–the-future-is-now)

Transcript

1. ECMAScript 6 – the future is now
2. About me Lars Gersmann Senior Software Developer : Content Management AG AngularJS, Node.js, Gulp, ES6, HTML5 / Less.js, Sass / Docker / Bleeding edge browser technologies
3. ECMAScript 6 – the future is now
4. The big picture Language enhancements Modules How can I use it today ?
5. Language enhancements l e t statement block scoped variant of v a r l e t i = ' a l p h a ' ; . . . f o r ( l e t i = 0 ; i < 1 0 ; i + + ) { . . . } / / i = = = ' a l p h a ' . . . i f ( i = = = ' a l p h a ' ) { l e t i = 1 0 ; . . . } / / i = = ' a l p h a ' / * C A V E A T : n o h o i s t i n g c h a r a c t e r i s t i c s ! * / i f ( c o n d i t i o n ) { c o n s o l e . l o g ( v a l u e ) ; / / R e f e r e n c e E r r o r ! l e t v a l u e = " b l u e " ; }
6. Language enhancements c o n s t statement constants must be initialized at declaration c o n s t M A X _ I T E M S = 3 0 ; c o n s t N A M E ; / / S y n t a x e r r o r : m i s s i n g i n i t i a l i z a t i o n constants are block scoped i f ( c o n d i t i o n ) { c o n s t M A X _ I T E M S = 5 ; . . . }
7. Language enhancements Default parameters f u n c t i o n r e n d e r ( o b j , o p t i o n s = g e t D e f a u l t s ( ) ) { / / e s 5 : o p t i o n s = o p t i o n s | | g e t D e f a u l t s ( ) ; . . . } . . . r e n d e r ( m y O b j ) ; / / - > r e n d e r ( m y O b j , g e t D e f a u l t R e n d e r O p t i o n s ( ) ) caveat : u n d e f i n e d will be replaced by default parameter f u n c t i o n r e n d e r ( o b j , o p t i o n s = g e t D e f a u l t s ( ) , c a l l b a c k ) { . . . } r e n d e r ( m y O b j , u n d e f i n e d , m y C a l l b a c k ) ; / / - > r e n d e r ( m y O b j , g e t D e f a u l t s ( ) , m y C a l l b a c k )
8. Language enhancements Rest parameters Rest parameter is an true A r r a y instead of a r g u m e n t s f u n c t i o n f o o ( f i r s t , . . . r e s t ) { r e t u r n r e s t . c o n c a t ( ' l a s t ' ) ; } c o n s o l e . l o g ( f o o ( 1 , 2 , 3 ) ) ; / / - > [ 2 , 3 , ' l a s t ' ] caveat : no other named arguments can follow in function declaration f u n c t i o n f o o ( f i r s t , . . . n u m b e r s , l a s t ) { / / - > S y n t a x e r r o r : C a n ' t h a v e a n a m e d p a r a m e t e r a f t e r r e s t p a r a m e t e r s
9. Language enhancements . . . Spread operator v a r v = [ 2 5 , 5 0 ] , m a x ; m a x = M a t h . m a x ( . . . v ) ; / / e s 5 : M a t h . m a x ( v [ 0 ] , v [ 1 ] ) ; m a x = M a t h . m a x ( 1 7 , . . . v , 2 7 ) ; / / e s 5 : M a t h . m a x ( 1 7 , v [ 0 ] , v [ 1 ] , 2 7 ) ; a r r a y 2 . p u s h ( . . . v ) ; / / e s 5 : a r r a y 2 . p u s h ( v [ 0 ] , v [ 1 ] ) ; Tip : convert array like structures into a true A r r a y on the fly [ . . . d o c u m e n t . q u e r y S e l e c t o r A l l ( " d i v . b i g " ) ] . f o r E a c h ( / / j Q u e r y ( ' d i v . b i g ' ) e l m = > e l m . c l a s s L i s t . r e m o v e ( ' b i g ' ) / / . r e m o v e C l a s s ( ' b i g ' ) ) ;
10. Language enhancements Object literal improvements Method initializer shorthand f u n c t i o n c r e a t e P e r s o n ( n a m e , a g e ) { r e t u r n { n a m e , / / e s 5 : n a m e : n a m e , f a m i l y N a m e , / / e s 5 : f a m i l y N a m e : f a m i l y N a m e , f u l l N a m e ( ) { / / e s 5 : f u l l N a m e : f u n c t i o n ( ) { r e t u r n t h i s . n a m e + ' ' + t h i s . f a m i l y N a m e ; } } ; Compound property names v a r p r o p e r t y = " f o o " , v a l u e = " b a r " ; v a r o b j = { / / e s 5 : v a r o b j = { } ; [ p r o p e r t y + ' _ b a r ' ] : v a l u e / / o b j [ p r o p e r t y + ' _ b a r ' ] = v a l u e ; }
11. Language enhancements Destructuring assignment syntactic sugar for A r r a y 's [ a , b ] = [ b , a ] ; / / e s 5 : l e t t m p = a ; a = b ; b = t m p ; l e t [ x , y ] = f ( ) ; / / - > f ( ) r e t u r n s a n a r r a y [ 2 ] c o n s o l e . l o g ( ' x = ' , x , ' , y = ' + y ) ; / / e s 5 : v a r m a t c h = / ( \ d + ) - ( d + ) - ( \ d + ) / . m a t c h ( ' 2 0 1 4 - 6 - 3 0 ' ) ; / / v a r y e a r = m a t c h [ 1 ] , m o n t h = m a t c h [ 2 ] , d a y = m a t c h [ 3 ] ; l e t [ , y e a r , m o n t h , d a y ] = / ( \ d + ) - ( \ d + ) - ( \ d + ) / . m a t c h ( ' 2 0 1 4 - 6 - 3 0 ' ) ; syntactic sugar for O b j e c t 's v a r { p r o t o c o l , h o s t n a m e , p o r t } = d o c u m e n t . l o c a t i o n ; / / d i r e c t m a p p i n g v a r { h o s t n a m e : s e r v e r , p o r t } = d o c u m e n t . l o c a t i o n ; / / m a p p e d t o { s e r v e r , p o r t }
12. Language enhancements ` h e l l o $ { n a m e } ` Template strings featuring multiline strings and expression substitution l e t u r l = " h t t p : / / e x a m p l e . c o m " ; l e t d e c o r a t i o n = { / * t a r g e t : " _ b l a n k " , * / l a b e l : " e x a m p l e " } ; l e t a n c h o r = ` < a u r l = " $ { u r l } " t a r g e t = " $ { d e c o r a t i o n . t a r g e t | | ' b l a n k ' } " > $ { d e c o r a t i o n . l a b e l } < / a > ` ; Tag can be used for custom DSL building (real world example : XRegExp - multiline regular expression definition) f u n c t i o n s a f e h t m l ( l i t e r a l s , . . . v a l u e s ) { / / p r o c e s s e v a l u a t e d l i t e r a l s a n d v a l u e s a n r e t u r n a s a f e h t m l e n c o d e d s t r i n g . . . } l e t a n c h o r = s a f e h t m l ` < a u r l = " $ { u r l } " t a r g e t = " $ { d e c o r a t i o n . t a r g e t | | ' b l a n k ' } " > $ { d e c o r a t i o n . l a b e l } < / a > ` ;
13. Language enhancements = > Arrow functions j Q u e r y ( " b u t t o n " ) . o n ( " c l i c k " , e v e n t = > c o n s o l e . l o g ( e v e n t . t a r g e t ) ) ; l e t b a s e = ( ) = > d o c u m e n t . l o c a t i o n . h r e f ; / / n o a r g u m e n t s r e q u i r e p a r e n t h e s i s c o n s o l e . l o g ( b a s e ( ) ) ; l e t t o U p p e r = s = > s . t o U p p e r C a s e ( ) ; / / s i n g l e a r g u m e n t r e q u i r e d o e s n t r e q u i r e p a r e n t h e s i s c o n s o l e . l o g ( t o U p p e r ( " h u h u " ) ) ; / / " H U H U " v a r v a l u e s = [ 9 , 7 , 1 , 5 ] ; / / m u l t i p l e a r g u m e n t s r e q u i r e p a r e n t h e s i s v a l u e s . s o r t ( ( a , b ) = > a - b ) ; / / = > [ 1 , 5 , 7 , 9 ] ; v a l u e s . s o r t ( ( a , b ) = > { / / t r a d i t i o n a l s t y l e d a r r o w f u n c t i o n w i t h r e t u r n s t a t e m e n t r e t u r n a - b ; } ) ; *Implicit t h i s binding to definition scope. c a l l ( ) , a p p l y ( ) , b i n d ( ) will have no effect. Arrow functions cannot be used with n e w .
14. Language enhancements f o r ( . . . o f . . . ) statement A r r a y , I t e r a t o r /I t e r a b l e support f o r ( l e t v o f [ 1 , 3 , 5 , 7 ] ) { . . . f o r ( l e t [ i n d e x , v a l u e ] o f [ " a " , " b " , " c " ] . e n t r i e s ( ) ) { . . . A r r a y , I t e r a t o r /I t e r a b l e comprehension l e t s q u a r e d = [ f o r ( x o f [ 1 , 2 , 3 ] ) x * x ] ; / / - > [ 1 , 4 , 9 ] l e t s q u a r e d O d d = [ f o r ( x o f [ 1 , 2 , 3 ] ) i f ( x % 2 ) x * x ] ; / / - > [ 1 , 9 ] l e t v = [ f o r ( [ i n d e x , v a l u e ] o f [ " a " , " b " , " c " ] . e n t r i e s ( ) ) [ v a l u e . t o U p p e r C a s e ( ) , i n d e x ] ] ; / / v = [ [ " A " , 0 ] , [ " B " , 1 ] , [ " C " , 2 ] ]
15. Language enhancements f u n c t i o n * Generator A Generator is a function y i e l d ing an unlimited amount of values wrapped in a automagic I t e r a t o r instance. f u n c t i o n * g e n e r a t e ( ) { l e t i = 0 ; w h i l e ( i < 5 ) { y i e l d i + + ; } } f o r ( l e t v o f g e n e r a t e ( ) ) { / / u s i n g f o r . . . o f s t a t e m e n t c o n s o l e . l o g ( v ) ; / / - > 0 , 1 , 2 , 3 , 4 } l e t i t e r = g e n e r a t e ( ) , n e x t ; / / u s i n g w h i l e s t a t e m e n t w h i l e ( ! ( n e x t = i t e r . n e x t ( ) ) . d o n e ) { c o n s o l e . l o g ( n e x t . v a l u e ) ; / / - > 0 , 1 , 2 , 3 , 4 }
16. Language enhancements f u n c t i o n * Generator y i e l d * delegates control to another G e n e r a t o r f u n c t i o n * w a l k ( n o d e ) { f o r ( l e t c h i l d o f n o d e . c h i l d r e n ( ) ) { y i e l d * w a l k ( c h i l d ) ; } y i e l d n o d e ; } f o r ( l e t n o f w a l k ( r o o t ) ) { c o n s o l e . l o g ( n ) ; }
17. Language enhancements f u n c t i o n * Generator Passing arguments between consumer and I t e r a t o r around f u n c t i o n * s u m m a r i z e ( s u m = 0 ) { w h i l e ( t r u e ) { s u m + = y i e l d s u m ; c o n s o l e . l o g ( s u m ) ; } } l e t t o t a l = s u m m a r i z e ( 1 0 ) ; t o t a l . n e x t ( ) ; f o r ( l e t v o f [ 1 , 3 , 6 ] ) { t o t a l . n e x t ( v ) ; } / / " 1 1 " , " 1 4 " , " 2 0 "
18. Language enhancements f u n c t i o n * Generator Bonus : use y i e l d * to execute async functions sequential ! f u n c t i o n s p a w n ( g e n ) { v a r i t e r = g e n ( m s g = > i t e r . n e x t ( m s g . t o U p p e r C a s e ( ) ) ) ; i t e r . n e x t ( ) ; / / r e s u m e ( a k a s t a r t ) } s p a w n ( f u n c t i o n * ( r e s u m e ) { c o n s o l e . l o g ( " b e f o r e " ) ; c o n s o l e . l o g ( y i e l d s e t T i m e o u t ( ( ) = > r e s u m e ( " h e l l o " ) , 1 0 0 0 ) ) ; / / s u s p e n d c o n s o l e . l o g ( y i e l d s e t T i m e o u t ( ( ) = > r e s u m e ( " w o r l d " ) , 1 0 0 0 ) ) ; / / s u s p e n d c o n s o l e . l o g ( " a f t e r " ) ; } ) ; / / " b e f o r e " / / " H E L L O " / / " W O R L D " / / " a f t e r "
19. Language enhancements C l a s s es c l a s s P o s i t i o n { c o n s t r u c t o r ( x , y ) { t h i s . d a t a = { x , y } ; } s e t x ( x ) { t h i s . d a t a . x = x ; } g e t x ( ) { r e t u r n t h i s . d a t a . x ; } t o S t r i n g ( ) { r e t u r n ` P o s i t i o n ( = $ { t h i s . x } , $ { t h i s . d a t a . y } ) ` ; } . . . } l e t p = n e w P o s i t i o n ( 0 , 2 0 ) ; p . x = 1 5 ; c o n s o l e . l o g ( ` p i s $ { p } ` ) ; / / " p i s P o s i t i o n ( = 1 5 , 2 0 ) " . . .
20. Language enhancements C l a s s es . . . c l a s s S h a p e e x t e n d s P o s i t i o n { c o n s t r u c t o r ( x , y , w i d t h , h e i g h t ) { s u p e r ( x , y ) ; O b j e c t . a s s i g n ( t h i s . d a t a , { w i d t h , h e i g h t } ) ; } g e t d i m e n s i o n ( ) { r e t u r n { w i d t h : t h i s . d a t a . w i d t h , h e i g h t : t h i s . d a t a . h e i g h t } ; } t o S t r i n g ( ) { r e t u r n ` S h a p e ( = $ { s u p e r . t o S t r i n g ( ) } , $ { t h i s . d i m e n s i o n . w i d t h } , $ { t h i s . d i m e n s i o n . h e i g h t } ) ` ; } } l e t s = n e w S h a p e ( 0 , 2 0 , 1 0 0 , 7 0 } ) ; s . x = 1 5 ; s . w i d t h = 5 0 ; c o n s o l e . l o g ( ` s i s $ { s } ` ) ; / / " s i s S h a p e ( = P o s i t i o n ( = 1 5 , 2 0 ) , 5 0 , 7 0 ) " c o n s o l e . l o g ( s i n s t a n c e o f P o s i t i o n , s i n s t a n c e o f S h a p e ) ; / / " t r u e t r u e " Inheritance, s u p e r access
21. Modules import / export Modules allows the definition of code with explicit e x p o r t s, i m p o r t specific exported names from those modules, and keep these name separate. / / l i b / f o o . j s e x p o r t d e f a u l t c l a s s F o o { . . . } e x p o r t c o n s t V E R S I O N = ' 1 . 0 ' ; e x p o r t v a r u t i l = { e s c a p e ( s ) { . . . } } ; / / l i b / b a r . j s e x p o r t f u n c t i o n b a r ( ) { . . . } e x p o r t c o n s t V E R S I O N = ' 1 . 2 ' ; i m p o r t F o o f r o m ' . / l i b / f o o ' ; / / i m p o r t d e f a u l t e x p o r t i m p o r t { u t i l , V E R S I O N a s U T I L _ V E R S I O N } f r o m ' . / l i b / f o o ' ; / / i m p o r t u t i l a s u t i l , V E R S I O N a s U T I L _ V E R S I O N i m p o r t { b a r , V E R S I O N a s B A R _ V E R S I O N } f r o m ' . / l i b / b a r ' ; c o n s o l e . l o g ( U T I L _ V E R S I O N , B A R _ V E R S I O N ) ; / / " 1 . 0 1 . 2 " u t i l . e s c a p e ( " h e l l o w o r l d " ) ;
22. Modules Module Loader (S y s t e m . * ) ES6 defines a module loader interface for loading scripts dynamically (in the browser) < s c r i p t > P r o m i s e . a l l ( [ S y s t e m . i m p o r t ( ' . / l i b / f o o ' ) , S y s t e m . i m p o r t ( ' . / l i b / b a r ' ) ] ) . t h e n ( f u n c t i o n ( [ f o o , b a r ] ) { v a r o b j = n e w f o o . F o o ( ) ; c o n s o l e . l o g ( f o o . V E R S I O N , b a r . V E R S I O N ) ; / / " 1 . 0 1 . 2 " f o o . u t i l . e s c a p e ( " h e l l o w o r l d " ) ; } ) . c a t c h ( e r r ) { t h r o w e ; } ) ; < / s c r i p t >
23. Can I use it today ? Most modern browsers supports ES6 partially (see ECMAScript 6 compatibility table) NodeJS supports many ES6 features (- - h a r m o n y flag) es6-shim provides ES6 API for legacy JavaScript engines Native supported ES6 features growing monthly
24. Can I use it today ? YES, You Can ! Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use future Ecmascript features today. Traceur transpiles most* ES6 + some of ES7 features into today's Javascript (ES5). * except of non shimmable/transpilable features like P r o x y , O b j e c t . o b s e r v e ( ) , new R e g E x p flags ...
25. Traceur ES6 transpiler Tooling transpiles ES6 sourcecode to ES5 can be used as commandline tool, Grunt task or GulpJS task : v a r g u l p = r e q u i r e ( ' g u l p ' ) , t r a c e u r = r e q u i r e ( ' g u l p - t r a c e u r ' ) ; g u l p . t a s k ( ' d e f a u l t ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' s r c / a p p . j s ' ) . p i p e ( t r a c e u r ( { s o u r c e M a p : t r u e } ) ) . p i p e ( g u l p . d e s t ( ' d i s t ' ) ) ; } ) ; supports AMD, CommonJS, SystemJS or all-in-one ES5 code as output. Sourcemap support for easy debugging. provides new ES6 API's (S e t , M a p , P r o m i s e etc.). Compile ES6 on the fly. Testing ES6 today is easy using Mocha/Jasmine and Karma/Protractor : i m p o r t N e s t e d M a p f r o m " . . / . . / s r c / c o r e / n e s t e d m a p " ; d e s c r i b e ( " N e s t e d M a p " , ( ) = > { i t ( " c o n s t r u c t o r " , ( ) = > { l e t n m = n e w N e s t e d M a p ( ) ; e x p e c t ( n m . p a r e n t ) . t o B e N u l l ( ) ; l e t _ n m = n e w N e s t e d M a p ( n m ) ; e x p e c t ( _ n m . p a r e n t ) . t o B e ( n m ) ; } ) ; } ) ;
26. Traceur ES6 transpiler NodeJS $ n p m i n s t a l l t r a c e u r make Traceur the default JS loader for NodeJS / / t e s t . e s 6 i m p o r t { b } f r o m ' . / r e s o u r c e s / b . e s 6 ' ; c o n s o l e . l o g ( b ) ; / / r e s o u r c e s / b . e s 6 e x p o r t v a r b = ' B B B ' ; / / a p p . j s v a r t r a c e u r = r e q u i r e ( ' t r a c e u r ' ) ; t r a c e u r . r e q u i r e . m a k e D e f a u l t ( f u n c t i o n ( f i l e n a m e ) { r e t u r n f i l e n a m e . e n d s W i t h ( ' . e s 6 ' ) ; } ) ; r e q u i r e ( ' . / t e s t . e s 6 ' ) ;
27. Traceur ES6 transpiler Browser In-browser transpilation < s c r i p t s r c = " h t t p s : / / t r a c e u r - c o m p i l e r . g o o g l e c o d e . c o m / g i t / b i n / t r a c e u r . j s " t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / t r a c e u r - c o m p i l e r . g o o g l e c o d e . c o m / g i t / s r c / b o o t s t r a p . j s " t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p < s c r i p t > t r a c e u r . o p t i o n s . e x p e r i m e n t a l = t r u e ; < / s c r i p t > < s c r i p t t y p e = " m o d u l e " > c l a s s G r e e t e r { c o n s t r u c t o r ( m e s s a g e ) { t h i s . m e s s a g e = m e s s a g e ; } g r e e t ( ) { d o c u m e n t . q u e r y S e l e c t o r ( ' # m e s s a g e ' ) . i n n e r H T M L = t h i s . m e s s a g e ; } } ; l e t g r e e t e r = n e w G r e e t e r ( ' H e l l o , w o r l d ! ' ) ; g r e e t e r . g r e e t ( ) ; < / s c r i p t > or using already transpiled files : < s c r i p t s r c = " b i n / t r a c e u r - r u n t i m e . j s " > < / s c r i p t > < s c r i p t s r c = " o u t / g r e e t e r . j s " > < / s c r i p t >
28. Should I use ES6 today ? PRO small standard based vanilla code much improved readability will result in better productivity less legacy dependencies (like jQuery, Underscore etc.) making your code more future proof less code rewrites over the years huge performance speedup when ES6 will be arrived natively at browsers ES6 modules simplify larger applications sourece code management ES6 adaption in browsers and NodeJS is increasing monthly CONTRA using ES6 today in legacy JS engines makes your toolchain more complicated Traceur is just a workaround : transpiled code is larger and slower than it's ES6 source. Native ES6 language features will not be used in generated code ES6 is a huge step requiring learning to use new language features the right way
29. Should I use ES6 today ? My experience If your toolchain is well done (GulpJS, gulp-watch, Traceur, Jasmine/Karma for testing) ES6 is a pleasure to use. Learning curve is steep. Traceur is getting very stable. My guess ES6 will be adapted by most browsers until 2016 - including Internet Explorer. NodeJS will support ES6 mostly in 2014. ES6 features will be adapted very fast by popular NodeJS modules (see Koa as an good ES6 example) because of its massive simplifying async features. Modern browser libraries like AngularJS 2.0 will be based on ES6 (not a guess - reality !) My advise Start learning ! Use it in non critical/inhouse applications/modules to get experienced. Be prepared when everybody supports ES6.
30. What I did'nt told you ... New classes Symbol, Set, Map, Promise, Iterator ... Object enhancements String, Object, Array, ...
31. Questions ?
32. FINI Thank you !! Slides / Updates will be available at orangevolt.blogspot.com Lars Gersmann (lars.gersmann@gmail.com) Github : https://github.com/lgersman Content Management AG (cm4all.com)