Dynamically Sassy

Generating dynamic CSS in Ruby on Rails

Transcript

1. Dynamically Sassy
   Generating Dynamic CSS in Rails
   Jeremy Fairbank
   

   View Slide

2. What are we
   going to talk
   about?
   

   View Slide

3. Generate dynamic CSS
   

   View Slide

4. Write Sass functions in Ruby
   

   View Slide

5. Identify performance issues
   

   View Slide

6. Caching and background
   processing
   

   View Slide

7. Hi, I'm Jeremy
   ...or
   @elpapapollo
   

   View Slide

8. pushagency.io
   

   View Slide

9. simplybuilt.com
   

   View Slide

10. Our Problem
    

    View Slide

11. Implementation
    Issues
    

    View Slide

12. Same Sass style sheet for
    default and custom color
    palettes
    

    View Slide

13. Rendering custom color style
    sheets from a controller
    

    View Slide

14. Slow Sass render times
    

    View Slide

15. Caching generated CSS
    

    View Slide

16. Rendering in a worker
    

    View Slide

17. Syntactically Awesome Style Sheets
    sass-lang.com
    

    View Slide

18. /
    / V
    a
    r
    i
    a
    b
    l
    e
    s
    $
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 1
    2
    p
    x
    ;
    /
    / N
    e
    s
    t
    e
    d r
    u
    l
    e
    s
    #
    f
    o
    o {
    .
    b
    a
    r {
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : $
    f
    o
    n
    t
    -
    s
    i
    z
    e
    ;
    }
    }
    /
    / I
    n
    c
    l
    u
    d
    e o
    t
    h
    e
    r S
    a
    s
    s s
    t
    y
    l
    e s
    h
    e
    e
    t
    s
    @
    i
    m
    p
    o
    r
    t '
    b
    a
    r
    '
    ;
    /
    / M
    i
    x
    i
    n
    s
    @
    m
    i
    x
    i
    n h
    a
    s
    -
    c
    a
    t
    s {
    &
    :
    :
    b
    e
    f
    o
    r
    e {
    c
    o
    n
    t
    e
    n
    t
    : '
    m
    e
    o
    w
    '
    ;
    d
    i
    s
    p
    l
    a
    y
    : b
    l
    o
    c
    k
    ;
    }
    }
    #
    i
    n
    t
    e
    r
    n
    e
    t {
    @
    i
    n
    c
    l
    u
    d
    e h
    a
    s
    -
    c
    a
    t
    s
    ;
    }
    

    View Slide

19. So What?
    

    View Slide

20. Modularity
    

    View Slide

21. DRY
    

    View Slide

22. Data Structures
    

    View Slide

23. Scripting
    

    View Slide

24. Color Functions
    

    View Slide

25. That's Sass
    

    View Slide

26. Reusing style
    sheets
    

    View Slide

27. It's all in the
    variables
    

    View Slide

28. Static Context
    

    View Slide

29. /
    / _
    m
    y
    -
    u
    i
    .
    s
    c
    s
    s
    #
    f
    o
    o {
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : n
    t
    h
    (
    $
    p
    a
    l
    e
    t
    t
    e
    , 1
    )
    ;
    c
    o
    l
    o
    r
    : n
    t
    h
    (
    $
    p
    a
    l
    e
    t
    t
    e
    , 2
    )
    ;
    }
    /
    / p
    a
    l
    e
    t
    t
    e
    1
    .
    s
    c
    s
    s
    $
    p
    a
    l
    e
    t
    t
    e
    : (
    r
    e
    d g
    r
    e
    e
    n
    )
    ;
    @
    i
    m
    p
    o
    r
    t '
    m
    y
    -
    u
    i
    '
    ;
    /
    / p
    a
    l
    e
    t
    t
    e
    2
    .
    s
    c
    s
    s
    $
    p
    a
    l
    e
    t
    t
    e
    : (
    b
    l
    u
    e y
    e
    l
    l
    o
    w
    )
    ;
    @
    i
    m
    p
    o
    r
    t '
    m
    y
    -
    u
    i
    '
    ;
    

    View Slide

30. Dynamic Context
    

    View Slide

31. Sass Functions
    

    View Slide

