Page 1 of 2
MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 11:39 am
by VladSun
I've found a pretty good artcile on implementing MVC in JS, using the ExtJS framework:
http://savvyduck.blogspot.com/2008/01/j ... s-mvc.html
While it seems good enough, I've noticed some issues (considering the MVC approach):
1) (the most important) - the View class changes the Model state by calling the
documentModel.setTemp( this.documentItemName, value, true);. I think that the View should just fire an event captured by the Controller, which in turn should change the Model state.
2) The Model instance is globally defined (easy to fix), should be created in the Controller and injected into the View.
Except these things, what's your opinion about this code?
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 1:41 pm
by Weirdan
VladSun wrote:
1) (the most important) - the View class changes the Model state by calling the documentModel.setTemp( this.documentItemName, value, true);. I think that the View should just fire an event captured by the Controller, which in turn should change the Model state.
This could be intentional. There are MVC flavours that promote direct view <-> model interaction (they are better suited to desktop applications, but I'd argue that js mvc
is pretty much like desktop application).
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 2:02 pm
by josh
I would disagree with the term "MVC flavor" to describe that, more like "sort of like MVC".
Even the article explains it that way, with a diagram showing the view should not change the model!I would say thats one of the most important parts of being MVC.
Interesting link. I had heard about javascript MVC but I traditionally view it as part of the presentation, that opens up interesting questions as to whether you can have "MVC" within your view within any language? Like an MVC application, but you use components in the view that themselves are mini-MVC applications. (or since it runs on the client VS the server you could look at it like a duplicate application, which makes me think about code generation).
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 2:30 pm
by superdezign
Well, HTTP request-response has an MVC structure, with your MVC application playing the model and performing the business logic. Database communication has an MVC structure with the query as the controller, the database handling the business logic, and your records as the view. I'm sure we could break down other elements into MVC structures. It's existed since before it existed. lol
The issue comes in where you differentiate input => logic => output structure from pure MVC, as we see it. If you break it down to input-logic-output, then the model, view, and controller are all MVC structures. The controller gets a request, gets it's response from the model and view, and returns output. The model gets a request from the controller, gets and format data, and outputs it to the controller. View takes data as input, formats and processes it, and outputs it to the controller.
Eh. My head hurts now.
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 3:25 pm
by VladSun
josh wrote:I had heard about javascript MVC but I traditionally view it as part of the presentation, that opens up interesting questions as to whether you can have "MVC" within your view within any language? Like an MVC application, but you use components in the view that themselves are mini-MVC applications. (or since it runs on the client VS the server you could look at it like a duplicate application, which makes me think about code generation).
If you take a look at the Ext.grid.GridPanel you'll see a micro-MVC environment

