$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. ES2015 - Released June 2016

    View Slide

  3. Added New Syntax For
    "Complex" Applications

    View Slide

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

    View Slide

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

    View Slide

  6. Classes
    Symbols
    Maps
    WeakMaps
    New Features cont.
    Promises
    Generators

    View Slide

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

    View Slide

  8. Var
    vs.
    Let & Const

    View Slide

  9. Var is Scoped to the Function

    View Slide

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

    View Slide

  11. Let and Const are Scoped to
    the Block

    View Slide

  12. Const is a Constant Reference
    to a Value

    View Slide

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

    View Slide

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

    View Slide

  15. Less Strict Immutability

    View Slide

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

    View Slide

  17. Replacing IIFEs
    with
    Blocks

    View Slide

  18. Immediately Invoked Function
    Expression

    View Slide

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

    View Slide

  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

    View Slide

  21. Arrow Functions

    View Slide

  22. From Coffeescript (Fat Arrow)

    View Slide

  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
    ;

    View Slide

  24. More importantly is impact of
    t
    h
    i
    s

    View Slide

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

    View Slide

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

    View Slide

  27. View Slide

  28. Parameters

    View Slide

  29. Default Parameters

    View Slide

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

    View Slide

  31. Rest Parameter
    (Indefinite Amount of Args)

    View Slide

  32. Rest Operator (...)

    View Slide

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

    View Slide

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

    View Slide

  35. Strings

    View Slide

  36. Adds New Methods to the
    Library

    View Slide

  37. .includes()

    View Slide

  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

    View Slide

  39. .repeat()

    View Slide

  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
    '

    View Slide

  41. Template Literals

    View Slide

  42. Allows special characters w/o
    Escaping

    View Slide

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

    View Slide

  44. String Interpolation

    View Slide

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

    View Slide

  46. New Line Preservation

    View Slide

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

    View Slide

  48. Promises

    View Slide

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

    View Slide

  50. Allow replacing Callbacks
    with Promises

    View Slide

  51. Makes for more readable Code

    View Slide

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

    View Slide

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

    View Slide

  54. Generators

    View Slide

  55. New Type of Function

    View Slide

  56. Standard Function is
    "Run to Completion"

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. Nothing from the outside of a
    Generator can stop it

    View Slide

  62. Once paused, only something
    outside can restart it

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. It is just a normal function,
    with different keywords

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  70. To step through values, we
    need an iterator

    View Slide

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

    View Slide

  72. We have the .next()

    View Slide

  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 }

    View Slide

  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 }

    View Slide

  75. Let's look at a slightly more
    complex example

    View Slide

  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 }

    View Slide

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

    View Slide

  78. Adding ES2015
    to
    Your Rails App

    View Slide

  79. 2 gems are Necessary

    View Slide

  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
    "

    View Slide

  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
    '

    View Slide

  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

    View Slide

  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

    View Slide

  84. Es6 functionality is added to
    any .
    e
    s
    6 file

    View Slide

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

    View Slide

  86. ES2015 Spec

    View Slide