32. /
    / d
    y
    n
    a
    m
    i
    c
    -
    p
    a
    l
    e
    t
    t
    e
    .
    s
    c
    s
    s
    $
    p
    a
    l
    e
    t
    t
    e
    : g
    e
    t
    -
    d
    y
    n
    a
    m
    i
    c
    -
    p
    a
    l
    e
    t
    t
    e
    (
    )
    ;
    @
    i
    m
    p
    o
    r
    t '
    m
    y
    -
    u
    i
    '
    ;
    # c
    o
    n
    f
    i
    g
    /
    i
    n
    i
    t
    i
    a
    l
    i
    z
    e
    r
    s
    /
    s
    a
    s
    s
    .
    r
    b
    m
    o
    d
    u
    l
    e S
    a
    s
    s
    :
    :
    S
    c
    r
    i
    p
    t
    :
    :
    F
    u
    n
    c
    t
    i
    o
    n
    s
    d
    e
    f g
    e
    t
    _
    d
    y
    n
    a
    m
    i
    c
    _
    p
    a
    l
    e
    t
    t
    e
    p
    a
    l
    e
    t
    t
    e = 2
    .
    t
    i
    m
    e
    s
    .
    m
    a
    p d
    o
    c
    o
    l
    o
    r = '
    #
    %
    0
    6
    x
    ' % (
    r
    a
    n
    d * 0
    x
    f
    f
    f
    f
    f
    f
    )
    S
    a
    s
    s
    :
    :
    S
    c
    r
    i
    p
    t
    :
    :
    V
    a
    l
    u
    e
    :
    :
    C
    o
    l
    o
    r
    .
    f
    r
    o
    m
    _
    h
    e
    x
    (
    c
    o
    l
    o
    r
    )
    e
    n
    d
    S
    a
    s
    s
    :
    :
    S
    c
    r
    i
    p
    t
    :
    :
    V
    a
    l
    u
    e
    :
    :
    L
    i
    s
    t
    .
    n
    e
    w
    (
    p
    a
    l
    e
    t
    t
    e
    , :
    s
    p
    a
    c
    e
    )
    e
    n
    d
    e
    n
    d
    

    View Slide

33. Injecting data
    from a user?
    

    View Slide

34. /
    / a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    s
    /
    d
    y
    n
    a
    m
    i
    c
    -
    p
    a
    l
    e
    t
    t
    e
    -
    r
    a
    i
    l
    s
    .
    c
    s
    s
    .
    s
    c
    s
    s
    $
    p
    a
    l
    e
    t
    t
    e
    : g
    e
    t
    -
    d
    y
    n
    a
    m
    i
    c
    -
    p
    a
    l
    e
    t
    t
    e
    -
    f
    r
    o
    m
    -
    u
    s
    e
    r
    -
    s
    o
    m
    e
    h
    o
    w
    -
    m
    a
    g
    i
    c
    a
    l
    l
    y
    (
    )
    ;
    @
    i
    m
    p
    o
    r
    t '
    m
    y
    -
    u
    i
    '
    ;
    

    View Slide

35. Use the asset
    pipeline?
    

    View Slide

36. "Static" context
    in the tilt
    template
    

    View Slide