And a GridPanel is just a component of your MVC application. The GridPanel has a Store (i.e. the Model), gridView (i.e. the View) and it itself is a Controller.
I had to say that the HTTP (i.e. stateless) MVC model is very (just enough) different from the "desktop" MVC model.
My ExtJs applications use PHP server side only for performing validation and persistence of objects. Almost nothing else! I.e. generally PHP is just an DB wrapper. Indeed, there are some features that can not be implemented client side, but my PHP MVC Views are just ordinary JSON encoders.
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 3:32 pm
by VladSun
josh wrote:... since it runs on the client VS the server you could look at it like a duplicate application, which makes me think about code generation).
In fact, at this very moment I'm writing a code generator engine for server/client side software

Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 4:50 pm
by Christopher
That is one of many MVC diagrams. I don't think it is that the View or Controller should not change the Model state. The goal is that the Model does not have any dependencies back to the View, meaning that the Model code needs the View or Controller code to operate. As I recall there are some exceptions to even this rule that I read from Beck or Fowler somewhere.
josh wrote:Interesting link. I had heard about javascript MVC but I traditionally view it as part of the presentation, that opens up interesting questions as to whether you can have "MVC" within your view within any language? Like an MVC application, but you use components in the view that themselves are mini-MVC applications. (or since it runs on the client VS the server you could look at it like a duplicate application, which makes me think about code generation).
That depends on how you think about it. If you consider the Javascript to be the "application" and PHP to be the "server" then PHP would launch the Javascript MVC application and then the Javascript Model would make requests back to the PHP server for data. The PHP server would also implement MVC (which could be true for any server).
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 4:53 pm
by VladSun
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 4:54 pm
by VladSun
Christopher wrote:That is one of many MVC diagrams. I don't think it is that the View or Controller should not change the Model state.
I haven't seen a diagram showing a View changing the Model. Could you post some links, please?
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 5:30 pm
by josh
superdezign wrote:Well, HTTP request-response has an MVC structure, with your MVC application playing the model and performing the business logic.
Following that logic its ok to have your models output HTML. Really a loose definition of MVC I think.
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 7:10 pm
by Christopher
VladSun wrote:I haven't seen a diagram showing a View changing the Model. Could you post some links, please?
There are certainly MVC diagrams that have double-ended or two arrows between Model and View. Otheres provide an "association" or allow events or signalling. But you also find many that have no arrows between Model and View. They do not allow the View to talk to the Model at all and all data comes through the Controller. Which one is correct?
http://osteele.com/images/mvc/mvc-sampler.png
Take a look at the MVC diagram on Trygve Reenskaug's site. Do the Controller and View have different relationships to the Model there?
http://heim.ifi.uio.no/~trygver/themes/ ... index.html.
Here is Trygve Reenskaug's original description if the View:
VIEWS
A view is a (visual) representation of its model. It would ordinarily highlight certain attributes
of the model and suppress others. It is thus acting as a presentation filter.
A view is attached to its model (or model part) and gets the data necessary for the presentation
from the model by asking questions. It may also update the model by sending appropriate
messages. All these questions and messages have to be in the terminology of the model, the
view will therefore have to know the semantics of the attributes of the model it represents. (It
may, for example, ask for the model's identifier and expect an instance of Text, it may not
assume that the model is of class Text.)
Obviously a lot of current thinking, rightly or wrongly, is based on the Java concept of MVC -- sometimes called Model 2. There are some good things about this development, however the problem is that in Java there was a restriction that the Model was an Entity Bean and the View was a JSP. Those are architectural contraints that still are with us today, but are totally unrelated to developing MVC in PHP or Javascript.
The original MVC concept is that the Controller is responsible for input processing and the View is responsible for output processing. The Model is in a layer below both of them. There are not additional constraints that get put in modern diagrams. And guys like Fowler really minimize the importance of Controller/View separation in general.
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 8:14 pm
by josh
Just a couple quotes from Fowler on MVC (from patterns of enterprise application architecture). The page you link may be the "original" mvc but it also quotes an earlier source calling it "thing model view".
Anyways heres what Fowler says:
The controller takes the user input, manipulates the model, and causes the view to update appropriately
He also writes
The common idea is that the controller sits between the model and the view
Which would imply:
Model <- Controller <-> View
As opposed to:
Controller --> Model
Controller <--> View
Just my interpretation. Also the term "view" implies read-only to me. I also think most MVC frameworks are intended for the view to be read-only, take this snippet from the Zend Framework documentation for example:
Essentially, using Zend_View happens in two major steps: 1. Your controller script creates an instance of Zend_View and assigns variables to that instance. 2. The controller tells the Zend_View to render a particular view, thereby handing control over the view script, which generates the view output.
It just implies that it should be reading data and generating output, not running commands - thats just what it implies to me. Not trying to imply one of us is right and one of us is wrong, just saying how I choose to interpret it.
If the view updates the model, the controller just seems like it has no more purpose to me. To me the controller's whole purpose is to "listen" to state changes, decide how to respond, and update the model and update the view. If the view is updating the model directly what more is the controller other than extra boiler plate code?
An analogy of how I'm thinking is... It would be like calling "mixed" PHP+Html 2-tier, just because there are some areas of the code that weren't mixed. In reality though its still mixed and not 2-tier. Another example would be developers who have setup controllers, models, & views, and 99% of the code is in the controller, and is mixed HTML & business logic. Can you have HTML in a controller & be MVC? technically yea I guess, but for the most part its not proper MVC.
Re: MVC in JS (ExtJS)
Posted: Thu Jan 13, 2011 9:35 pm
by Christopher
josh wrote:Just a couple quotes from Fowler on MVC (from patterns of enterprise application architecture). The page you link may be the "original" mvc but it also quotes an earlier source calling it "thing model view".
Anyways heres what Fowler says:
The controller takes the user input, manipulates the model, and causes the view to update appropriately
He also writes
The common idea is that the controller sits between the model and the view
Well ... you cherry pick the two quotes to vaguely support you position. I don't think "causes to update" or "sits between" mean technically. And the second quote is in a paragraph where he is talking about things he does not exactly agree with.
josh wrote:Which would imply:
Model <- Controller <-> View
As opposed to:
Controller --> Model
Controller <--> View
All fine, but the diagram he provides is about dependencies and not about who can change the state of whom:
Controller <-> View
Model <- Controller
Model <- View
josh wrote:I also think most MVC frameworks are intended for the view to be read-only, take this snippet from the Zend Framework documentation for example:
Certainly you don't mean that. I think you mean that the View should treat the Model as read-only.
josh wrote:Just my interpretation. Also the term "view" implies read-only to me.
Yes, but it really leads me to the question: Why?
Re: MVC in JS (ExtJS)
Posted: Fri Jan 14, 2011 8:18 pm
by josh
Right I meant the view should be read only in regards to reading not writing to the model. Well in fact I meant the view should not be writing to anything but the response object.
Just to be clear I didn't cherry pick those to support my belief anymore than you cherry picked your link to support yours. In fact I'd disagree its cherry picking. Flip to MVC and read the first paragraph. "MVC considers 3 roles". "the model is ___", paragraph 2 = "the view represents the display of the model in the UI", paragraph 3 = "the controller takes user input, manipulates the model, and causes the view to update".
Its his opening paragraph(s), its the only time he enumerates the responsibilities of each component, and he put "manipulating the model" under controller, not under "sometimes controller". (we could email him and ask him if he meant that to imply that only the controller should have that role?)
Let's just humor my question? Let's say you write to your models in the view. What is the purpose of a controller anymore? How do you define what goes in a controller vs what does not anymore? I don't think MVC can be defined by a dependency diagram, like I said I could put my business logic in all 3 layers to intentionally make bad code, but if my dependencies are like that diagram it doesn't make it MVC, in my opinion. If I put all my view code in the controller, all my business logic in the view, and all my presentation logic in the "model" layer.... at some point you're going to call that "not MVC", lol. The question is how much code until it becomes not MVC? 1 line in the wrong place? 100 lines?
Re: MVC in JS (ExtJS)
Posted: Sat Jan 15, 2011 11:23 am
by VladSun
Great topic, but ...
VladSun wrote:Except these things, what's your opinion about this code?
