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

The World Beyond MVC

Garann Means
September 28, 2012

The World Beyond MVC

MVC is a great pattern, but it's not the only one. Some applications might benefit from other types of architectures. This talk looks at a couple and talks about how to choose which fits your needs.

Garann Means

September 28, 2012
Tweet

More Decks by Garann Means

Other Decks in Technology

Transcript

  1. THE WORLD BEYOND MVC

    View Slide

  2. HI, I'M GARANN







    ⚓ engineer at Etsy
    engineer at Etsy
    engineer at Etsy
    engineer at Etsy
    engineer at Etsy
    engineer at Etsy
    engineer at Etsy
    engineer at Etsy







    ⚓ Austin, Texas, USA
    Austin, Texas, USA
    Austin, Texas, USA
    Austin, Texas, USA
    Austin, Texas, USA
    Austin, Texas, USA
    Austin, Texas, USA
    Austin, Texas, USA







    ⚓ Node for Front-End Developers
    Node for Front-End Developers
    Node for Front-End Developers
    Node for Front-End Developers
    Node for Front-End Developers
    Node for Front-End Developers
    Node for Front-End Developers
    Node for Front-End Developers







    ⚓ Austin All-Girl Hack Night and Girl Develop It Austin
    Austin All-Girl Hack Night and Girl Develop It Austin
    Austin All-Girl Hack Night and Girl Develop It Austin
    Austin All-Girl Hack Night and Girl Develop It Austin
    Austin All-Girl Hack Night and Girl Develop It Austin
    Austin All-Girl Hack Night and Girl Develop It Austin
    Austin All-Girl Hack Night and Girl Develop It Austin
    Austin All-Girl Hack Night and Girl Develop It Austin







    ⚓ @garannm / garann.com
    @garannm / garann.com
    @garannm / garann.com
    @garannm / garann.com
    @garannm / garann.com
    @garannm / garann.com
    @garannm / garann.com
    @garannm / garann.com

    View Slide

  3. KNOW ANY GOOD MVC
    ARCHITECTURES?

    View Slide

  4. MVC OPTIONS







    ⚓ Backbone
    Backbone
    Backbone
    Backbone
    Backbone
    Backbone
    Backbone
    Backbone







    ⚓ Spine
    Spine
    Spine
    Spine
    Spine
    Spine
    Spine
    Spine







    ⚓ Agility
    Agility
    Agility
    Agility
    Agility
    Agility
    Agility
    Agility







    ⚓ Knockback
    Knockback
    Knockback
    Knockback
    Knockback
    Knockback
    Knockback
    Knockback







    ⚓ and more..
    and more..
    and more..
    and more..
    and more..
    and more..
    and more..
    and more..

    View Slide

  5. WHY SO POPULAR, MVC?

    View Slide

  6. MVC APPEAL







    ⚓ popular server-side frameworks
    popular server-side frameworks
    popular server-side frameworks
    popular server-side frameworks
    popular server-side frameworks
    popular server-side frameworks
    popular server-side frameworks
    popular server-side frameworks







    ⚓ build around clear components (models)
    build around clear components (models)
    build around clear components (models)
    build around clear components (models)
    build around clear components (models)
    build around clear components (models)
    build around clear components (models)
    build around clear components (models)







    ⚓ feels natural to developers
    feels natural to developers
    feels natural to developers
    feels natural to developers
    feels natural to developers
    feels natural to developers
    feels natural to developers
    feels natural to developers







    ⚓ especially OOP developers
    especially OOP developers
    especially OOP developers
    especially OOP developers
    especially OOP developers
    especially OOP developers
    especially OOP developers
    especially OOP developers

    View Slide

  7. MVC HISTORY







    ⚓ invented by Trygve Reenskaug in the late 70s
    invented by Trygve Reenskaug in the late 70s
    invented by Trygve Reenskaug in the late 70s
    invented by Trygve Reenskaug in the late 70s
    invented by Trygve Reenskaug in the late 70s
    invented by Trygve Reenskaug in the late 70s
    invented by Trygve Reenskaug in the late 70s
    invented by Trygve Reenskaug in the late 70s







    ⚓ quickly implemented in Smalltalk
    quickly implemented in Smalltalk
    quickly implemented in Smalltalk
    quickly implemented in Smalltalk
    quickly implemented in Smalltalk
    quickly implemented in Smalltalk
    quickly implemented in Smalltalk
    quickly implemented in Smalltalk







    ⚓ original components were Model, View, Controller,
    original components were Model, View, Controller,
    original components were Model, View, Controller,
    original components were Model, View, Controller,
    original components were Model, View, Controller,
    original components were Model, View, Controller,
    original components were Model, View, Controller,
    original components were Model, View, Controller, Editor
    Editor
    Editor
    Editor
    Editor
    Editor
    Editor
    Editor







    ⚓ the lost Editor concept dealt with user interaction
    the lost Editor concept dealt with user interaction
    the lost Editor concept dealt with user interaction
    the lost Editor concept dealt with user interaction
    the lost Editor concept dealt with user interaction
    the lost Editor concept dealt with user interaction
    the lost Editor concept dealt with user interaction
    the lost Editor concept dealt with user interaction







    ⚓ (that's foreshadowing)
    (that's foreshadowing)
    (that's foreshadowing)
    (that's foreshadowing)
    (that's foreshadowing)
    (that's foreshadowing)
    (that's foreshadowing)
    (that's foreshadowing)

    View Slide

  8. "REAL" MVC







    ⚓ increasingly difficult to pinpoint
    increasingly difficult to pinpoint
    increasingly difficult to pinpoint
    increasingly difficult to pinpoint
    increasingly difficult to pinpoint
    increasingly difficult to pinpoint
    increasingly difficult to pinpoint
    increasingly difficult to pinpoint







    ⚓ AND SO IT BEGINS
    AND SO IT BEGINS
    AND SO IT BEGINS
    AND SO IT BEGINS
    AND SO IT BEGINS
    AND SO IT BEGINS
    AND SO IT BEGINS
    AND SO IT BEGINS







    “Jim Althoff and others implemented a version
    Jim Althoff and others implemented a version
    Jim Althoff and others implemented a version
    Jim Althoff and others implemented a version
    Jim Althoff and others implemented a version
    Jim Althoff and others implemented a version
    Jim Althoff and others implemented a version
    Jim Althoff and others implemented a version
    of MVC for the Smalltalk-80 class library after I
    of MVC for the Smalltalk-80 class library after I
    of MVC for the Smalltalk-80 class library after I
    of MVC for the Smalltalk-80 class library after I
    of MVC for the Smalltalk-80 class library after I
    of MVC for the Smalltalk-80 class library after I
    of MVC for the Smalltalk-80 class library after I
    of MVC for the Smalltalk-80 class library after I
    had left Xerox PARC; I was in not involved in
    had left Xerox PARC; I was in not involved in
    had left Xerox PARC; I was in not involved in
    had left Xerox PARC; I was in not involved in
    had left Xerox PARC; I was in not involved in
    had left Xerox PARC; I was in not involved in
    had left Xerox PARC; I was in not involved in
    had left Xerox PARC; I was in not involved in
    this work.
    this work.
    this work.
    this work.
    this work.
    this work.
    this work.
    this work. Jim Althoff uses the term
    Jim Althoff uses the term
    Jim Althoff uses the term
    Jim Althoff uses the term
    Jim Althoff uses the term
    Jim Althoff uses the term
    Jim Althoff uses the term
    Jim Althoff uses the term
    Controller somewhat differently from me.
    Controller somewhat differently from me.
    Controller somewhat differently from me.
    Controller somewhat differently from me.
    Controller somewhat differently from me.
    Controller somewhat differently from me.
    Controller somewhat differently from me.
    Controller somewhat differently from me.”







    View Slide

  9. IS MVC THE ANSWER?

    View Slide

  10. MVC IS GREAT
    SOMETIMES







    ⚓ server-side
    server-side
    server-side
    server-side
    server-side
    server-side
    server-side
    server-side







    ⚓ CMSes
    CMSes
    CMSes
    CMSes
    CMSes
    CMSes
    CMSes
    CMSes







    ⚓ data entry
    data entry
    data entry
    data entry
    data entry
    data entry
    data entry
    data entry







    ⚓ multiple, clearly-defined object types
    multiple, clearly-defined object types
    multiple, clearly-defined object types
    multiple, clearly-defined object types
    multiple, clearly-defined object types
    multiple, clearly-defined object types
    multiple, clearly-defined object types
    multiple, clearly-defined object types







    ⚓ anything that fits easily with OOP
    anything that fits easily with OOP
    anything that fits easily with OOP
    anything that fits easily with OOP
    anything that fits easily with OOP
    anything that fits easily with OOP
    anything that fits easily with OOP
    anything that fits easily with OOP

    View Slide

  11. MVC IS AWKWARD
    SOMETIMES







    ⚓ state shared/created by multiple objects
    state shared/created by multiple objects
    state shared/created by multiple objects
    state shared/created by multiple objects
    state shared/created by multiple objects
    state shared/created by multiple objects
    state shared/created by multiple objects
    state shared/created by multiple objects







    ⚓ lots of complex user interactions
    lots of complex user interactions
    lots of complex user interactions
    lots of complex user interactions
    lots of complex user interactions
    lots of complex user interactions
    lots of complex user interactions
    lots of complex user interactions







    ⚓ distinct, abstract controls/widgets
    distinct, abstract controls/widgets
    distinct, abstract controls/widgets
    distinct, abstract controls/widgets
    distinct, abstract controls/widgets
    distinct, abstract controls/widgets
    distinct, abstract controls/widgets
    distinct, abstract controls/widgets







    ⚓ lots of client-side apps
    lots of client-side apps
    lots of client-side apps
    lots of client-side apps
    lots of client-side apps
    lots of client-side apps
    lots of client-side apps
    lots of client-side apps

    View Slide

  12. MVC IS OVERKILL
    SOMETIMES







    ⚓ static sites
    static sites
    static sites
    static sites
    static sites
    static sites
    static sites
    static sites







    ⚓ server-driven site (e.g. RMI)
    server-driven site (e.g. RMI)
    server-driven site (e.g. RMI)
    server-driven site (e.g. RMI)
    server-driven site (e.g. RMI)
    server-driven site (e.g. RMI)
    server-driven site (e.g. RMI)
    server-driven site (e.g. RMI)

    View Slide

  13. THERE ARE
    ARCHITECTURES BEYOND
    MVC

    View Slide

  14. ARCHITECTURE
    PATTERNS







    ⚓ canon doesn't include web uses
    canon doesn't include web uses
    canon doesn't include web uses
    canon doesn't include web uses
    canon doesn't include web uses
    canon doesn't include web uses
    canon doesn't include web uses
    canon doesn't include web uses







    ⚓ Design Patterns
    Design Patterns
    Design Patterns
    Design Patterns
    Design Patterns
    Design Patterns
    Design Patterns
    Design Patterns (GoF) © 1994
    (GoF) © 1994
    (GoF) © 1994
    (GoF) © 1994
    (GoF) © 1994
    (GoF) © 1994
    (GoF) © 1994
    (GoF) © 1994







    ⚓ architectures proposed when user and developer were the
    architectures proposed when user and developer were the
    architectures proposed when user and developer were the
    architectures proposed when user and developer were the
    architectures proposed when user and developer were the
    architectures proposed when user and developer were the
    architectures proposed when user and developer were the
    architectures proposed when user and developer were the
    same person
    same person
    same person
    same person
    same person
    same person
    same person
    same person







    ⚓ client and server were the same command line
    client and server were the same command line
    client and server were the same command line
    client and server were the same command line
    client and server were the same command line
    client and server were the same command line
    client and server were the same command line
    client and server were the same command line







    ⚓ terminals did not interpret views
    terminals did not interpret views
    terminals did not interpret views
    terminals did not interpret views
    terminals did not interpret views
    terminals did not interpret views
    terminals did not interpret views
    terminals did not interpret views

    View Slide

  15. A VOID MVC NEATLY
    FILLS







    ⚓ clear concept of the UI
    clear concept of the UI
    clear concept of the UI
    clear concept of the UI
    clear concept of the UI
    clear concept of the UI
    clear concept of the UI
    clear concept of the UI







    ⚓ maps neatly to original webapps
    maps neatly to original webapps
    maps neatly to original webapps
    maps neatly to original webapps
    maps neatly to original webapps
    maps neatly to original webapps
    maps neatly to original webapps
    maps neatly to original webapps







    ⚓ doesn't always map neatly to individual pieces
    doesn't always map neatly to individual pieces
    doesn't always map neatly to individual pieces
    doesn't always map neatly to individual pieces
    doesn't always map neatly to individual pieces
    doesn't always map neatly to individual pieces
    doesn't always map neatly to individual pieces
    doesn't always map neatly to individual pieces

    View Slide

  16. THESE ARE NOT THE
    WHITEPAPERS WE'RE
    LOOKING FOR







    ⚓ we must repurpose
    we must repurpose
    we must repurpose
    we must repurpose
    we must repurpose
    we must repurpose
    we must repurpose
    we must repurpose







    ⚓ MVC is a great starting point
    MVC is a great starting point
    MVC is a great starting point
    MVC is a great starting point
    MVC is a great starting point
    MVC is a great starting point
    MVC is a great starting point
    MVC is a great starting point







    ⚓ MVC will do in a pinch
    MVC will do in a pinch
    MVC will do in a pinch
    MVC will do in a pinch
    MVC will do in a pinch
    MVC will do in a pinch
    MVC will do in a pinch
    MVC will do in a pinch







    ⚓ more sophisticated webapps give us reason to revisit other
    more sophisticated webapps give us reason to revisit other
    more sophisticated webapps give us reason to revisit other
    more sophisticated webapps give us reason to revisit other
    more sophisticated webapps give us reason to revisit other
    more sophisticated webapps give us reason to revisit other
    more sophisticated webapps give us reason to revisit other
    more sophisticated webapps give us reason to revisit other
    patterns
    patterns
    patterns
    patterns
    patterns
    patterns
    patterns
    patterns

    View Slide

  17. BEYOND THE BORDERS OF
    MVC

    View Slide

  18. EVENT-DRIVEN
    ARCHITECTURES







    ⚓ primary application unit is the event, not the object
    primary application unit is the event, not the object
    primary application unit is the event, not the object
    primary application unit is the event, not the object
    primary application unit is the event, not the object
    primary application unit is the event, not the object
    primary application unit is the event, not the object
    primary application unit is the event, not the object







    ⚓ state, utility functions, and resources corralled together
    state, utility functions, and resources corralled together
    state, utility functions, and resources corralled together
    state, utility functions, and resources corralled together
    state, utility functions, and resources corralled together
    state, utility functions, and resources corralled together
    state, utility functions, and resources corralled together
    state, utility functions, and resources corralled together







    ⚓ functions, getters, and setters are subscribers
    functions, getters, and setters are subscribers
    functions, getters, and setters are subscribers
    functions, getters, and setters are subscribers
    functions, getters, and setters are subscribers
    functions, getters, and setters are subscribers
    functions, getters, and setters are subscribers
    functions, getters, and setters are subscribers







    ⚓ should feel natural to JS devs
    should feel natural to JS devs
    should feel natural to JS devs
    should feel natural to JS devs
    should feel natural to JS devs
    should feel natural to JS devs
    should feel natural to JS devs
    should feel natural to JS devs







    ⚓ similarities to service-oriented architectures
    similarities to service-oriented architectures
    similarities to service-oriented architectures
    similarities to service-oriented architectures
    similarities to service-oriented architectures
    similarities to service-oriented architectures
    similarities to service-oriented architectures
    similarities to service-oriented architectures

    View Slide

  19. EVENT-DRIVEN
    ARCHITECTURE
    $
    ( "
    #
    l
    o
    g
    i
    n
    " )
    .
    c
    l
    i
    c
    k
    ( f
    u
    n
    c
    t
    i
    o
    n
    ( e ) {
    p
    u
    b
    l
    i
    s
    h
    ( "
    l
    o
    g
    i
    n
    _
    a
    t
    t
    e
    m
    p
    t
    "
    , {
    u
    s
    e
    r
    n
    a
    m
    e
    : $
    ( "
    #
    u
    s
    e
    r
    n
    a
    m
    e
    " )
    .
    v
    a
    l
    (
    )
    ,
    p
    a
    s
    s
    w
    o
    r
    d
    : $
    ( "
    #
    p
    a
    s
    s
    w
    o
    r
    d
    " )
    .
    v
    a
    l
    (
    )
    }
    )
    ;
    }
    )
    ;
    s
    u
    b
    s
    c
    r
    i
    b
    e
    ( "
    l
    o
    g
    i
    n
    _
    a
    t
    t
    e
    m
    p
    t
    "
    , f
    u
    n
    c
    t
    i
    o
    n
    ( c
    r
    e
    d
    e
    n
    t
    i
    a
    l
    s ) {
    $
    .
    p
    o
    s
    t
    ( "
    /
    l
    o
    g
    i
    n
    "
    , c
    r
    e
    d
    e
    n
    t
    i
    a
    l
    s
    , f
    u
    n
    c
    t
    i
    o
    n
    ( d
    a
    t
    a ) {
    p
    u
    b
    l
    i
    s
    h
    ( "
    u
    s
    e
    r
    _
    l
    o
    g
    i
    n
    "
    , d
    a
    t
    a
    .
    u
    s
    e
    r
    i
    d )
    ;
    }
    )
    .
    e
    r
    r
    o
    r
    ( f
    u
    n
    c
    t
    i
    o
    n
    ( d
    a
    t
    a ) {
    p
    u
    b
    l
    i
    s
    h
    ( "
    l
    o
    g
    i
    n
    _
    f
    a
    i
    l
    "
    , d
    a
    t
    a
    .
    m
    e
    s
    s
    a
    g
    e )
    ;
    }
    )
    ;
    }
    )
    ;

    View Slide

  20. EVENT-DRIVEN
    ARCHITECTURE
    v
    a
    r c
    a
    r
    t
    _
    s
    t
    a
    t
    e = {
    u
    s
    e
    r
    i
    d
    : n
    u
    l
    l
    ,
    c
    a
    r
    t
    _
    i
    t
    e
    m
    s
    : [
    ]
    ,
    c
    a
    n
    _
    c
    h
    e
    c
    k
    o
    u
    t
    : f
    a
    l
    s
    e
    }
    ;
    c
    a
    r
    t
    _
    s
    t
    a
    t
    e
    .
    s
    u
    b
    s
    c
    r
    i
    b
    e
    ( "
    u
    s
    e
    r
    _
    l
    o
    g
    i
    n
    "
    , f
    u
    n
    c
    t
    i
    o
    n
    ( i
    d ) {
    t
    h
    i
    s
    .
    u
    s
    e
    r
    i
    d = i
    d
    ;
    i
    f ( t
    h
    i
    s
    .
    c
    a
    r
    t
    _
    i
    t
    e
    m
    s
    .
    l
    e
    n
    g
    t
    h ) {
    t
    h
    i
    s
    .
    c
    a
    n
    _
    c
    h
    e
    c
    k
    o
    u
    t = t
    r
    u
    e
    ;
    p
    u
    b
    l
    i
    s
    h
    ( "
    c
    a
    r
    t
    _
    r
    e
    a
    d
    y
    " )
    ;
    }
    }
    )
    ;

    View Slide

  21. EVENT-DRIVEN
    ARCHITECTURE
    v
    a
    r r
    e
    n
    d
    e
    r
    e
    r = {
    t
    e
    m
    p
    l
    a
    t
    e
    s
    : {
    }
    ,
    r
    e
    n
    d
    e
    r
    : f
    u
    n
    c
    t
    i
    o
    n
    ( t
    m
    p
    l
    , d
    a
    t
    a
    , c
    o
    n
    t
    a
    i
    n
    e
    r ) {
    v
    a
    r h = u
    t
    i
    l
    .
    t
    e
    m
    p
    l
    a
    t
    e
    (
    t
    h
    i
    s
    .
    t
    e
    m
    p
    l
    a
    t
    e
    s
    [ t
    m
    p
    l ]
    ,
    d
    a
    t
    a
    )
    ;
    $
    ( c
    o
    n
    t
    a
    i
    n
    e
    r )
    .
    h
    t
    m
    l
    ( h )
    ;
    }
    }
    ;
    r
    e
    n
    d
    e
    r
    e
    r
    .
    s
    u
    b
    s
    c
    r
    i
    b
    e
    ( "
    c
    a
    r
    t
    _
    r
    e
    a
    d
    y
    "
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    t
    h
    i
    s
    .
    r
    e
    n
    d
    e
    r
    ( "
    c
    a
    r
    t
    _
    c
    h
    e
    c
    k
    o
    u
    t
    "
    , n
    u
    l
    l
    , "
    #
    c
    a
    r
    t
    " )
    ;
    }
    )
    ;

    View Slide

  22. NAKED OBJECTS







    ⚓ primary units are widgets/controls
    primary units are widgets/controls
    primary units are widgets/controls
    primary units are widgets/controls
    primary units are widgets/controls
    primary units are widgets/controls
    primary units are widgets/controls
    primary units are widgets/controls







    ⚓ similarities to desktop development
    similarities to desktop development
    similarities to desktop development
    similarities to desktop development
    similarities to desktop development
    similarities to desktop development
    similarities to desktop development
    similarities to desktop development







    ⚓ more like PAC than MVC
    more like PAC than MVC
    more like PAC than MVC
    more like PAC than MVC
    more like PAC than MVC
    more like PAC than MVC
    more like PAC than MVC
    more like PAC than MVC







    ⚓ models aren't just data, but components
    models aren't just data, but components
    models aren't just data, but components
    models aren't just data, but components
    models aren't just data, but components
    models aren't just data, but components
    models aren't just data, but components
    models aren't just data, but components







    ⚓ properties have rendering, state, etc.
    properties have rendering, state, etc.
    properties have rendering, state, etc.
    properties have rendering, state, etc.
    properties have rendering, state, etc.
    properties have rendering, state, etc.
    properties have rendering, state, etc.
    properties have rendering, state, etc.







    ⚓ business logic abstracted out
    business logic abstracted out
    business logic abstracted out
    business logic abstracted out
    business logic abstracted out
    business logic abstracted out
    business logic abstracted out
    business logic abstracted out







    ⚓ nice for compositional uses like CMSes
    nice for compositional uses like CMSes
    nice for compositional uses like CMSes
    nice for compositional uses like CMSes
    nice for compositional uses like CMSes
    nice for compositional uses like CMSes
    nice for compositional uses like CMSes
    nice for compositional uses like CMSes

    View Slide

  23. NAKED OBJECTS
    v
    a
    r C
    o
    l
    o
    r
    S
    l
    i
    d
    e
    r = f
    u
    n
    c
    t
    i
    o
    n
    ( c
    o
    n
    t
    a
    i
    n
    e
    r
    , u
    r
    l
    , c
    h
    a
    n ) {
    t
    h
    i
    s = {
    _
    c
    o
    n
    t
    a
    i
    n
    e
    r
    : c
    o
    n
    t
    a
    i
    n
    e
    r
    ,
    _
    v
    a
    l
    u
    e
    : "
    "
    ,
    _
    u
    r
    l
    : u
    r
    l
    ,
    _
    c
    h
    a
    n
    n
    e
    l
    : c
    h
    a
    n
    }
    ;
    r
    e
    t
    u
    r
    n t
    h
    i
    s
    ;
    }
    ;
    C
    o
    l
    o
    r
    S
    l
    i
    d
    e
    r
    .
    p
    r
    o
    t
    o
    t
    y
    p
    e = {
    g
    e
    t v
    a
    l
    u
    e
    (
    ) {
    r
    e
    t
    u
    r
    n t
    h
    i
    s
    .
    _
    v
    a
    l
    u
    e
    ;
    }
    ,
    s
    e
    t v
    a
    l
    u
    e
    ( v
    a
    l ) {
    t
    h
    i
    s
    .
    _
    v
    a
    l
    u
    e = v
    a
    l
    ;
    t
    h
    i
    s
    .
    _
    u
    p
    d
    a
    t
    e
    (
    )
    ;
    }
    }
    ;

    View Slide

  24. NAKED OBJECTS
    C
    o
    l
    o
    r
    S
    l
    i
    d
    e
    r
    .
    p
    r
    o
    t
    o
    t
    y
    p
    e
    .
    _
    u
    p
    d
    a
    t
    e = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r t
    h
    a
    t = t
    h
    i
    s
    ,
    d
    a
    t
    a = {
    }
    ;
    d
    a
    t
    a
    [ t
    h
    a
    t
    .
    _
    c
    h
    a
    n
    n
    e
    l ] = t
    h
    a
    t
    .
    _
    v
    a
    l
    u
    e
    ;
    $
    .
    p
    o
    s
    t
    ( t
    h
    a
    t
    .
    _
    u
    r
    l
    ,
    d
    a
    t
    a
    ,
    f
    u
    n
    c
    t
    i
    o
    n
    ( d ) {
    t
    h
    a
    t
    .
    _
    r
    e
    n
    d
    e
    r
    ;
    i
    f (
    T
    o
    o
    l
    b
    o
    x
    ) T
    o
    o
    l
    b
    o
    x
    .
    s
    e
    t
    C
    o
    l
    o
    r
    ( d )
    ;
    }
    )
    ;
    }
    ;

    View Slide

  25. NAKED OBJECTS
    C
    o
    l
    o
    r
    S
    l
    i
    d
    e
    r
    .
    p
    r
    o
    t
    o
    t
    y
    p
    e
    .
    _
    r
    e
    n
    d
    e
    r = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r h
    t
    m
    l = '
    <
    i
    n
    p
    u
    t t
    y
    p
    e
    =
    "
    r
    a
    n
    g
    e
    " i
    d
    =
    "
    c
    o
    l
    o
    r
    " ' +
    '
    m
    i
    n
    =
    "
    0
    " m
    a
    x
    =
    "
    2
    5
    5
    " v
    a
    l
    u
    e
    =
    "
    ' +
    t
    h
    a
    t
    .
    _
    v
    a
    l
    u
    e + '
    " s
    t
    y
    l
    e
    =
    "
    c
    o
    l
    o
    r
    :
    r
    g
    b
    (
    ' +
    t
    h
    a
    t
    .
    _
    c
    h
    a
    n
    n
    e
    l =
    = "
    r
    e
    d
    " ?
    t
    h
    a
    t
    .
    _
    v
    a
    l
    u
    e + '
    ,
    0
    ,
    0
    )
    ;
    "
    /
    >
    ' :
    t
    h
    a
    t
    .
    _
    c
    h
    a
    n
    n
    e
    l =
    = "
    g
    r
    e
    e
    n
    " ?
    '
    0
    ,
    ' + t
    h
    a
    t
    .
    _
    v
    a
    l
    u
    e + '
    ,
    0
    )
    ;
    "
    /
    >
    ' :
    '
    0
    ,
    0
    ,
    ' + t
    h
    a
    t
    .
    _
    v
    a
    l
    u
    e + '
    )
    ;
    "
    /
    >
    ' ;
    t
    h
    i
    s
    .
    _
    c
    o
    n
    t
    a
    i
    n
    e
    r
    .
    i
    n
    n
    e
    r
    H
    T
    M
    L = h
    t
    m
    l
    ;
    }
    ;

    View Slide

  26. PIPELINES







    ⚓ primary units are states (application and object)
    primary units are states (application and object)
    primary units are states (application and object)
    primary units are states (application and object)
    primary units are states (application and object)
    primary units are states (application and object)
    primary units are states (application and object)
    primary units are states (application and object)







    ⚓ like successive decorators
    like successive decorators
    like successive decorators
    like successive decorators
    like successive decorators
    like successive decorators
    like successive decorators
    like successive decorators







    ⚓ familiar concept for jQuery devs
    familiar concept for jQuery devs
    familiar concept for jQuery devs
    familiar concept for jQuery devs
    familiar concept for jQuery devs
    familiar concept for jQuery devs
    familiar concept for jQuery devs
    familiar concept for jQuery devs







    ⚓ can operate on two axes (e.g. next())
    can operate on two axes (e.g. next())
    can operate on two axes (e.g. next())
    can operate on two axes (e.g. next())
    can operate on two axes (e.g. next())
    can operate on two axes (e.g. next())
    can operate on two axes (e.g. next())
    can operate on two axes (e.g. next())

    View Slide

  27. PIPELINES
    P
    a
    g
    e
    U
    t
    i
    l
    s
    .
    i
    n
    i
    t = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    t
    h
    i
    s
    .
    r
    e
    n
    d
    e
    r
    (
    )
    .
    w
    i
    r
    e
    u
    p
    (
    )
    ;
    }
    ;
    P
    a
    g
    e
    U
    t
    i
    l
    s
    .
    _
    r
    u
    n = f
    u
    n
    c
    t
    i
    o
    n
    ( f
    n
    s ) {
    v
    a
    r t
    h
    a
    t = t
    h
    i
    s
    ;
    f
    n
    s
    .
    f
    o
    r
    E
    a
    c
    h
    ( f
    u
    n
    c
    t
    i
    o
    n
    ( f
    n ) {
    t
    h
    a
    t = P
    a
    g
    e
    U
    t
    i
    l
    s
    [ f
    n ]
    .
    c
    a
    l
    l
    ( t
    h
    a
    t )
    ;
    }
    )
    ;
    }
    ;

    View Slide

  28. PIPELINES
    P
    a
    g
    e
    U
    t
    i
    l
    s
    .
    r
    e
    n
    d
    e
    r = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r t
    h
    a
    t = t
    h
    i
    s
    ;
    $
    ( "
    b
    o
    d
    y
    " )
    .
    a
    p
    p
    e
    n
    d
    (
    u
    t
    i
    l
    .
    t
    e
    m
    p
    l
    a
    t
    e
    ( t
    h
    a
    t
    .
    t
    m
    p
    l
    , t
    h
    a
    t
    .
    d
    a
    t
    a )
    ;
    )
    ;
    r
    e
    t
    u
    r
    n t
    h
    a
    t
    ;
    }
    ;
    P
    a
    g
    e
    U
    t
    i
    l
    s
    .
    w
    i
    r
    e
    u
    p = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    v
    a
    r t
    h
    a
    t = t
    h
    i
    s
    ;
    t
    h
    a
    t
    .
    h
    a
    n
    d
    l
    e
    r
    s
    .
    f
    o
    r
    E
    a
    c
    h
    ( f
    u
    n
    c
    t
    i
    o
    n
    ( e
    l ) {
    $
    ( e
    l
    .
    s
    e
    l
    e
    c
    t
    o
    r )
    .
    o
    n
    ( e
    l
    .
    e
    v
    , f
    u
    n
    c
    t
    i
    o
    n
    ( e ) {
    e
    .
    p
    r
    e
    v
    e
    n
    t
    D
    e
    f
    a
    u
    l
    t
    (
    )
    ;
    t
    h
    a
    t
    .
    _
    r
    u
    n
    ( e
    l
    .
    f
    u
    n
    c
    t
    i
    o
    n
    s )
    }
    )
    ;
    }
    )
    ;
    r
    e
    t
    u
    r
    n t
    h
    a
    t
    ;
    }
    ;

    View Slide

  29. PIPELINES
    v
    a
    r P
    a
    g
    e = {
    n
    a
    m
    e
    : "
    r
    e
    g
    i
    s
    t
    e
    r
    "
    ,
    t
    m
    p
    l
    : "
    /
    t
    e
    m
    p
    l
    a
    t
    e
    s
    /
    r
    e
    g
    i
    s
    t
    e
    r
    .
    t
    m
    p
    l
    "
    ,
    d
    a
    t
    a
    : {
    }
    ,
    h
    a
    n
    d
    l
    e
    r
    s
    : [
    {
    s
    e
    l
    e
    c
    t
    o
    r
    : "
    #
    b
    t
    n
    R
    g
    i
    s
    t
    e
    r
    "
    ,
    e
    v
    : "
    c
    l
    i
    c
    k
    "
    ,
    f
    u
    n
    c
    t
    i
    o
    n
    s
    : [ w
    a
    i
    t
    ,
    v
    a
    l
    i
    d
    a
    t
    e
    ,
    u
    p
    d
    a
    t
    e
    ,
    r
    e
    n
    d
    e
    r ]
    }
    ,
    {
    s
    e
    l
    e
    c
    t
    o
    r
    : "
    #
    b
    t
    n
    C
    a
    n
    c
    e
    l
    "
    ,
    e
    v
    : "
    c
    l
    i
    c
    k
    "
    ,
    f
    u
    n
    c
    t
    i
    o
    n
    s
    : [
    r
    e
    n
    d
    e
    r
    ]
    }
    ]
    }
    ;
    $
    .
    e
    x
    t
    e
    n
    d
    ( t
    r
    u
    e
    , P
    a
    g
    e
    , P
    a
    g
    e
    U
    t
    i
    l
    s )
    ;
    P
    a
    g
    e
    .
    i
    n
    i
    t
    (
    )
    ;

    View Slide

  30. PIPELINES (ASYNC)
    $
    .
    w
    h
    e
    n
    ( S
    e
    a
    r
    c
    h
    .
    i
    n
    i
    t
    (
    ) )
    .
    .
    t
    h
    e
    n
    ( S
    e
    a
    r
    c
    h
    .
    s
    e
    t
    D
    a
    t
    e
    s
    (
    ) )
    .
    t
    h
    e
    n
    ( S
    e
    a
    r
    c
    h
    .
    s
    e
    t
    C
    i
    t
    y
    (
    ) )
    .
    t
    h
    e
    n
    ( S
    e
    a
    r
    c
    h
    .
    s
    h
    o
    w
    R
    e
    s
    u
    l
    t
    s
    (
    ) )
    ;

    View Slide

  31. CONSIDERATIONS FOR
    ALTERNATIVES TO MVC







    ⚓ degree and emphasis of decoupling
    degree and emphasis of decoupling
    degree and emphasis of decoupling
    degree and emphasis of decoupling
    degree and emphasis of decoupling
    degree and emphasis of decoupling
    degree and emphasis of decoupling
    degree and emphasis of decoupling







    ⚓ whether picture of application is decentralized
    whether picture of application is decentralized
    whether picture of application is decentralized
    whether picture of application is decentralized
    whether picture of application is decentralized
    whether picture of application is decentralized
    whether picture of application is decentralized
    whether picture of application is decentralized







    ⚓ level of abstraction in controls
    level of abstraction in controls
    level of abstraction in controls
    level of abstraction in controls
    level of abstraction in controls
    level of abstraction in controls
    level of abstraction in controls
    level of abstraction in controls







    ⚓ setup/initialization needed
    setup/initialization needed
    setup/initialization needed
    setup/initialization needed
    setup/initialization needed
    setup/initialization needed
    setup/initialization needed
    setup/initialization needed

    View Slide

  32. MVC AND THE STATIC
    SITE

    View Slide

  33. STATIC SITE
    ARCHITECTURE







    ⚓ what, you thought static sites didn't need one??
    what, you thought static sites didn't need one??
    what, you thought static sites didn't need one??
    what, you thought static sites didn't need one??
    what, you thought static sites didn't need one??
    what, you thought static sites didn't need one??
    what, you thought static sites didn't need one??
    what, you thought static sites didn't need one??







    ⚓ still need things like library functionality
    still need things like library functionality
    still need things like library functionality
    still need things like library functionality
    still need things like library functionality
    still need things like library functionality
    still need things like library functionality
    still need things like library functionality







    ⚓ where does a library end and a pattern begin?
    where does a library end and a pattern begin?
    where does a library end and a pattern begin?
    where does a library end and a pattern begin?
    where does a library end and a pattern begin?
    where does a library end and a pattern begin?
    where does a library end and a pattern begin?
    where does a library end and a pattern begin?







    ⚓ real options for large static sites:
    real options for large static sites:
    real options for large static sites:
    real options for large static sites:
    real options for large static sites:
    real options for large static sites:
    real options for large static sites:
    real options for large static sites:







    ⚓ EDA
    EDA
    EDA
    EDA
    EDA
    EDA
    EDA
    EDA







    ⚓ pipelines
    pipelines
    pipelines
    pipelines
    pipelines
    pipelines
    pipelines
    pipelines







    ⚓ RMI
    RMI
    RMI
    RMI
    RMI
    RMI
    RMI
    RMI

    View Slide

  34. CONSIDERATIONS FOR
    STATIC SITES







    ⚓ need strong conventions even more than SPAs
    need strong conventions even more than SPAs
    need strong conventions even more than SPAs
    need strong conventions even more than SPAs
    need strong conventions even more than SPAs
    need strong conventions even more than SPAs
    need strong conventions even more than SPAs
    need strong conventions even more than SPAs







    ⚓ naturally decoupled already at "application" level
    naturally decoupled already at "application" level
    naturally decoupled already at "application" level
    naturally decoupled already at "application" level
    naturally decoupled already at "application" level
    naturally decoupled already at "application" level
    naturally decoupled already at "application" level
    naturally decoupled already at "application" level







    ⚓ may exchange more tightly coupled application for more
    may exchange more tightly coupled application for more
    may exchange more tightly coupled application for more
    may exchange more tightly coupled application for more
    may exchange more tightly coupled application for more
    may exchange more tightly coupled application for more
    may exchange more tightly coupled application for more
    may exchange more tightly coupled application for more
    loosely coupled DOM
    loosely coupled DOM
    loosely coupled DOM
    loosely coupled DOM
    loosely coupled DOM
    loosely coupled DOM
    loosely coupled DOM
    loosely coupled DOM







    ⚓ architecture is a tool to enforce style
    architecture is a tool to enforce style
    architecture is a tool to enforce style
    architecture is a tool to enforce style
    architecture is a tool to enforce style
    architecture is a tool to enforce style
    architecture is a tool to enforce style
    architecture is a tool to enforce style







    ⚓ performance changes felt more acutely, need careful balance
    performance changes felt more acutely, need careful balance
    performance changes felt more acutely, need careful balance
    performance changes felt more acutely, need careful balance
    performance changes felt more acutely, need careful balance
    performance changes felt more acutely, need careful balance
    performance changes felt more acutely, need careful balance
    performance changes felt more acutely, need careful balance
    with any inversion of control
    with any inversion of control
    with any inversion of control
    with any inversion of control
    with any inversion of control
    with any inversion of control
    with any inversion of control
    with any inversion of control

    View Slide

  35. SO, LIKE, SHOULD YOU
    USE BACKBONE OR NOT?

    View Slide

  36. BOTTOM LINE







    ⚓ use MVC instead of nothing
    use MVC instead of nothing
    use MVC instead of nothing
    use MVC instead of nothing
    use MVC instead of nothing
    use MVC instead of nothing
    use MVC instead of nothing
    use MVC instead of nothing







    ⚓ where possible, fit patterns to apps, not vice-versa
    where possible, fit patterns to apps, not vice-versa
    where possible, fit patterns to apps, not vice-versa
    where possible, fit patterns to apps, not vice-versa
    where possible, fit patterns to apps, not vice-versa
    where possible, fit patterns to apps, not vice-versa
    where possible, fit patterns to apps, not vice-versa
    where possible, fit patterns to apps, not vice-versa







    ⚓ if you write a framework, try to solve a new problem
    if you write a framework, try to solve a new problem
    if you write a framework, try to solve a new problem
    if you write a framework, try to solve a new problem
    if you write a framework, try to solve a new problem
    if you write a framework, try to solve a new problem
    if you write a framework, try to solve a new problem
    if you write a framework, try to solve a new problem







    ⚓ when refactoring, favor loosest coupling
    when refactoring, favor loosest coupling
    when refactoring, favor loosest coupling
    when refactoring, favor loosest coupling
    when refactoring, favor loosest coupling
    when refactoring, favor loosest coupling
    when refactoring, favor loosest coupling
    when refactoring, favor loosest coupling







    ⚓ every implementation decays
    every implementation decays
    every implementation decays
    every implementation decays
    every implementation decays
    every implementation decays
    every implementation decays
    every implementation decays







    ⚓ use the best tool you can find
    use the best tool you can find
    use the best tool you can find
    use the best tool you can find
    use the best tool you can find
    use the best tool you can find
    use the best tool you can find
    use the best tool you can find







    ⚓ architect opportunities to improve not just code quality,
    architect opportunities to improve not just code quality,
    architect opportunities to improve not just code quality,
    architect opportunities to improve not just code quality,
    architect opportunities to improve not just code quality,
    architect opportunities to improve not just code quality,
    architect opportunities to improve not just code quality,
    architect opportunities to improve not just code quality,
    but pattern
    but pattern
    but pattern
    but pattern
    but pattern
    but pattern
    but pattern
    but pattern

    View Slide

  37. THANKS!







    ⚓ image credit:
    image credit:
    image credit:
    image credit:
    image credit:
    image credit:
    image credit:
    image credit:
    http://www.flickr.com/photos/60584010@N00/3213608406/
    http://www.flickr.com/photos/60584010@N00/3213608406/
    http://www.flickr.com/photos/60584010@N00/3213608406/
    http://www.flickr.com/photos/60584010@N00/3213608406/
    http://www.flickr.com/photos/60584010@N00/3213608406/
    http://www.flickr.com/photos/60584010@N00/3213608406/
    http://www.flickr.com/photos/60584010@N00/3213608406/
    http://www.flickr.com/photos/60584010@N00/3213608406/

    View Slide

  38. View Slide