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
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.
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?
62. HarvestHQ Harvey DEVICE-SPECIFIC VIEWS https://github.com/harvesthq/harvey
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