MVC in JS (ExtJS)
Moderator: General Moderators
MVC in JS (ExtJS)
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?
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?
There are 10 types of people in this world, those who understand binary and those who don't
Re: MVC in JS (ExtJS)
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).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.
Re: MVC in JS (ExtJS)
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).
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).
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Re: MVC in JS (ExtJS)
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.
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)
If you take a look at the Ext.grid.GridPanel you'll see a micro-MVC environmentjosh 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).
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.
Last edited by VladSun on Thu Jan 13, 2011 5:09 pm, edited 3 times in total.
There are 10 types of people in this world, those who understand binary and those who don't
Re: MVC in JS (ExtJS)
In fact, at this very moment I'm writing a code generator engine for server/client side softwarejosh 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).
There are 10 types of people in this world, those who understand binary and those who don't
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: MVC in JS (ExtJS)
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: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.
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).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).
(#10850)
Re: MVC in JS (ExtJS)
Another intersting article to read http://osteele.com/archives/2004/08/web-mvc
There are 10 types of people in this world, those who understand binary and those who don't
Re: MVC in JS (ExtJS)
I haven't seen a diagram showing a View changing the Model. Could you post some links, please?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.
There are 10 types of people in this world, those who understand binary and those who don't
Re: MVC in JS (ExtJS)
Following that logic its ok to have your models output HTML. Really a loose definition of MVC I think.superdezign wrote:Well, HTTP request-response has an MVC structure, with your MVC application playing the model and performing the business logic.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: MVC in JS (ExtJS)
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.pngVladSun wrote:I haven't seen a diagram showing a View changing the Model. Could you post some links, please?
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:
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.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.)
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.
(#10850)
Re: MVC in JS (ExtJS)
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:
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:
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.
Anyways heres what Fowler says:
He also writesThe controller takes the user input, manipulates the model, and causes the view to update appropriately
Which would imply:The common idea is that the controller sits between the model and the view
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:
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.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.
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.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: MVC in JS (ExtJS)
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: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:
He also writesThe controller takes the user input, manipulates the model, and causes the view to update appropriatelyThe common idea is that the controller sits between the model and the view
All fine, but the diagram he provides is about dependencies and not about who can change the state of whom:josh wrote:Which would imply:
Model <- Controller <-> View
As opposed to:
Controller --> Model
Controller <--> View
Controller <-> View
Model <- Controller
Model <- View
Certainly you don't mean that. I think you mean that the View should treat the Model as read-only.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:
Yes, but it really leads me to the question: Why?josh wrote:Just my interpretation. Also the term "view" implies read-only to me.
(#10850)
Re: MVC in JS (ExtJS)
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?
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)
Great topic, but ...

VladSun wrote:Except these things, what's your opinion about this code?
There are 10 types of people in this world, those who understand binary and those who don't