6

I'm at the point now where i really want to organize my code in a way that makes it more scalable and manageable. i want to get a better understanding of the MVC architectural in javascript without using a framework.

So this is what i understand thus far (please please please correct me if i'm wrong):

Model: an organized structure of the sites/web apps content(pics, copy, downloadable content, etc...) that also has logic needed in the manipulation of the content. so in javascript the model could be a JSON object or a call to a php file that retrieves/updates a database and the model's logic could be functions that are responsible for parsing, regex-ing, and organizing the content so it can then be handed off to the view?

View: the user interface and the visual representation of the Model's data/content. its only job is to display the content and accept user input if applicable?

Controller: so is the controller only job is to act as a mediator between the model and the view? for instance, if the view needs data does it ask the controller who then go's to the model to get the data then sends it back to the view? and if there is any user input the view sends it to the controller who then sends it to the model which is then updated at which point the controller then informs the view that the model has then been updated?

MVC has been and still is a point of confusion for me, combined with the fact that its been stated that MVC is not a natural accuring thing in javascript(at lease not like in php,java,actionscript,etc...)

Charles
  • 50,943
  • 13
  • 104
  • 142
zero
  • 2,999
  • 9
  • 42
  • 67
  • Try looking at MVC asides from Javascript, read some theory about it. Then you can apply those methods in any language you choose. – TJHeuvel Apr 18 '12 at 15:09
  • I have yet to see a pure MVC implementation of MVC from scratch in javascript. The vanilla js implementation in TodoMVC is definitively not true MVC, although it has a seperation of the different layers. See my comment to the accepted answer. The illustration from Head First Design Patterns might help: http://codereview.stackexchange.com/questions/42353/is-the-vanilla-implementation-of-todomvc-really-an-mvc-app – oligofren Feb 25 '14 at 14:31
  • The reason for the lack of true mvc from scratch is the amount of boilerplate code involved. The vanilla TodoMVC app is 900+ lines of JS, yet is missing essential parts to be true MVC. "The Sheep"'s answer explains why this is not necessarily a bad thing ;) – oligofren Feb 25 '14 at 14:33

2 Answers2

9

The first truth is that View and Controller are - in most cases - very close. Sometimes even the same. And that isn't neccessarily bad. If you have a table, select a row, then click on a button that will change the data in the selected row, the button will obviously part of the View (you see data) and the Controller (you change data). There are better examples for this, I'm sure...

The second truth is that you will find almost as many opinions on MVC as there are people ;)

But personally, I'd advise you not to follow some design pattern slavishly. MVC is good starting point to design your code, but in the end, your code needs to be fast, stable and maintainable. And, you (and your team) have to be comfortable with the code. If you end up with code that follows the MVC pattern, fine. If not, also fine. At least that's my view on that.

TheSHEEEP
  • 2,961
  • 2
  • 31
  • 57
7

Looking at code has always been the best way for me to learn so I figured I would share these.

TODO mvc comparing many different JS MV* Frameworks

The above link compares all the JS mv* frameworks. This demo should particularly interest you,

Vanilla JS Todo mv* implementation

source

From the sounds of it you understand what MVC is and are just confused as to how to implement it in JS, just look at the many different frameworks out there (ember.js, backbone.js, etc) and their source to get their take on it. The todo list is a great starting point.

Community
  • 1
  • 1
Loktar
  • 34,764
  • 7
  • 90
  • 104
  • 1
    The vanilla js implementation is not a MVC implementation. It is a Model-View-Whatever implementation - like most of the other implementations (MVB, MVP, MVVM, and the likes). More specifically, the vanilla js implementation is not MVC since it does not enforce the simple restrictions that MVC impose: The Control has a reference to the View and Model + the View has a reference to the Model and the Controller. It also does not have any Observer implementation in the Model, so that the View can update based on it. – oligofren Feb 25 '14 at 14:13
  • @oligofren thanks for the explanation of the down vote on a question 2 years old, alerted me to update the links. – Loktar Feb 25 '14 at 15:58
  • haha yeah, I understand, its good to update older answers from time to time. – Loktar Feb 25 '14 at 16:33