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/

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