ES2015 and Your Rails App - Riverside Ruby Group

ES2015 Features
And Your Rails App
/
Josiah Mory @kickinbahk

View Slide

ES2015 - Released June 2016

View Slide

Added New Syntax For
"Complex" Applications

View Slide

github.com/DrkSephy/es6-cheatsheet/

View Slide

New Features
Var vs Let/Const
Replacing IIFEs with Blocks
Arrow Functions
Strings
Destructuring
Modules
Parameters

View Slide

Classes
Symbols
Maps
WeakMaps
New Features cont.
Promises
Generators

View Slide

Var vs Let/Const
Replacing IIFEs with Blocks
Arrow Functions
Parameters
Strings
New Features cont.
Promises
Generators

View Slide

Var
vs.
Let & Const

View Slide

Var is Scoped to the Function

View Slide

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

View Slide

Let and Const are Scoped to
the Block

View Slide

Const is a Constant Reference
to a Value

View Slide

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

View Slide

Not Immutable Referencing an
Object
(Arrays and Objects)

View Slide

Less Strict Immutability

View Slide

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

View Slide

Replacing IIFEs
with
Blocks

View Slide

Immediately Invoked Function
Expression

View Slide

Allows for scoping
(To not pollute the global space)

View Slide

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

View Slide

Arrow Functions

View Slide

From Coffeescript (Fat Arrow)

View Slide

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
;

View Slide

More importantly is impact of
t
h
i
s

View Slide

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

View Slide

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

View Slide

View Slide

Parameters

View Slide

Default Parameters

View Slide

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

View Slide

Rest Parameter
(Indeﬁnite Amount of Args)

View Slide

Rest Operator (...)

View Slide

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

View Slide

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

View Slide

Strings

View Slide

Adds New Methods to the
Library

View Slide

.includes()

View Slide

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

View Slide

.repeat()

View Slide

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
'

View Slide

Template Literals

View Slide

Allows special characters w/o
Escaping

View Slide

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

View Slide

String Interpolation

View Slide

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

View Slide

New Line Preservation

View Slide

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

View Slide

Promises

View Slide

A Promise object represents a
value that may not be available
yet.

View Slide

Allow replacing Callbacks
with Promises

View Slide

Makes for more readable Code

View Slide

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

View Slide

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

View Slide

Generators

View Slide

New Type of Function

View Slide

Standard Function is
"Run to Completion"

View Slide

With ES6 generators, we have
a different kind of function

View Slide

These new functions may be
paused, and resumed later

View Slide

This allows other code to run
during these paused periods

View Slide

It can be paused by using the
y
i
e
l
d keyword inside the
Generator

View Slide

Nothing from the outside of a
Generator can stop it

View Slide

Once paused, only something
outside can restart it

View Slide

You would do this using the
r
e
t
u
r
n statement.

View Slide

This enables 2-way message
passing, to and from the
Generator

View Slide

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

View Slide

It is just a normal function,
with different keywords

View Slide

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

View Slide

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

View Slide

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

View Slide

To step through values, we
need an iterator

View Slide

v
a
r i
t = f
o
o
(
)
;

View Slide

We have the .next()

View Slide

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 }

View Slide

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 }

View Slide

Let's look at a slightly more
complex example

View Slide

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 }

View Slide

The Basics Of ES6 Generators
https://davidwalsh.name/es6-generators

View Slide

Adding ES2015
to
Your Rails App

View Slide

2 gems are Necessary

View Slide

#
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
"

View Slide

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
'

View Slide

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

View Slide

Create .
b
a
b
e
l
r
c conﬁg 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

View Slide

Es6 functionality is added to
any .
e
s
6 ﬁle

View Slide

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

View Slide

ES2015 Spec

View Slide

ES2015 and Your Rails App - Riverside Ruby Group

ES2015 and Your Rails App - Riverside Ruby Group

kickinbahk

More Decks by kickinbahk

Other Decks in Technology

Featured

Transcript