Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Notes from The Great Dust.js Migration

Notes from The Great Dust.js Migration

Dominykas Blyžė

October 07, 2013
Tweet

More Decks by Dominykas Blyžė

Other Decks in Programming

Transcript

  1. Notes from
    The Great
    Dust.js
    Migration
    By ( ), 2013-10-08
    Dominykas Blyžė @dymonaz

    View full-size slide

  2. The system we set out to
    build
    (mid-2012)
    Mobile first
    Progressive enhancement
    Must render on server
    Should be able to render on the client
    Re-use view logic

    View full-size slide

  3. The path we took
    node.js (doh)
    Dumb views -> no DOM -> templating language
    Side effect: no JS 3 weeks before release (except on the
    server, of course)

    View full-size slide

  4. LinkedIn's research
    Source:
    Four way tie
    Only HBS and Dust relevant for us
    "we hope to contribute back" (on Dust)
    At the time - Dust seemed to be poor on node.js and
    Rhino was mentioned
    http://dominykas.net/15

    View full-size slide

  5. Why Handlebars
    Wide support and lots of marketing
    Seemed like state of the art
    Extremely dumb - good for dumb views?

    View full-size slide

  6. Handlebars six months
    later...
    {
    {
    .
    .
    /
    .
    .
    /
    .
    .
    /
    .
    .
    /
    .
    .
    /
    i
    1
    8
    n
    .
    h
    e
    l
    l
    o
    M
    e
    m
    b
    e
    r
    }
    }
    No parent scope in partials
    No access to context in helpers
    {
    {
    #
    h
    e
    l
    p
    e
    r v
    a
    l
    u
    e
    1 k
    e
    y
    2
    =
    v
    a
    l
    u
    e
    2 }
    }
    {
    {
    e
    l
    s
    e
    }
    }
    n
    e
    w H
    a
    n
    d
    l
    e
    b
    a
    r
    s
    .
    S
    a
    f
    e
    S
    t
    r
    i
    n
    g
    (
    )
    {
    {
    #
    w
    i
    t
    h
    }
    } - never optimize for "less typing"

    View full-size slide

  7. Lesson
    If your views are super dumb - you may as well go for
    _
    .
    t
    e
    m
    p
    l
    a
    t
    e
    (
    )

    View full-size slide

  8. Enter dust.js
    USE THE
    LINKEDIN FORK

    View full-size slide

  9. Not #1 in Google for
    "dust.js"
    n
    p
    m i
    n
    s
    t
    a
    l
    l d
    u
    s
    t
    j
    s
    -
    l
    i
    n
    k
    e
    d
    i
    n
    n
    p
    m i
    n
    s
    t
    a
    l
    l d
    u
    s
    t
    j
    s
    -
    h
    e
    l
    p
    e
    r
    s
    http://linkedin.github.io/dustjs/
    https://github.com/linkedin/dustjs

    View full-size slide

  10. Saner helpers:
    {
    @
    m
    y
    H
    e
    l
    p
    e
    r k
    =
    v /
    }
    Tradeoffs:
    Harder to create
    Not portable
    Harder to TDD

    View full-size slide

  11. HBS helper
    {
    {
    #
    e
    n
    u
    m
    V
    a
    l k
    e
    y o
    b
    j
    }
    }
    f
    u
    n
    c
    t
    i
    o
    n e
    n
    u
    m
    V
    a
    l
    (
    v
    a
    l
    , a
    r
    r
    )
    {
    r
    e
    t
    u
    r
    n a
    r
    r
    [
    v
    a
    l
    ]
    ;
    }

    View full-size slide

  12. Dust.js helper
    {
    @
    e
    n
    u
    m
    V
    a
    l o
    b
    j
    =
    o
    b
    j k
    e
    y
    =
    k
    e
    y /
    }
    f
    u
    n
    c
    t
    i
    o
    n e
    n
    u
    m
    V
    a
    l
    (
    c
    h
    k
    , c
    t
    x
    , b
    o
    d
    i
    e
    s
    , p
    a
    r
    a
    m
    s
    )
    {
    i
    f (
    !
    p
    a
    r
    a
    m
    s
    .
    o
    b
    j
    ) r
    e
    t
    u
    r
    n c
    h
    k
    ;
    v
    a
    r v
    a
    l = p
    a
    r
    a
    m
    s
    .
    o
    b
    j
    [
    p
    a
    r
    a
    m
    s
    .
    k
    e
    y
    ]
    ;
    i
    f (
    t
    y
    p
    e
    o
    f
    (
    v
    a
    l
    ) =
    = "
    u
    n
    d
    e
    f
    i
    n
    e
    d
    "
    ) r
    e
    t
    u
    r
    n c
    h
    k
    ;
    r
    e
    t
    u
    r
    n c
    h
    k
    .
    w
    r
    i
    t
    e
    (
    v
    a
    l
    )
    ;
    }
    ;

    View full-size slide

  13. Multiple "else" blocks
    (bodies)
    Don't forget: "else" is a reserved word - use
    b
    o
    d
    i
    e
    s
    [
    "
    e
    l
    s
    e
    "
    ]
    .
    {
    @
    m
    y
    H
    e
    l
    p
    e
    r
    }
    d
    e
    f
    a
    u
    l
    t
    {
    :
    b
    o
    d
    y
    1
    }
    o
    k
    {
    :
    b
    o
    d
    y
    2
    }
    n
    o
    t o
    k
    {
    /
    m
    y
    H
    e
    l
    p
    e
    r
    }

    View full-size slide

  14. Filters FTW
    {
    v
    a
    r
    |
    s
    } - no escaping
    {
    v
    a
    r
    |
    h
    } - force escape
    {
    v
    a
    r
    |
    j
    s
    } - JSON.stringify
    {
    .
    |
    j
    s
    } - debug the shit out of your context
    {
    v
    a
    r
    |
    u
    }
    {
    v
    a
    r
    |
    u
    c
    }

    View full-size slide

  15. Async-ish
    Uses a callback, but happens in the same tick.
    Don't release zalgo: by @izs
    d
    u
    s
    t
    .
    r
    e
    n
    d
    e
    r
    (
    "
    m
    y
    T
    e
    m
    p
    l
    a
    t
    e
    "
    , {
    "
    k
    e
    y
    "
    : "
    v
    a
    l
    u
    e
    "
    }
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    r
    r
    , h
    t
    m
    l
    ) {
    d
    o
    c
    u
    m
    e
    n
    t
    .
    b
    o
    d
    y
    .
    i
    n
    n
    e
    r
    H
    T
    M
    L = h
    t
    m
    l
    ;
    }
    )
    ;
    http://dominykas.net/16

    View full-size slide

  16. Re-usable partials
    Missing feature: passing in partial output as params
    Dynamic partials: {
    >
    "
    a
    v
    a
    t
    a
    r
    s
    /
    a
    v
    a
    t
    a
    r
    {
    s
    i
    z
    e
    }
    " /
    }

    View full-size slide

  17. "Inline partials" aka
    layouts
    layout.dust
    custom.dust
    {
    +
    b
    o
    d
    y
    }
    d
    e
    f
    a
    u
    l
    t c
    o
    n
    t
    e
    n
    t
    {
    /
    b
    o
    d
    y
    }
    {
    >
    "
    l
    a
    y
    o
    u
    t
    "
    /
    }
    {
    <
    b
    o
    d
    y
    }
    c
    o
    n
    t
    e
    n
    t
    {
    /
    b
    o
    d
    y
    }

    View full-size slide

  18. String interpolation
    {
    @
    m
    y
    H
    e
    l
    p
    e
    r p
    a
    r
    a
    m
    =
    "
    {
    s
    o
    m
    e
    V
    a
    r
    } {
    o
    t
    h
    e
    r
    V
    a
    r
    }
    " /
    }
    See: d
    u
    s
    t
    .
    t
    a
    p
    (
    )

    View full-size slide

  19. No auto-escaping in
    helpers
    Make sure to d
    u
    s
    t
    .
    e
    s
    c
    a
    p
    e
    H
    t
    m
    l
    (
    )
    .

    View full-size slide

  20. Ultimate templating
    problem: i18n
    S
    t
    r
    i
    n
    g t
    o b
    e
    {
    l
    i
    n
    k
    B
    e
    g
    i
    n
    }
    t
    r
    a
    n
    s
    l
    a
    t
    e
    d
    {
    l
    i
    n
    k
    E
    n
    d
    }

    View full-size slide

  21. Gotcha: no booleans, no
    null
    {
    #
    v
    a
    r k
    e
    y
    =
    t
    r
    u
    e
    }
    {
    ?
    k
    e
    y
    }
    h
    i
    {
    /
    k
    e
    y
    }
    {
    /
    v
    a
    r
    }
    See also:
    {
    #
    v
    a
    r k
    e
    y
    =
    0
    }
    {
    ?
    k
    e
    y
    }
    h
    i
    {
    /
    k
    e
    y
    }
    {
    /
    v
    a
    r
    }
    {
    #
    v
    a
    r k
    e
    y
    =
    1
    }
    {
    ?
    k
    e
    y
    }
    h
    i
    {
    /
    k
    e
    y
    }
    {
    /
    v
    a
    r
    }
    {
    #
    v
    a
    r k
    e
    y
    =
    "
    "
    }
    {
    ?
    k
    e
    y
    }
    h
    i
    {
    /
    k
    e
    y
    }
    {
    /
    v
    a
    r
    }
    GH-219

    View full-size slide

  22. Gotcha: @eq and
    variables
    {
    @
    e
    q k
    e
    y
    =
    c
    o
    u
    n
    t v
    a
    l
    u
    e
    =
    "
    0
    "
    }
    .
    .
    .
    {
    /
    e
    q
    }
    {
    @
    e
    q k
    e
    y
    =
    "
    {
    c
    o
    u
    n
    t
    }
    " v
    a
    l
    u
    e
    =
    "
    0
    "
    }
    .
    .
    .
    {
    /
    e
    q
    }

    View full-size slide

  23. Absurd: @if
    {
    @
    i
    f c
    o
    n
    d
    =
    "
    {
    x
    } < {
    y
    } &
    & {
    b
    } =
    = {
    c
    } &
    & '
    {
    e
    }
    '
    .
    l
    e
    n
    g
    t
    h |
    | '
    {
    f
    }
    '
    .
    l
    e
    n
    g
    t
    h
    "
    }
    <
    d
    i
    v
    > x i
    s l
    e
    s
    s t
    h
    a
    n y a
    n
    d b =
    = c a
    n
    d e
    i
    t
    h
    e
    r e o
    r f e
    x
    i
    s
    t
    s i
    n t
    h
    e o
    u
    t
    p
    u
    t <
    /
    d
    i
    v
    >
    {
    /
    i
    f
    }

    View full-size slide

  24. Ambiguity - sections
    {
    #
    v
    a
    r
    }
    {
    n
    a
    m
    e
    }
    {
    /
    v
    a
    r
    } could loop or have w
    i
    t
    h
    -like
    behavior.
    Neat: can pass params: {
    #
    v
    a
    r k
    e
    y
    =
    "
    v
    a
    l
    "
    }
    .
    .
    {
    /
    v
    a
    r
    }

    View full-size slide

  25. Other issues
    Requires hacking to use with AMD
    Poor documentation, esp. internals
    Cleans whitespace by default

    View full-size slide

  26. Going forward
    See also: by @brikis98
    PayPal uses for JSP - Rhino is good!
    Dust in C++?
    Maybe use @substack's streaming HTML?
    Maybe use ejs?
    http://dominykas.net/17

    View full-size slide

  27. Slides:
    ;
    http://dominykas.net/18
    @dymonaz

    View full-size slide