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

Ember.js - An Introduction

kazim59
August 30, 2012

Ember.js - An Introduction

An introduction to the Ember.js JS Framework
http://www.emberjs.com/

kazim59

August 30, 2012
Tweet

Other Decks in Technology

Transcript

  1. EMBER.JS
    AN INTRODUCTION

    View Slide

  2. WHAT IS EMBER.JS?
    “ ... a JavaScript framework for creating ambitious web applications that
    eliminates boilerplate and provides a standard application architecture. ”

    View Slide

  3. HISTORY
    SproutCore + Handlebars.js = SproutCore 2.0
    renamed to Amber.js (and later Ember.js)

    View Slide

  4. HISTORY
    Static Web Pages
    Dynamic Pages (CGI Scripts, PHP, Rails ...)
    AJAX!
    Web Applications with Client Side Logic

    View Slide

  5. APPROACH
    Eliminate Boilerplate
    Keeping everything in sync is tricky!
    H
    i
    , Y
    o
    u h
    a
    v
    e {
    {
    c
    o
    u
    n
    t
    }
    } u
    n
    r
    e
    a
    d e
    m
    a
    i
    l
    s
    .

    View Slide

  6. HOW?
    1. Bindings
    2. Computed Properties
    3. Auto-updating Templates

    View Slide

  7. BINDINGS
    A
    p
    p
    .
    u
    s
    e
    r = E
    m
    b
    e
    r
    .
    O
    b
    j
    e
    c
    t
    .
    c
    r
    e
    a
    t
    e
    (
    {
    f
    i
    r
    s
    t
    N
    a
    m
    e
    : '
    P
    e
    t
    e
    r
    '
    ,
    l
    a
    s
    t
    N
    a
    m
    e
    : '
    W
    a
    g
    e
    n
    e
    t
    '
    ,
    }
    )
    ;
    A
    p
    p
    .
    u
    s
    e
    r
    .
    g
    e
    t
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    ) /
    / r
    e
    t
    u
    r
    n
    s '
    P
    e
    t
    e
    r
    '
    A
    p
    p
    .
    u
    s
    e
    r
    .
    s
    e
    t
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    , '
    T
    o
    m
    '
    )
    ;
    A
    p
    p
    .
    t
    o
    p
    B
    a
    r = E
    m
    b
    e
    r
    .
    O
    b
    j
    e
    c
    t
    .
    c
    r
    e
    a
    t
    e
    (
    {
    n
    a
    m
    e
    B
    i
    n
    d
    i
    n
    g
    : '
    A
    p
    p
    .
    u
    s
    e
    r
    .
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    ,
    }
    )
    ;
    A
    p
    p
    .
    t
    o
    p
    B
    a
    r
    .
    g
    e
    t
    (
    '
    n
    a
    m
    e
    '
    )
    ; /
    / r
    e
    t
    u
    r
    n
    s '
    T
    o
    m
    '

    View Slide

  8. COMPUTED PROPERTIES
    A
    p
    p
    .
    u
    s
    e
    r = E
    m
    b
    e
    r
    .
    O
    b
    j
    e
    c
    t
    .
    c
    r
    e
    a
    t
    e
    (
    {
    f
    i
    r
    s
    t
    N
    a
    m
    e
    : '
    P
    e
    t
    e
    r
    '
    ,
    l
    a
    s
    t
    N
    a
    m
    e
    : '
    W
    a
    g
    e
    n
    e
    t
    '
    ,
    /
    / f
    u
    l
    l
    N
    a
    m
    e a
    s a f
    u
    n
    c
    t
    i
    o
    n
    , t
    h
    e w
    a
    y w
    e u
    s
    e
    d t
    o d
    o i
    t
    g
    e
    t
    F
    u
    l
    l
    N
    a
    m
    e
    : f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    v
    a
    r f
    i
    r
    s
    t
    N
    a
    m
    e = t
    h
    i
    s
    .
    g
    e
    t
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    )
    ;
    v
    a
    r l
    a
    s
    t
    N
    a
    m
    e = t
    h
    i
    s
    .
    g
    e
    t
    (
    '
    l
    a
    s
    t
    N
    a
    m
    e
    '
    )
    ;
    r
    e
    t
    u
    r
    n f
    i
    r
    s
    t
    N
    a
    m
    e + ' ' + l
    a
    s
    t
    N
    a
    m
    e
    ;
    }
    ,
    /
    / f
    u
    l
    l
    N
    a
    m
    e a
    s a c
    o
    m
    p
    u
    t
    e
    d p
    r
    o
    p
    e
    r
    t
    y
    , b
    e
    h
    a
    v
    e
    s l
    i
    k
    e a p
    r
    o
    p
    e
    r
    t
    y
    f
    u
    l
    l
    N
    a
    m
    e
    : f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    v
    a
    r f
    i
    r
    s
    t
    N
    a
    m
    e = t
    h
    i
    s
    .
    g
    e
    t
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    )
    ;
    v
    a
    r l
    a
    s
    t
    N
    a
    m
    e = t
    h
    i
    s
    .
    g
    e
    t
    (
    '
    l
    a
    s
    t
    N
    a
    m
    e
    '
    )
    ;
    r
    e
    t
    u
    r
    n f
    i
    r
    s
    t
    N
    a
    m
    e + ' ' + l
    a
    s
    t
    N
    a
    m
    e
    ;
    }
    .
    p
    r
    o
    p
    e
    r
    t
    y
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    , '
    l
    a
    s
    t
    N
    a
    m
    e
    '
    )
    ,
    }
    )
    ;
    A
    p
    p
    .
    u
    s
    e
    r
    .
    g
    e
    t
    F
    u
    l
    l
    N
    a
    m
    e
    (
    )
    ; /
    / r
    e
    t
    u
    r
    n
    s '
    P
    e
    t
    e
    r W
    a
    g
    e
    n
    e
    t
    '
    A
    p
    p
    .
    u
    s
    e
    r
    .
    g
    e
    t
    (
    '
    f
    u
    l
    l
    N
    a
    m
    e
    '
    )
    ; /
    / r
    e
    t
    u
    r
    n
    s '
    P
    e
    t
    e
    r W
    a
    g
    e
    n
    e
    t
    '

    View Slide

  9. COMPUTED PROPERTIES - 2
    A
    p
    p
    .
    s
    e
    t
    (
    '
    f
    u
    l
    l
    N
    a
    m
    e
    '
    , '
    T
    o
    m D
    a
    l
    e
    '
    )
    ;
    A
    p
    p
    .
    g
    e
    t
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    )
    ; /
    / ?
    A
    p
    p
    .
    u
    s
    e
    r = E
    m
    b
    e
    r
    .
    O
    b
    j
    e
    c
    t
    .
    c
    r
    e
    a
    t
    e
    (
    {
    f
    i
    r
    s
    t
    N
    a
    m
    e
    : '
    P
    e
    t
    e
    r
    '
    ,
    l
    a
    s
    t
    N
    a
    m
    e
    : '
    W
    a
    g
    e
    n
    e
    t
    '
    ,
    f
    u
    l
    l
    N
    a
    m
    e
    : f
    u
    n
    c
    t
    i
    o
    n (
    k
    e
    y
    , v
    a
    l
    u
    e
    ) {
    i
    f (
    a
    r
    g
    u
    m
    e
    n
    t
    s
    .
    l
    e
    n
    g
    t
    h =
    =
    = 1
    ) {
    v
    a
    r f
    i
    r
    s
    t
    N
    a
    m
    e = t
    h
    i
    s
    .
    g
    e
    t
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    )
    ;
    v
    a
    r l
    a
    s
    t
    N
    a
    m
    e = t
    h
    i
    s
    .
    g
    e
    t
    (
    '
    l
    a
    s
    t
    N
    a
    m
    e
    '
    )
    ;
    r
    e
    t
    u
    r
    n f
    i
    r
    s
    t
    N
    a
    m
    e + ' ' + l
    a
    s
    t
    N
    a
    m
    e
    ;
    } e
    l
    s
    e {
    v
    a
    r n
    a
    m
    e = v
    a
    l
    u
    e
    .
    s
    p
    l
    i
    t
    (
    " "
    )
    ;
    t
    h
    i
    s
    .
    s
    e
    t
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    , n
    a
    m
    e
    [
    0
    ]
    )
    ;
    t
    h
    i
    s
    .
    s
    e
    t
    (
    '
    l
    a
    s
    t
    N
    a
    m
    e
    '
    , n
    a
    m
    e
    [
    1
    ]
    )
    ;
    r
    e
    t
    u
    r
    n v
    a
    l
    u
    e
    ;
    }
    }
    .
    p
    r
    o
    p
    e
    r
    t
    y
    (
    '
    f
    i
    r
    s
    t
    N
    a
    m
    e
    '
    , '
    l
    a
    s
    t
    N
    a
    m
    e
    '
    )
    ,
    }
    )
    ;

    View Slide

  10. AUTO-UPDATING TEMPLATES
    H
    i
    , {
    {
    A
    p
    p
    .
    u
    s
    e
    r
    .
    f
    u
    l
    l
    N
    a
    m
    e
    }
    }
    . W
    e
    l
    c
    o
    m
    e b
    a
    c
    k
    !
    {
    {
    #
    e
    a
    c
    h p
    e
    o
    p
    l
    e
    }
    }
    <
    l
    i
    >
    {
    {
    t
    h
    i
    s
    .
    n
    a
    m
    e
    }
    }
    <
    /
    l
    i
    >
    {
    {
    /
    e
    a
    c
    h
    }
    }
    {
    {
    #
    i
    f l
    o
    g
    g
    e
    d
    I
    n
    }
    }
    H
    i {
    {
    u
    s
    e
    r
    .
    n
    a
    m
    e
    }
    } ­ <
    a h
    r
    e
    f
    =
    "
    #
    "
    >
    M
    a
    n
    a
    g
    e Y
    o
    u
    r A
    c
    c
    o
    u
    n
    t
    <
    /
    a
    >
    {
    {
    e
    l
    s
    e
    }
    }
    <
    a h
    r
    e
    f
    =
    "
    #
    "
    >
    S
    i
    g
    n
    u
    p
    <
    /
    a
    > | <
    a h
    r
    e
    f
    =
    "
    #
    "
    >
    L
    o
    g
    i
    n
    <
    /
    a
    >
    {
    {
    /
    i
    f
    }
    }
    {
    {
    #
    v
    i
    e
    w A
    p
    p
    .
    M
    a
    i
    l
    V
    i
    e
    w c
    l
    a
    s
    s
    B
    i
    n
    d
    i
    n
    g
    =
    "
    m
    a
    i
    l
    .
    p
    r
    i
    o
    r
    i
    t
    y
    "
    }
    }
    .
    .
    . m
    a
    i
    l s
    u
    b
    j
    e
    c
    t .
    .
    .
    {
    {
    /
    v
    i
    e
    w
    }
    }

    View Slide

  11. THE POWER
    start with primitive properties
    start building up more sophisticated ones
    write templates telling how it gets displayed once
    let ember handle the rest!

    View Slide

  12. LET'S BUILD SOMETHING
    github: frodsan/emberjs-getting-started

    View Slide

  13. EMBER.JS ON RAILS
    # i
    n y
    o
    u
    r G
    e
    m
    f
    i
    l
    e
    g
    e
    m '
    e
    m
    b
    e
    r
    ­
    r
    a
    i
    l
    s
    '
    $ r
    a
    i
    l
    s g e
    m
    b
    e
    r
    :
    b
    o
    o
    t
    s
    t
    r
    a
    p
    i
    n
    s
    e
    r
    t a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    a
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    .
    j
    s
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    m
    o
    d
    e
    l
    s
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    m
    o
    d
    e
    l
    s
    /
    .
    g
    i
    t
    k
    e
    e
    p
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    s
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    s
    /
    .
    g
    i
    t
    k
    e
    e
    p
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    v
    i
    e
    w
    s
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    v
    i
    e
    w
    s
    /
    .
    g
    i
    t
    k
    e
    e
    p
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    h
    e
    l
    p
    e
    r
    s
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    h
    e
    l
    p
    e
    r
    s
    /
    .
    g
    i
    t
    k
    e
    e
    p
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    t
    e
    m
    p
    l
    a
    t
    e
    s
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    t
    e
    m
    p
    l
    a
    t
    e
    s
    /
    .
    g
    i
    t
    k
    e
    e
    p
    c
    r
    e
    a
    t
    e a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    a
    p
    p
    .
    j
    s

    View Slide

  14. EMBER.JS ON RAILS
    /
    / i
    n y
    o
    u
    r a
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    .
    j
    s
    /
    /
    = r
    e
    q
    u
    i
    r
    e e
    m
    b
    e
    r
    /
    /
    = r
    e
    q
    u
    i
    r
    e e
    m
    b
    e
    r
    /
    a
    p
    p
    <
    !
    ­
    ­ i
    n y
    o
    u
    r l
    a
    y
    o
    u
    t ­
    ­
    >
    <
    %
    = j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    _
    i
    n
    c
    l
    u
    d
    e
    _
    t
    a
    g '
    a
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    ' %
    >
    A
    p
    p
    .
    P
    e
    r
    s
    o
    n
    V
    i
    e
    w = E
    m
    b
    e
    r
    .
    V
    i
    e
    w
    .
    e
    x
    t
    e
    n
    d
    (
    {
    /
    / r
    e
    f
    e
    r
    s t
    o a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    s
    /
    t
    e
    m
    p
    l
    a
    t
    e
    s
    /
    p
    e
    r
    s
    o
    n
    .
    h
    a
    n
    d
    l
    e
    b
    a
    r
    s
    t
    e
    m
    p
    l
    a
    t
    e
    N
    a
    m
    e
    : '
    t
    e
    m
    p
    l
    a
    t
    e
    s
    /
    p
    e
    r
    s
    o
    n
    '
    }
    )
    ;
    .
    j
    s
    , .
    j
    s
    .
    e
    r
    b
    , .
    j
    s
    .
    c
    o
    f
    f
    e
    e
    , .
    j
    s
    .
    c
    o
    f
    f
    e
    e
    .
    e
    r
    b
    .
    h
    a
    n
    d
    l
    e
    b
    a
    r
    s
    , .
    h
    a
    n
    d
    l
    e
    b
    a
    r
    s
    .
    e
    r
    b

    View Slide

  15. GOTCHAS!
    steep learning curve - refactor often
    not mature - yet!
    Rails' MVC !== Ember.js MVC
    keep looking for best practices
    metamorph can break CSS
    debugging might not be easy

    View Slide

  16. THAT'S ALL.

    View Slide