37. # s
    a
    s
    s
    -
    r
    a
    i
    l
    s
    /
    l
    i
    b
    /
    s
    a
    s
    s
    /
    r
    a
    i
    l
    s
    /
    t
    e
    m
    p
    l
    a
    t
    e
    .
    r
    b
    m
    o
    d
    u
    l
    e S
    a
    s
    s
    m
    o
    d
    u
    l
    e R
    a
    i
    l
    s
    c
    l
    a
    s
    s S
    a
    s
    s
    T
    e
    m
    p
    l
    a
    t
    e < T
    i
    l
    t
    :
    :
    T
    e
    m
    p
    l
    a
    t
    e
    # .
    .
    .
    d
    e
    f e
    v
    a
    l
    u
    a
    t
    e
    (
    c
    o
    n
    t
    e
    x
    t
    , l
    o
    c
    a
    l
    s
    , &
    b
    l
    o
    c
    k
    )
    c
    a
    c
    h
    e
    _
    s
    t
    o
    r
    e = C
    a
    c
    h
    e
    S
    t
    o
    r
    e
    .
    n
    e
    w
    (
    c
    o
    n
    t
    e
    x
    t
    .
    e
    n
    v
    i
    r
    o
    n
    m
    e
    n
    t
    )
    o
    p
    t
    i
    o
    n
    s = {
    :
    f
    i
    l
    e
    n
    a
    m
    e =
    > e
    v
    a
    l
    _
    f
    i
    l
    e
    ,
    :
    l
    i
    n
    e =
    > l
    i
    n
    e
    ,
    :
    s
    y
    n
    t
    a
    x =
    > s
    y
    n
    t
    a
    x
    ,
    :
    c
    a
    c
    h
    e
    _
    s
    t
    o
    r
    e =
    > c
    a
    c
    h
    e
    _
    s
    t
    o
    r
    e
    ,
    :
    i
    m
    p
    o
    r
    t
    e
    r =
    > i
    m
    p
    o
    r
    t
    e
    r
    _
    c
    l
    a
    s
    s
    .
    n
    e
    w
    (
    c
    o
    n
    t
    e
    x
    t
    .
    p
    a
    t
    h
    n
    a
    m
    e
    .
    t
    o
    _
    s
    )
    ,
    :
    l
    o
    a
    d
    _
    p
    a
    t
    h
    s =
    > c
    o
    n
    t
    e
    x
    t
    .
    e
    n
    v
    i
    r
    o
    n
    m
    e
    n
    t
    .
    p
    a
    t
    h
    s
    .
    m
    a
    p { |
    p
    a
    t
    h
    | i
    m
    p
    o
    r
    t
    e
    r
    _
    c
    l
    a
    s
    s
    .
    n
    e
    w
    (
    p
    a
    t
    h
    .
    t
    o
    _
    s
    ) }
    ,
    :
    s
    p
    r
    o
    c
    k
    e
    t
    s =
    > {
    :
    c
    o
    n
    t
    e
    x
    t =
    > c
    o
    n
    t
    e
    x
    t
    ,
    :
    e
    n
    v
    i
    r
    o
    n
    m
    e
    n
    t =
    > c
    o
    n
    t
    e
    x
    t
    .
    e
    n
    v
    i
    r
    o
    n
    m
    e
    n
    t
    }
    }
    s
    a
    s
    s
    _
    c
    o
    n
    f
    i
    g = c
    o
    n
    t
    e
    x
    t
    .
    s
    a
    s
    s
    _
    c
    o
    n
    f
    i
    g
    .
    m
    e
    r
    g
    e
    (
    o
    p
    t
    i
    o
    n
    s
    )
    e
    n
    g
    i
    n
    e = :
    :
    S
    a
    s
    s
    :
    :
    E
    n
    g
    i
    n
    e
    .
    n
    e
    w
    (
    d
    a
    t
    a
    , s
    a
    s
    s
    _
    c
    o
    n
    f
    i
    g
    )
    c
    s
    s = e
    n
    g
    i
    n
    e
    .
    r
    e
    n
    d
    e
    r
    e
    n
    g
    i
    n
    e
    .
    d
    e
    p
    e
    n
    d
    e
    n
    c
    i
    e
    s
    .
    m
    a
    p d
    o |
    d
    e
    p
    e
    n
    d
    e
    n
    c
    y
    |
    c
    o
    n
    t
    e
    x
    t
    .
    d
    e
    p
    e
    n
    d
    _
    o
    n
    (
    d
    e
    p
    e
    n
    d
    e
    n
    c
    y
    .
    o
    p
    t
    i
    o
    n
    s
    [
    :
    f
    i
    l
    e
    n
    a
    m
    e
    ]
    )
    e
    n
    d
    c
    s
    s
    r
    e
    s
    c
    u
    e :
    :
    S
    a
    s
    s
    :
    :
    S
    y
    n
    t
    a
    x
    E
    r
    r
    o
    r =
    > e
    c
    o
    n
    t
    e
    x
    t
    .
    _
    _
    L
    I
    N
    E
    _
    _ = e
    .
    s
    a
    s
    s
    _
    b
    a
    c
    k
    t
    r
    a
    c
    e
    .
    f
    i
    r
    s
    t
    [
    :
    l
    i
    n
    e
    ]
    r
    a
    i
    s
    e e
    e
    n
    d
    # .
    .
    .
    e
    n
    d
    e
    n
    d
    e
    n
    d
    

    View Slide

38. Oh, and assets are precompiled
    for production
    

    View Slide

39. We need our own render class
    for dynamic content
    

    View Slide

40. S
    a
    s
    s
    :
    :
    E
    n
    g
    i
    n
    e
    to the rescue
    

    View Slide

