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/

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

June 13, 2012
Tweet

Transcript

  1. Digesting MVC WITH @addyosmani JAVASCRIPT

  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
  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.
  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
  5. Is it abuse? Let’s talk more about that soon. Or..Sean

    Connery still did this.
  6. Let’s talk about MVC.

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

    soon.
  8. I WORK AT AS A DEVELOPER PROGRAMS ENGINEER 50% ENGINEER

    50% TECHNICAL WRITER QUICK INFO ABOUT ME
  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
  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
  11. There are over 40 JavaScript MVC frameworks to help. ..many

    of which don’t use MVC.
  12. Let’s talk about MVC. http://todomc.com

  13. Let’s talk about MVC.

  14. Design Patterns were supposed to be a common vocabulary. but

    everyone has their own definitions.
  15. Everyone has their own take on how separation of concerns

    should manifest.
  16. MVC.

  17. That doesn’t mean go create your own framework. Please don’t.

    (Unless it’s doing something totally different)
  18. Solving a problem yourself can greatly improve your understanding of

    it’s mechanics. That said..
  19. I stand by this, but that doesn’t mean go create

    your own framework..unless..
  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.
  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)
  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.
  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.
  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.
  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.
  26. None
  27. Why care about classic MVC? Understanding patterns allows us to

    use MV* frameworks more effectively. In theory.
  28. Separates applications into three main concerns: Smalltalk MVC Models Views

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

    and data
  30. Domain-level data for the application MVC: Models Notify their observers

    about state using the Observer pattern
  31. Domain-level data for the application MVC: Models Isolated from the

    View. Modified by the Controller.
  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
  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
  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
  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?
  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?
  37. Receive input and instruct views to respond accordingly MVC: Controllers

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

    When the Controller changes model state, doesn’t directly tell the View.
  39. Here be dragons. MVC: Controllers Some implementations merge the Controller

    and the View.
  40. Text

  41. Challenge: Smalltalk !== JavaScript How do we apply it to

    a JS app?
  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
  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
  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
  45. Back to frameworks and MV*.

  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
  47. Actual components Backbone MVC Backbone. Model Backbone.View Backbone. Collection Backbone.Router

    Views Collections Routers Models
  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
  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
  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
  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
  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
  53. CoffeeScript-based MVC framework Spine.js Models Views Controllers Routers Spine.Model JS-templating

    of coice Spine.Controller Spine.Route
  54. Everyone considers MVC something different. They’ve adapted it.

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

    to Smalltalk MVC
  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/
  57. Based on Smalltalk MVC Maria MVC Models Views Controllers Routers

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

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

    the most maintainable option for you.
  60. What’s the latest MV* hotness?

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

  63. None
  64. Backbone.Offline OFFLINE-FIRST APPS https://github.com/Ask11/backbone.offline Apps work offline first, server sync

    when there’s a connection.
  65. Backbone Aura Backbone LayoutManager Backbone Marionette Thorax Chaplin ARCHITECTURE EXTENSIONS

    MV* is just a small base. These components help manage greater concerns.
  66. Let’s talk about MVC.

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