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

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. 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
  2. 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.
  3. Is it abuse? Let’s talk more about that soon. Think

    about that. Imagine if we were still using these? 5.25” Floppy disks
  4. I WORK AT AS A DEVELOPER PROGRAMS ENGINEER 50% ENGINEER

    50% TECHNICAL WRITER QUICK INFO ABOUT ME
  5. 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
  6. 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
  7. That doesn’t mean go create your own framework. Please don’t.

    (Unless it’s doing something totally different)
  8. 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.
  9. 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)
  10. 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.
  11. 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.
  12. 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.
  13. Today, we’ve taken classic patterns and tried to shape them

    to work with the web. *sometimes this works well, sometimes it doesn’t.
  14. Why care about classic MVC? Understanding patterns allows us to

    use MV* frameworks more effectively. In theory.
  15. 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
  16. 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
  17. 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
  18. 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?
  19. 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?
  20. Receive input and instruct views to respond accordingly MVC: Controllers

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

    When the Controller changes model state, doesn’t directly tell the View.
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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/
  32. Based on Smalltalk MVC Maria MVC Models Views Controllers Routers

    maria.Model maria.ElementView maria.Controller Your own.
  33. Discussion JSMVC: Evolution or Abuse? Does Smalltalk MVC have a

    place in JavaScript land? Are frameworks right to augment ‘MVC’?
  34. Let’s get real. Don’t be pedantic. Use what feels like

    the most maintainable option for you.
  35. Backbone Aura Backbone LayoutManager Backbone Marionette Thorax Chaplin ARCHITECTURE EXTENSIONS

    MV* is just a small base. These components help manage greater concerns.