41. # l
    i
    b
    /
    s
    a
    s
    s
    _
    c
    u
    s
    t
    o
    m
    _
    p
    a
    l
    e
    t
    t
    e
    .
    r
    b
    c
    l
    a
    s
    s S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    T
    E
    M
    P
    L
    A
    T
    E = <
    <
    -
    E
    O
    S
    .
    f
    r
    e
    e
    z
    e
    $
    p
    a
    l
    e
    t
    t
    e
    : g
    e
    t
    -
    c
    u
    s
    t
    o
    m
    -
    p
    a
    l
    e
    t
    t
    e
    (
    )
    ;
    @
    i
    m
    p
    o
    r
    t '
    m
    y
    -
    u
    i
    '
    ;
    E
    O
    S
    d
    e
    f i
    n
    i
    t
    i
    a
    l
    i
    z
    e
    (
    c
    o
    l
    o
    r
    )
    @
    c
    o
    l
    o
    r = c
    o
    l
    o
    r
    e
    n
    d
    d
    e
    f r
    e
    n
    d
    e
    r
    S
    a
    s
    s
    :
    :
    E
    n
    g
    i
    n
    e
    .
    n
    e
    w
    (
    T
    E
    M
    P
    L
    A
    T
    E
    , s
    a
    s
    s
    _
    c
    u
    s
    t
    o
    m
    _
    o
    p
    t
    i
    o
    n
    s
    )
    .
    r
    e
    n
    d
    e
    r
    e
    n
    d
    p
    r
    i
    v
    a
    t
    e
    d
    e
    f s
    a
    s
    s
    _
    c
    u
    s
    t
    o
    m
    _
    o
    p
    t
    i
    o
    n
    s
    { s
    y
    n
    t
    a
    x
    : :
    s
    c
    s
    s
    ,
    s
    t
    y
    l
    e
    : :
    e
    x
    p
    a
    n
    d
    e
    d
    ,
    c
    u
    s
    t
    o
    m
    : { c
    o
    l
    o
    r
    : @
    c
    o
    l
    o
    r } }
    e
    n
    d
    e
    n
    d
    

    View Slide

42. # c
    o
    n
    f
    i
    g
    /
    i
    n
    i
    t
    i
    a
    l
    i
    z
    e
    r
    s
    /
    s
    a
    s
    s
    .
    r
    b
    m
    o
    d
    u
    l
    e S
    a
    s
    s
    :
    :
    S
    c
    r
    i
    p
    t
    :
    :
    F
    u
    n
    c
    t
    i
    o
    n
    s
    d
    e
    f g
    e
    t
    _
    c
    u
    s
    t
    o
    m
    _
    p
    a
    l
    e
    t
    t
    e
    c
    o
    l
    o
    r = S
    a
    s
    s
    :
    :
    S
    c
    r
    i
    p
    t
    :
    :
    V
    a
    l
    u
    e
    :
    :
    C
    o
    l
    o
    r
    .
    f
    r
    o
    m
    _
    h
    e
    x
    (
    o
    p
    t
    i
    o
    n
    s
    [
    :
    c
    u
    s
    t
    o
    m
    ]
    [
    :
    c
    o
    l
    o
    r
    ]
    )
    f
    a
    c
    t
    o
    r = S
    a
    s
    s
    :
    :
    S
    c
    r
    i
    p
    t
    :
    :
    V
    a
    l
    u
    e
    :
    :
    N
    u
    m
    b
    e
    r
    .
    n
    e
    w
    (
    2
    0
    , '
    %
    '
    )
    p
    a
    l
    e
    t
    t
    e = [
    l
    i
    g
    h
    t
    e
    n
    (
    c
    o
    l
    o
    r
    , f
    a
    c
    t
    o
    r
    )
    ,
    d
    a
    r
    k
    e
    n
    (
    c
    o
    l
    o
    r
    , f
    a
    c
    t
    o
    r
    )
    ]
    S
    a
    s
    s
    :
    :
    S
    c
    r
    i
    p
    t
    :
    :
    V
    a
    l
    u
    e
    :
    :
    L
    i
    s
    t
    .
    n
    e
    w
    (
    p
    a
    l
    e
    t
    t
    e
    , :
    s
    p
    a
    c
    e
    )
    e
    n
    d
    e
    n
    d
    

    View Slide

