ES2015 and Your Rails App - Riverside Ruby Group

55e2e1f28b890e26c101ed44c5f1d3af?s=47 kickinbahk
February 17, 2016

ES2015 and Your Rails App - Riverside Ruby Group

An overview of some of new ES2015 features.

55e2e1f28b890e26c101ed44c5f1d3af?s=128

kickinbahk

February 17, 2016
Tweet

Transcript

  1. 5.

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

    Functions Strings Destructuring Modules Parameters
  2. 7.

    Var vs Let/Const Replacing IIFEs with Blocks Arrow Functions Parameters

    Strings New Features cont. Promises Generators
  3. 10.

    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. 16.

    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. 20.

    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. 23.

    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. 25.

    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. 26.

    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. 27.
  10. 30.

    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 ; }
  11. 33.

    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 ] ) ; } }
  12. 34.

    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 ) ; } }
  13. 35.
  14. 38.

    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
  15. 39.
  16. 40.

    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 '
  17. 43.

    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 . ` ;
  18. 45.

    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 . ` ) ;
  19. 47.

    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 ` ) ;
  20. 48.
  21. 52.

    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 } ) ; } ) ; } ) ; } ) ; } ) ;
  22. 53.

    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 ) ;
  23. 60.

    It can be paused by using the y i e

    l d keyword inside the Generator
  24. 65.

    (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 ( ) { / / . . }
  25. 67.

    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
  26. 68.

    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
  27. 69.

    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 ; }
  28. 73.

    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 }
  29. 74.

    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 }
  30. 76.

    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 }
  31. 80.

    # 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 "
  32. 81.

    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 '
  33. 82.

    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
  34. 83.

    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