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. ES2015 Features And Your Rails App / Josiah Mory @kickinbahk

  2. ES2015 - Released June 2016

  3. Added New Syntax For "Complex" Applications

  4. github.com/DrkSephy/es6-cheatsheet/

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

    Functions Strings Destructuring Modules Parameters
  6. Classes Symbols Maps WeakMaps New Features cont. Promises Generators

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

    Strings New Features cont. Promises Generators
  8. Var vs. Let & Const

  9. Var is Scoped to the Function

  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 ( ) ;
  11. Let and Const are Scoped to the Block

  12. Const is a Constant Reference to a Value

  13. Immutable when Referencing a Primitive (String, Num, Bool)

  14. Not Immutable Referencing an Object (Arrays and Objects)

  15. Less Strict Immutability

  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 " ; } }
  17. Replacing IIFEs with Blocks

  18. Immediately Invoked Function Expression

  19. Allows for scoping (To not pollute the global space)

  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
  21. Arrow Functions

  22. From Coffeescript (Fat Arrow)

  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 ;
  24. More importantly is impact of t h i s

  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 ) ; } } ;
  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 ) ; } } ;
  27. None
  28. Parameters

  29. Default Parameters

  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 ; }
  31. Rest Parameter (Indefinite Amount of Args)

  32. Rest Operator (...)

  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 ] ) ; } }
  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 ) ; } }
  35. Strings

  36. Adds New Methods to the Library

  37. .includes()

  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
  39. .repeat()

  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 '
  41. Template Literals

  42. Allows special characters w/o Escaping

  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 . ` ;
  44. String Interpolation

  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 . ` ) ;
  46. New Line Preservation

  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 ` ) ;
  48. Promises

  49. A Promise object represents a value that may not be

    available yet.
  50. Allow replacing Callbacks with Promises

  51. Makes for more readable Code

  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 } ) ; } ) ; } ) ; } ) ; } ) ;
  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 ) ;
  54. Generators

  55. New Type of Function

  56. Standard Function is "Run to Completion"

  57. With ES6 generators, we have a different kind of function

  58. These new functions may be paused, and resumed later

  59. This allows other code to run during these paused periods

  60. It can be paused by using the y i e

    l d keyword inside the Generator
  61. Nothing from the outside of a Generator can stop it

  62. Once paused, only something outside can restart it

  63. You would do this using the r e t u

    r n statement.
  64. This enables 2-way message passing, to and from the Generator

  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 ( ) { / / . . }
  66. It is just a normal function, with different keywords

  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
  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
  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 ; }
  70. To step through values, we need an iterator

  71. v a r i t = f o o (

    ) ;
  72. We have the .next()

  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 }
  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 }
  75. Let's look at a slightly more complex example

  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 }
  77. The Basics Of ES6 Generators https://davidwalsh.name/es6-generators

  78. Adding ES2015 to Your Rails App

  79. 2 gems are Necessary

  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 "
  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 '
  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
  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
  84. Es6 functionality is added to any . e s 6

    file
  85. Instructions From Babel Website ( ) https://babeljs.io/docs/setup/#rails

  86. ES2015 Spec