43. # a
    p
    p
    /
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    s
    /
    p
    a
    l
    e
    t
    t
    e
    s
    _
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    .
    r
    b
    c
    l
    a
    s
    s P
    a
    l
    e
    t
    t
    e
    s
    C
    o
    n
    t
    r
    o
    l
    l
    e
    r < A
    p
    p
    l
    i
    c
    a
    t
    i
    o
    n
    C
    o
    n
    t
    r
    o
    l
    l
    e
    r
    d
    e
    f c
    u
    s
    t
    o
    m
    _
    p
    a
    l
    e
    t
    t
    e
    c
    u
    s
    t
    o
    m
    _
    r
    e
    n
    d
    e
    r
    e
    r = S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    .
    n
    e
    w
    (
    p
    a
    r
    a
    m
    s
    [
    :
    c
    u
    s
    t
    o
    m
    _
    c
    o
    l
    o
    r
    ]
    )
    @
    c
    s
    s = c
    u
    s
    t
    o
    m
    _
    r
    e
    n
    d
    e
    r
    e
    r
    .
    r
    e
    n
    d
    e
    r
    e
    n
    d
    e
    n
    d
    -
    # a
    p
    p
    /
    v
    i
    e
    w
    s
    /
    p
    a
    l
    e
    t
    t
    e
    s
    /
    c
    u
    s
    t
    o
    m
    _
    p
    a
    l
    e
    t
    t
    e
    .
    c
    s
    s
    .
    h
    a
    m
    l
    = @
    c
    s
    s
    .
    h
    t
    m
    l
    _
    s
    a
    f
    e
    

    View Slide

44. Try it out...
    

    View Slide

45. S
    a
    s
    s
    :
    :
    S
    y
    n
    t
    a
    x
    E
    r
    r
    o
    r - F
    i
    l
    e t
    o i
    m
    p
    o
    r
    t n
    o
    t f
    o
    u
    n
    d o
    r u
    n
    r
    e
    a
    d
    a
    b
    l
    e
    : m
    y
    -
    u
    i
    .
    -
    _
    _
    -
    

    View Slide

46. There's always a
    load path
    

    View Slide

47. c
    l
    a
    s
    s S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    p
    r
    i
    v
    a
    t
    e
    d
    e
    f l
    o
    a
    d
    _
    p
    a
    t
    h
    s
    r
    o
    o
    t = R
    a
    i
    l
    s
    .
    r
    o
    o
    t
    .
    j
    o
    i
    n
    (
    '
    a
    p
    p
    '
    , '
    a
    s
    s
    e
    t
    s
    '
    , '
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    s
    '
    )
    D
    i
    r
    [
    r
    o
    o
    t
    .
    j
    o
    i
    n
    (
    '
    i
    n
    c
    l
    u
    d
    e
    s
    '
    )
    ]
    e
    n
    d
    d
    e
    f s
    a
    s
    s
    _
    c
    u
    s
    t
    o
    m
    _
    o
    p
    t
    i
    o
    n
    s
    { s
    y
    n
    t
    a
    x
    : :
    s
    c
    s
    s
    ,
    s
    t
    y
    l
    e
    : :
    e
    x
    p
    a
    n
    d
    e
    d
    ,
    l
    o
    a
    d
    _
    p
    a
    t
    h
    s
    : l
    o
    a
    d
    _
    p
    a
    t
    h
    s
    ,
    c
    u
    s
    t
    o
    m
    : { c
    o
    l
    o
    r
    : @
    c
    o
    l
    o
    r } }
    e
    n
    d
    e
    n
    d
    /
    / a
    p
    p
    /
    a
    s
    s
    e
    t
    s
    /
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    s
    /
    i
    n
    c
    l
    u
    d
    e
    s
    /
    _
    m
    y
    -
    u
    i
    .
    s
    c
    s
    s
    #
    f
    o
    o {
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : n
    t
    h
    (
    $
    p
    a
    l
    e
    t
    t
    e
    , 1
    )
    ;
    c
    o
    l
    o
    r
    : n
    t
    h
    (
    $
    p
    a
    l
    e
    t
    t
    e
    , 2
    )
    ;
    }
    

    View Slide

48. Dynamic Sass Demo
    sassy-demos.jeremyfairbank.com/palettes
    

    View Slide

49. Implementing in
    SimplyBuilt
    

    View Slide

50. GET
    /custom_palette.css?
    custom_color=%23f00
    

    View Slide

51. ...waiting
    ...waiting
    ...waiting
    

    View Slide

52. Done!
    

    View Slide

53. View Slide

54. What's the
    problem?
    

    View Slide

55. Slow render
    times
    (1-1.5 seconds!)
    

    View Slide

56. Complex Sass
    rules
    

    View Slide

57. Many file
    dependencies
    

    View Slide

58. Loops
    

    View Slide

59. Data structure
    lookups
    

    View Slide

60. Compass
    functions
    

    View Slide

61. Can impact the
    whole server
    

    View Slide

