ES2015 and Your Rails App - Riverside Ruby Group

An overview of some of new ES2015 features.

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 ) ; } } ;
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