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

ES2015 and Your Rails App - Riverside Ruby Group

kickinbahk
February 17, 2016

ES2015 and Your Rails App - Riverside Ruby Group

An overview of some of new ES2015 features.

kickinbahk

February 17, 2016
Tweet

More Decks by kickinbahk

Other Decks in Technology

Transcript

  1. New Features Var vs Let/Const Replacing IIFEs with Blocks Arrow

    Functions Strings Destructuring Modules Parameters
  2. Var vs Let/Const Replacing IIFEs with Blocks Arrow Functions Parameters

    Strings New Features cont. Promises Generators
  3. f u n c t i o n f (

    ) { f o r ( v a r i = 2 ; i < 1 0 ; i + = 1 ) { c o n s o l e . l o g ( " i = " + i ) ; } c o n s o l e . l o g ( i ) ; } f ( ) ;
  4. Let and Const f u n c t i o

    n m y F u n c ( ) { { l e t x ; { / / o k a y , b l o c k s c o p e d n a m e c o n s t x = " s n e a k y " ; / / e r r o r , c o n s t x = " f o o " ; } / / o k a y , d e c l a r e d w i t h ` l e t ` x = " b a r " ; / / e r r o r , a l r e a d y d e c l a r e d i n b l o c k l e t x = " i n n e r " ; } }
  5. Es5 IIFE: ( f u n c t i o

    n ( ) { v a r f o o d = ' M e o w M i x ' ; } ( ) ) ; c o n s o l e . l o g ( f o o d ) ; / / R e f e r e n c e E r r o r ES6 Blocks: { l e t f o o d = ' M e o w M i x ' ; } c o n s o l e . l o g ( f o o d ) ; / / R e f e r e n c e E r r o r
  6. Shorter Code... f u n c t i o n

    f o o ( x , y ) { r e t u r n x + y ; } / / v e r s u s v a r f o o = ( x , y ) = > x + y ;
  7. t h i s bindings are dynamic so we use

    the predictability of lexical scope via the self variable. v a r c o n t r o l l e r = { m a k e R e q u e s t : f u n c t i o n ( . . ) { v a r s e l f = t h i s ; b t n . 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 ( ) { / / . . s e l f . m a k e R e q u e s t ( . . ) ; } , f a l s e ) ; } } ;
  8. Inside arrow functions, the t h i s binding is

    not dynamic, but is instead lexical v a r c o n t r o l l e r = { m a k e R e q u e s t : f u n c t i o n ( . . ) { b t n . 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 . m a k e R e q u e s t ( . . ) ; } , f a l s e ) ; } } ;
  9. Es5 f u n c t i o n a

    d d T w o N u m b e r s ( x , y ) { x = x | | 0 ; y = y | | 0 ; r e t u r n x + y ; } Es6 f u n c t i o n a d d T w o N u m b e r s ( x = 0 , y = 0 ) { r e t u r n x + y ; }
  10. Es5 f u n c t i o n l

    o g A r g u m e n t s ( ) { f o r ( v a r i = 0 ; i < a r g u m e n t s . l e n g t h ; i + + ) { c o n s o l e . l o g ( a r g u m e n t s [ i ] ) ; } } Es6 f u n c t i o n l o g A r g u m e n t s ( . . . a r g s ) { f o r ( v a r i = 0 ; i < a r g s . l e n g t h ; i + + ) { c o n s o l e . l o g ( a r g s [ i ] ) ; } }
  11. for loop f u n c t i o n

    l o g A r g u m e n t s ( . . . a r g s ) { f o r ( v a r i = 0 ; i < a r g s . l e n g t h ; i + + ) { c o n s o l e . l o g ( a r g s [ i ] ) ; } } for...of (Es6) f u n c t i o n l o g A r g u m e n t s ( . . . a r g s ) { f o r ( l e t a r g o f a r g s ) { c o n s o l e . l o g ( a r g ) ; } }
  12. Es5 v a r s t r i n g

    = ' f o o d ' ; v a r s u b s t r i n g = ' f o o ' ; c o n s o l e . l o g ( s t r i n g . i n d e x O f ( s u b s t r i n g ) > - 1 ) ; Es6 c o n s t s t r i n g = ' f o o d ' ; c o n s t s u b s t r i n g = ' f o o ' ; c o n s o l e . l o g ( s t r i n g . i n c l u d e s ( s u b s t r i n g ) ) ; / / t r u e
  13. Es5 f u n c t i o n r

    e p e a t ( s t r i n g , c o u n t ) { v a r s t r i n g s = [ ] ; w h i l e ( s t r i n g s . l e n g t h < c o u n t ) { s t r i n g s . p u s h ( s t r i n g ) ; } r e t u r n s t r i n g s . j o i n ( ' ' ) ; } Es6 / / S t r i n g . r e p e a t ( n u m b e r O f R e p e t i t i o n s ) ' m e o w ' . r e p e a t ( 3 ) ; / / ' m e o w m e o w m e o w '
  14. Es5 v a r t e x t = "

    T h i s s t r i n g c o n t a i n s \ " d o u b l e q u o t e s \ " w h i c h a r e e s c a p e d . " ; Es6 v a r t e x t = ` T h i s s t r i n g c o n t a i n s " d o u b l e q u o t e s " w h i c h a r e e s c a p e d . ` ;
  15. Es5 v a r n a m e = '

    T i g e r ' ; v a r a g e = 1 3 ; c o n s o l e . l o g ( ' M y c a t i s n a m e d ' + n a m e + ' a n d i s ' + a g e + ' y e a r s o l d . ' ) ; Es6 c o n s t n a m e = ' T i g e r ' ; c o n s t a g e = 1 3 ; c o n s o l e . l o g ( ` M y c a t i s n a m e d $ { n a m e } a n d i s $ { a g e } y e a r s o l d . ` ) ;
  16. Es5 v a r t e x t = (

    ' c a t \ n ' + ' d o g \ n ' + ' n i c k e l o d e o n ' ) ; Es6 l e t t e x t = ( ` c a t d o g n i c k e l o d e o n ` ) ;
  17. Callbacks f u n c 1 ( f u n

    c t i o n ( v a l u e 1 ) { f u n c 2 ( v a l u e 1 , f u n c t i o n ( v a l u e 2 ) { f u n c 3 ( v a l u e 2 , f u n c t i o n ( v a l u e 3 ) { f u n c 4 ( v a l u e 3 , f u n c t i o n ( v a l u e 4 ) { f u n c 5 ( v a l u e 4 , f u n c t i o n ( v a l u e 5 ) { / / D o s o m e t h i n g w i t h v a l u e 5 } ) ; } ) ; } ) ; } ) ; } ) ;
  18. Promises f u n c 1 ( v a l

    u e 1 ) . t h e n ( f u n c 2 ) . t h e n ( f u n c 3 ) . t h e n ( f u n c 4 ) . t h e n ( f u n c 5 , v a l u e 5 = > { r e s o l v e ( 5 + 1 ) ; / / D o s o m e t h i n g w i t h v a l u e 5 r e j e c t ( ) ; } ) . c a t c h ( e r r o r ) ;
  19. It can be paused by using the y i e

    l d keyword inside the Generator
  20. (Two different naming conventions) f u n c t i

    o n * f o o ( ) { / / . . } or f u n c t i o n * f o o ( ) { / / . . }
  21. y i e l d is referred to as a:

    y i e l d e x p r e s s i o n
  22. What we send back in is the result of the

    y i e l d e x p r e s s i o n
  23. f u n c t i o n * f

    o o ( ) { y i e l d 1 ; y i e l d 2 ; y i e l d 3 ; y i e l d 4 ; y i e l d 5 ; }
  24. v a r i t = f o o (

    ) ; c o n s o l e . l o g ( i t . n e x t ( ) ) ; / / { v a l u e : 1 , d o n e : f a l s e }
  25. If we keep interating c o n s o l

    e . l o g ( i t . n e x t ( ) ) ; / / { v a l u e : 2 , d o n e : f a l s e } c o n s o l e . l o g ( i t . n e x t ( ) ) ; / / { v a l u e : 3 , d o n e : f a l s e } c o n s o l e . l o g ( i t . n e x t ( ) ) ; / / { v a l u e : 4 , d o n e : f a l s e } c o n s o l e . l o g ( i t . n e x t ( ) ) ; / / { v a l u e : 5 , d o n e : f a l s e } c o n s o l e . l o g ( i t . n e x t ( ) ) ; / / { v a l u e : u n d e f i n e d , d o n e : t r u e }
  26. f u n c t i o n * f

    o o ( x ) { v a r y = 2 * ( y i e l d ( x + 1 ) ) ; v a r z = y i e l d ( y / 3 ) ; r e t u r n ( x + y + z ) ; } v a r i t = f o o ( 5 ) ; / / n o t e : n o t s e n d i n g a n y t h i n g i n t o n e x t ( ) h e r e c o n s o l e . l o g ( i t . n e x t ( ) ) ; / / { v a l u e : 6 , d o n e : f a l s e } c o n s o l e . l o g ( i t . n e x t ( 1 2 ) ) ; / / { v a l u e : 8 , d o n e : f a l s e } c o n s o l e . l o g ( i t . n e x t ( 1 3 ) ) ; / / { v a l u e : 4 2 , d o n e : t r u e }
  27. # G e m f i l e g e

    m " s p r o c k e t s " g e m " s p r o c k e t s - e s 6 "
  28. Add to top of a p p l i c

    a t i o n . j s r e q u i r e ' s p r o c k e t s / e s 6 '
  29. Install Presets n p m i n s t a

    l l b a b e l - p r e s e t - e s 2 0 1 5 - - s a v e - d e v
  30. Create . b a b e l r c config

    and enable Plugin(s) e c h o ' { " p r e s e t s " : [ " e s 2 0 1 5 " ] } ' > . b a b e l r c