62. Web Server
    

    View Slide

63. Web Server
    

    View Slide

64. Web Server
    

    View Slide

65. Web Server
    

    View Slide

66. Web Server
    

    View Slide

67. Yup, we need
    caching
    

    View Slide

68. Memcached
    /
    memcached.org github.com/mperham/dalli
    

    View Slide

69. # c
    o
    n
    f
    i
    g
    /
    e
    n
    v
    i
    r
    o
    n
    m
    e
    n
    t
    s
    /
    p
    r
    o
    d
    u
    c
    t
    i
    o
    n
    .
    r
    b
    c
    o
    n
    f
    i
    g
    .
    c
    a
    c
    h
    e
    _
    s
    t
    o
    r
    e = :
    m
    e
    m
    _
    c
    a
    c
    h
    e
    _
    s
    t
    o
    r
    e
    , \
    M
    E
    M
    _
    C
    A
    C
    H
    E
    _
    S
    E
    R
    V
    E
    R
    , M
    E
    M
    _
    C
    A
    C
    H
    E
    _
    O
    P
    T
    I
    O
    N
    S
    R
    a
    i
    l
    s
    .
    c
    a
    c
    h
    e
    .
    w
    r
    i
    t
    e
    (
    '
    f
    o
    o
    '
    , '
    b
    a
    r
    '
    )
    R
    a
    i
    l
    s
    .
    c
    a
    c
    h
    e
    .
    f
    e
    t
    c
    h
    (
    '
    f
    o
    o
    '
    ) #
    =
    > '
    b
    a
    r
    '
    

    View Slide

70. Introduce
    caching into our
    Sass rendering
    

    View Slide

71. c
    l
    a
    s
    s S
    a
    s
    s
    R
    e
    n
    d
    e
    r
    e
    r
    d
    e
    f i
    n
    i
    t
    i
    a
    l
    i
    z
    e
    (
    t
    e
    m
    p
    l
    a
    t
    e
    , c
    a
    c
    h
    e
    _
    k
    e
    y
    , o
    p
    t
    i
    o
    n
    s
    )
    @
    c
    a
    c
    h
    e
    _
    k
    e
    y = c
    a
    c
    h
    e
    _
    k
    e
    y
    @
    e
    n
    g
    i
    n
    e = S
    a
    s
    s
    :
    :
    E
    n
    g
    i
    n
    e
    .
    n
    e
    w
    (
    t
    e
    m
    p
    l
    a
    t
    e
    , o
    p
    t
    i
    o
    n
    s
    )
    e
    n
    d
    d
    e
    f r
    e
    n
    d
    e
    r
    f
    r
    o
    m
    _
    c
    a
    c
    h
    e { @
    e
    n
    g
    i
    n
    e
    .
    r
    e
    n
    d
    e
    r }
    e
    n
    d
    d
    e
    f c
    a
    c
    h
    e
    d
    ?
    R
    a
    i
    l
    s
    .
    c
    a
    c
    h
    e
    .
    e
    x
    i
    s
    t
    ?
    (
    @
    c
    a
    c
    h
    e
    _
    k
    e
    y
    )
    e
    n
    d
    d
    e
    f g
    e
    t
    _
    c
    a
    c
    h
    e
    d
    _
    c
    s
    s
    R
    a
    i
    l
    s
    .
    c
    a
    c
    h
    e
    .
    f
    e
    t
    c
    h
    (
    @
    c
    a
    c
    h
    e
    _
    k
    e
    y
    )
    e
    n
    d
    p
    r
    i
    v
    a
    t
    e
    d
    e
    f s
    e
    t
    _
    c
    a
    c
    h
    e
    d
    _
    c
    s
    s
    (
    c
    s
    s
    )
    R
    a
    i
    l
    s
    .
    c
    a
    c
    h
    e
    .
    w
    r
    i
    t
    e
    (
    @
    c
    a
    c
    h
    e
    _
    k
    e
    y
    , c
    s
    s
    )
    e
    n
    d
    d
    e
    f f
    r
    o
    m
    _
    c
    a
    c
    h
    e
    (
    &
    w
    r
    i
    t
    e
    _
    b
    l
    o
    c
    k
    )
    g
    e
    t
    _
    c
    a
    c
    h
    e
    d
    _
    c
    s
    s |
    | w
    r
    i
    t
    e
    _
    b
    l
    o
    c
    k
    .
    c
    a
    l
    l
    .
    t
    a
    p { |
    c
    s
    s
    | s
    e
    t
    _
    c
    a
    c
    h
    e
    d
    _
    c
    s
    s
    (
    c
    s
    s
    ) }
    e
    n
    d
    e
    n
    d
    

    View Slide

