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

Digesting JavaScript MVC

Digesting JavaScript MVC

In this talk, we'll explore the current state of MVC in the JavaScript community, what MVC was originally supposed to be (Smalltalk-80) and whether modern frameworks abuse (or evolve) the MVC pattern.

We'll also look at a framework that tries to stick more closely to the original version of MVC and close up with a panel discussion. I thoroughly enjoyed the panel and will update with links to video once they're posted.

For a talk given at London Ajax
http://www.meetup.com/londonajax/events/46431702/

Addy Osmani

June 13, 2012
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. Digesting MVC
    WITH @addyosmani
    JAVASCRIPT

    View Slide

  2. Is it abuse? Let’s talk more about that soon.
    What year were you born?
    50s-70s 1980 1990 2000 Now
    C#, Clojure,
    Go, Dart
    C++
    born
    JavaScript,
    Ruby, Java, PHP
    born
    Fortran, C
    created
    Perl,
    Erlang

    View Slide

  3. Is it abuse? Let’s talk more about that soon.
    MVC was conceived in 1978
    Still being used 34 years later.
    Thanks Smalltalk-80 and Trygve Reenskaug!
    Apple II, 1978.

    View Slide

  4. Is it abuse? Let’s talk more about that soon.
    Think about that.
    Imagine if we were still using these?
    5.25” Floppy disks

    View Slide

  5. Is it abuse? Let’s talk more about that soon.
    Or..Sean Connery still did this.

    View Slide

  6. Let’s talk about MVC.

    View Slide

  7. Is it abuse or evolution?
    Let’s talk more about that soon.

    View Slide

  8. I WORK AT
    AS A DEVELOPER PROGRAMS ENGINEER
    50% ENGINEER 50% TECHNICAL WRITER
    QUICK INFO ABOUT ME

    View Slide

  9. CONTRIBUTED TO: CREATED:
    TodoMVC
    jQuery UI Bootstrap
    Backbone Aura
    Backbone Paginator
    jQuery Plugin Patterns
    getUserMedia.js
    basket.js
    and more.
    Feature detection tests
    Documentation, Learning Site, Triage
    Latest Todo application
    WRITTEN:
    Learning JS Design Patterns
    Backbone Fundamentals

    View Slide

  10. Most Developers realize that
    structured, maintainable code is
    important.
    Much better position than where we were 2-3 years ago.
    Not enough took Dojo seriously for this, but should have.
    In 2012

    View Slide

  11. There are over 40 JavaScript MVC
    frameworks to help.
    ..many of which don’t use MVC.

    View Slide

  12. Let’s talk about MVC.
    http://todomc.com

    View Slide

  13. Let’s talk about MVC.

    View Slide

  14. Design Patterns were supposed to be a
    common vocabulary.
    but everyone has their own definitions.

    View Slide

  15. Everyone has their own take on how
    separation of concerns
    should manifest.

    View Slide

  16. MVC.

    View Slide

  17. That doesn’t mean go create your
    own framework.
    Please don’t.
    (Unless it’s doing something totally different)

    View Slide

  18. Solving a problem yourself can
    greatly improve your understanding
    of it’s mechanics.
    That said..

    View Slide

  19. I stand by this, but that doesn’t mean
    go create your own framework..unless..

    View Slide

  20. 1980 2012
    MVC MVP
    WEB
    MVC
    WEB
    MVP
    MVVM JS MVC
    MV* variations
    Adaptation over 30 years spanning C++, Java, C#, ASP, PHP
    now JavaScript. The Browser is a different paradigm.

    View Slide

  21. We started off with MVC.
    MVC
    Provides a clean separation of concerns
    where data (Models), presentation
    (Views) and user-input (Controllers) are
    handled separately.
    (more on this soon)

    View Slide

  22. The Model-View-Presenter pattern
    MVP
    Like MVC, but with a heavier focus on
    decoupled UI development.
    The P (Presenter) plays the role of the
    Controller with the View handling user-
    input.
    Presenter retrieves data (Model) and
    formats it for display in the View.

    View Slide

  23. The Model-View ViewModel pattern
    MVVM
    Similarly like MVC, but the ViewModel provides
    data bindings between the Model and View.
    Converts Model data and passes it on to the
    View for usage.

    View Slide

  24. Variations on these patterns
    MV*
    Patterns which borrow aspects from a
    number of others and don’t fall under a
    specific name.
    Developers commonly try fitting
    solutions that fall under MV* into one
    of the others but shouldn’t.

    View Slide

  25. Today, we’ve taken classic patterns
    and tried to shape them to work with
    the web.
    *sometimes this works well, sometimes it doesn’t.

    View Slide

  26. View Slide

  27. Why care about classic MVC?
    Understanding patterns allows us to use
    MV* frameworks more effectively.
    In theory.

    View Slide

  28. Separates applications into three main concerns:
    Smalltalk MVC
    Models Views Controllers

    View Slide

  29. Domain-level data for the application
    MVC: Models
    Represent domain-specific
    knowledge and data

    View Slide

  30. Domain-level data for the application
    MVC: Models
    Notify their observers
    about state using the
    Observer pattern

    View Slide

  31. Domain-level data for the application
    MVC: Models
    Isolated from the View.
    Modified by the Controller.

    View Slide

  32. Sometimes people said the first..but meant the second.
    MVC: Models
    • Domain model: data representing
    the core concepts in the app (e.g
    Book, Contact, Friend)
    • Application model: object that
    knows Views exist and that they
    need some data

    View Slide

  33. Render the current model state in a form that can be viewed/interacted with
    MVC: Views
    Often considered the UI, but
    doesn’t have to be

    View Slide

  34. Render the current model state in a form that can be viewed/interacted with
    MVC: Views
    Must know about the
    existence of Models in order
    to observe them

    View Slide

  35. Render the current model state in a form that can be viewed/interacted with
    MVC: Views
    Must know something about
    the Model nature. What are
    they observing?

    View Slide

  36. Render the current model state in a form that can be viewed/interacted with
    MVC: Views
    Multiple Views can exist for
    single Models. Think of any?

    View Slide

  37. Receive input and instruct views to respond accordingly
    MVC: Controllers
    Controllers handle input.
    Views handle output.
    This is a simplification.

    View Slide

  38. Receive input and instruct views to respond accordingly
    MVC: Controllers
    When the Controller changes
    model state, doesn’t directly
    tell the View.

    View Slide

  39. Here be dragons.
    MVC: Controllers
    Some implementations merge
    the Controller and the View.

    View Slide

  40. Text

    View Slide

  41. Challenge:
    Smalltalk !== JavaScript
    How do we apply it to a JS app?

    View Slide

  42. Converting spaghetti code to use MVC isn’t all that hard..
    How Does This Work?
    Models
    Views
    Controllers
    Spaghetti code
    What unique data is
    represented in my
    app? e.g a picture, a
    person
    What does the user need
    to be able to see and do?
    What (repeatable) output
    can I shift to JS templating?
    (varies) Typically handle user
    interaction

    View Slide

  43. Converting spaghetti code to use MVC isn’t all that hard..
    How Does This Work?
    Models
    Views
    Controllers
    Spaghetti code
    What unique data is
    represented in my
    app? e.g a picture, a
    person
    What does the user need
    to be able to see?
    What (repeatable) output
    can I shift to JS templating?
    (varies) Typically handle user
    interaction

    View Slide

  44. Converting spaghetti code to use MVC isn’t all that hard..
    How Does This Work?
    Models
    Views
    Controllers
    Spaghetti code
    What unique data is
    represented in my
    app? e.g a picture, a
    person
    What does the user need to
    be able to see and do?
    What (repeatable) output can I
    shift to JS templating?
    (varies) Typically handle user
    interaction

    View Slide

  45. Back to frameworks and MV*.

    View Slide

  46. It’s more MVP than anything else.
    Backbone MVC
    Models Views Collections Routers
    Domain-level
    data structures
    User-interface and
    Interaction
    Closer to Controller
    Like the ‘P’ in MVP
    Groups of
    models
    Map URLs to
    functions

    View Slide

  47. Actual components
    Backbone MVC
    Backbone.
    Model
    Backbone.View
    Backbone.
    Collection
    Backbone.Router
    Views Collections Routers
    Models

    View Slide

  48. How does Ember.js view the MVC pattern?
    Ember MVC
    Models Views Controllers
    State
    Manager
    Domain-level data,
    relationships
    between models
    HTML Templates Manage lists
    of objects
    Mediates
    between MVC
    parts

    View Slide

  49. How does Ember.js view the MVC pattern?
    Ember MVC
    Models Views Controllers
    State
    Manager
    DS.Model Ember.View Ember.ArrayController Mediates
    between MVC
    parts

    View Slide

  50. How does Angular.js view the MVC pattern? (btw, check it out!)
    AngularJS
    Models Views Controllers Scope
    Single entity object
    or entire data
    model (all entities)
    Rendered DOM based
    on what’s in the
    Controller and Model
    Classes for
    augmenting
    Angular
    Scopes
    API for observing
    models,
    API for propagating
    model changes
    through the system

    View Slide

  51. How does Angular.js view the MVC pattern? (btw, check it out!)
    AngularJS
    Models Controllers Scope
    In data-bindings Templates
    Bindings between
    View and Model
    Augments
    $scope
    $scope
    Views

    View Slide

  52. CoffeeScript-based MVC framework
    Spine.js
    Models Views Controllers Routers
    Domain-data
    Controllers bind to
    model events
    HTML fragments
    Respond to DOM
    events,
    render templates,
    sync models and
    views
    Hash
    fragment
    based routing

    View Slide

  53. CoffeeScript-based MVC framework
    Spine.js
    Models Views Controllers Routers
    Spine.Model JS-templating of coice Spine.Controller Spine.Route

    View Slide

  54. Everyone considers MVC something
    different. They’ve adapted it.

    View Slide

  55. Let’s look at a framework which tries
    to stick closer to Smalltalk MVC

    View Slide

  56. Based on Smalltalk MVC, by Peter Michaux
    Maria MVC
    Models Views Controllers Routers
    Domain-data
    on change it
    notifies observers
    Observes models,
    represents model’s
    current state
    Handles what
    happens when a user
    interacts with a View
    Your own.
    https://github.com/petermichaux/maria/

    View Slide

  57. Based on Smalltalk MVC
    Maria MVC
    Models Views Controllers Routers
    maria.Model maria.ElementView maria.Controller Your own.

    View Slide

  58. Discussion
    JSMVC: Evolution or Abuse?
    Does Smalltalk MVC have a place in
    JavaScript land?
    Are frameworks right to augment ‘MVC’?

    View Slide

  59. Let’s get real.
    Don’t be pedantic.
    Use what feels like the most
    maintainable option for you.

    View Slide

  60. What’s the latest MV* hotness?

    View Slide

  61. View Slide

  62. HarvestHQ Harvey
    DEVICE-SPECIFIC VIEWS
    https://github.com/harvesthq/harvey

    View Slide

  63. View Slide

  64. Backbone.Offline
    OFFLINE-FIRST APPS
    https://github.com/Ask11/backbone.offline
    Apps work offline first, server
    sync when there’s a connection.

    View Slide

  65. Backbone Aura
    Backbone LayoutManager
    Backbone Marionette
    Thorax
    Chaplin
    ARCHITECTURE EXTENSIONS
    MV* is just a small base. These components help
    manage greater concerns.

    View Slide

  66. Let’s talk about MVC.

    View Slide

  67. For more on me
    @addyosmani || github.com/addyosmani
    Thank you <3

    View Slide