72. Incorporate into
    S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    

    View Slide

73. c
    l
    a
    s
    s S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    d
    e
    f i
    n
    i
    t
    i
    a
    l
    i
    z
    e
    (
    c
    o
    l
    o
    r
    )
    @
    c
    o
    l
    o
    r = c
    o
    l
    o
    r
    @
    c
    a
    c
    h
    e
    _
    k
    e
    y = "
    c
    u
    s
    t
    o
    m
    _
    p
    a
    l
    e
    t
    t
    e
    /
    #
    {
    @
    c
    o
    l
    o
    r
    }
    "
    @
    e
    n
    g
    i
    n
    e = S
    a
    s
    s
    R
    e
    n
    d
    e
    r
    e
    r
    .
    n
    e
    w
    (
    T
    E
    M
    P
    L
    A
    T
    E
    , @
    c
    a
    c
    h
    e
    _
    k
    e
    y
    , s
    a
    s
    s
    _
    c
    u
    s
    t
    o
    m
    _
    o
    p
    t
    i
    o
    n
    s
    )
    e
    n
    d
    d
    e
    l
    e
    g
    a
    t
    e :
    r
    e
    n
    d
    e
    r
    , t
    o
    : :
    @
    e
    n
    g
    i
    n
    e
    e
    n
    d
    

    View Slide

74. And?
    

    View Slide

75. View Slide

76. What about the
    first render?
    

    View Slide

77. Process in the
    background
    

    View Slide

78. sidekiq.org
    

    View Slide

79. Why Bother?
    

    View Slide

80. Free up server thread quickly
    to handle new request
    

    View Slide

81. No thread concurrency
    guarantees with MRI
    

    View Slide

82. But...
    

    View Slide

83. Code complexity
    

    View Slide

84. Polling client
    

    View Slide

85. Websockets
    

    View Slide

86. Failing jobs
    

    View Slide

87. Waiting on an
    available worker
    

    View Slide

88. Network traffic
    

    View Slide

89. Setting up a
    Sidekiq worker
    

    View Slide

90. # a
    p
    p
    /
    w
    o
    r
    k
    e
    r
    s
    /
    s
    a
    s
    s
    _
    c
    u
    s
    t
    o
    m
    _
    p
    a
    l
    e
    t
    t
    e
    _
    w
    o
    r
    k
    e
    r
    .
    r
    b
    c
    l
    a
    s
    s S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    W
    o
    r
    k
    e
    r
    i
    n
    c
    l
    u
    d
    e S
    i
    d
    e
    k
    i
    q
    :
    :
    W
    o
    r
    k
    e
    r
    d
    e
    f p
    e
    r
    f
    o
    r
    m
    (
    c
    o
    l
    o
    r
    )
    S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    .
    n
    e
    w
    (
    c
    o
    l
    o
    r
    )
    .
    r
    e
    n
    d
    e
    r
    e
    n
    d
    e
    n
    d
    c
    l
    a
    s
    s S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    d
    e
    f r
    e
    n
    d
    e
    r
    _
    a
    s
    y
    n
    c
    u
    n
    l
    e
    s
    s @
    e
    n
    g
    i
    n
    e
    .
    c
    a
    c
    h
    e
    d
    ?
    S
    a
    s
    s
    C
    u
    s
    t
    o
    m
    P
    a
    l
    e
    t
    t
    e
    W
    o
    r
    k
    e
    r
    .
    p
    e
    f
    o
    r
    m
    _
    a
    s
    y
    n
    c
    (
    @
    c
    o
    l
    o
    r
    )
    e
    n
    d
    @
    c
    a
    c
    h
    e
    _
    k
    e
    y
    e
    n
    d
    e
    n
    d
    

    View Slide

91. c
    l
    a
    s
    s S
    a
    s
    s
    R
    e
    n
    d
    e
    r
    e
    r
    d
    e
    f s
    e
    l
    f
    .
    g
    e
    t
    _
    b
    y
    _
    k
    e
    y
    (
    k
    e
    y
    )
    R
    a
    i
    l
    s
    .
    c
    a
    c
    h
    e
    .
    f
    e
    t
    c
    h
    (
    k
    e
    y
    )
    e
    n
    d
    d
    e
    f s
    e
    l
    f
    .
    c
    a
    c
    h
    e
    d
    ?
    (
    k
    e
    y
    )
    R
    a
    i
    l
    s
    .
    c
    a
    c
    h
    e
    .
    e
    x
    i
    s
    t
    ?
    (
    k
    e
    y
    )
    e
    n
    d
    p
    r
    i
    v
    a
    t
    e
    d
    e
    f g
    e
    t
    _
    c
    a
    c
    h
    e
    d
    _
    c
    s
    s
    s
    e
    l
    f
    .
    c
    l
    a
    s
    s
    .
    g
    e
    t
    _
    b
    y
    _
    k
    e
    y
    (
    @
    c
    a
    c
    h
    e
    _
    k
    e
    y
    )
    e
    n
    d
    e
    n
    d
    

    View Slide

92. What would polling look like?
    

    View Slide

93. Polling
    

    View Slide

94. Polling
    

    View Slide

95. Polling
    

    View Slide

96. Polling
    

    View Slide

97. Polling
    

    View Slide

98. Polling
    

    View Slide

99. Polling
    

    View Slide

100. Polling
     

     View Slide

101. c
     l
     a
     s
     s P
     a
     l
     e
     t
     t
     e
     s
     C
     o
     n
     t
     r
     o
     l
     l
     e
     r < A
     p
     p
     l
     i
     c
     a
     t
     i
     o
     n
     C
     o
     n
     t
     r
     o
     l
     l
     e
     r
     d
     e
     f r
     e
     q
     u
     e
     s
     t
     _
     c
     u
     s
     t
     o
     m
     _
     p
     a
     l
     e
     t
     t
     e
     c
     u
     s
     t
     o
     m
     _
     r
     e
     n
     d
     e
     r
     e
     r = S
     a
     s
     s
     C
     u
     s
     t
     o
     m
     P
     a
     l
     e
     t
     t
     e
     .
     n
     e
     w
     (
     p
     a
     r
     a
     m
     s
     [
     :
     c
     u
     s
     t
     o
     m
     _
     c
     o
     l
     o
     r
     ]
     )
     @
     k
     e
     y = c
     u
     s
     t
     o
     m
     _
     r
     e
     n
     d
     e
     r
     e
     r
     .
     r
     e
     n
     d
     e
     r
     _
     a
     s
     y
     n
     c
     e
     n
     d
     d
     e
     f c
     h
     e
     c
     k
     _
     c
     u
     s
     t
     o
     m
     _
     p
     a
     l
     e
     t
     t
     e
     @
     r
     e
     a
     d
     y = S
     a
     s
     s
     R
     e
     n
     d
     e
     r
     e
     r
     .
     c
     a
     c
     h
     e
     d
     ?
     (
     p
     a
     r
     a
     m
     s
     [
     :
     k
     e
     y
     ]
     )
     e
     n
     d
     d
     e
     f c
     u
     s
     t
     o
     m
     _
     p
     a
     l
     e
     t
     t
     e
     @
     c
     s
     s = S
     a
     s
     s
     R
     e
     n
     d
     e
     r
     e
     r
     .
     g
     e
     t
     _
     b
     y
     _
     k
     e
     y
     (
     p
     a
     r
     a
     m
     s
     [
     :
     k
     e
     y
     ]
     )
     e
     n
     d
     e
     n
     d
     

     View Slide

102. Is this the best
     answer?
     

     View Slide

103. Can refactoring
     simplify our
     Sass?
     

     View Slide

104. YES!
     

     View Slide

105. Identified areas for code
     improvement
     

     View Slide

106. Acceptable render times
     

     View Slide

107. Eliminate need for background
     processing
     

     View Slide

108. Recap
     

     View Slide

109. Reuse Sass style sheets to
     render static and dynamic
     content
     

     View Slide

110. Sass rendering isn't always fast
     

     View Slide

111. Web server performance
     

     View Slide

112. Importance of caching
     

     View Slide

113. Background processing
     

     View Slide

114. Sometimes refactoring is all
     you need
     

     View Slide

115. So what does this mean?
     

     View Slide

116. Things aren't always simple
     

     View Slide

117. We always have to consider
     performance
     

     View Slide

118. Thanks!
     Slides:
     Demo Source:
     Blog:
     sassy-talk.jeremyfairbank.com
     github.com/jfairbank/dynamically-sassy-demos
     blog.jeremyfairbank.com
     jeremy@pushagency.io
     @elpapapollo
     github.com/jfairbank
     

     View Slide