1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    525
    Answers
    8
    Vote Rating
    36
    blomasky has a spectacular aura about blomasky has a spectacular aura about

      3  

    Default Answered: MVVM vs. MVC

    Answered: MVVM vs. MVC


    What does MVVM give me that MVC does not?

    Simple question, but lets make it a tad more focused. Focused on what I am currently building and the way I am using Version 4. Let me briefly (sort of) describe my development environment and methodology.

    1) I am ONLY building high performance desktop applications. I have no requirements for moble (touch, tablets) development. I am replacing legacy client server applications (built in Flex / Delphi / Magic PC, etc.)

    2) My technology stack is Sencha / Coldfusion 9 / MS SQL 2008

    3) All I am building are a zillion (more or less) CRUD screens. Some are very simple (all of the work can be done in a grid, i.e. a “freight/state” table that has 2 columns) and some are very complex with a form used for adding / editing records

    4) I use one controller per view (ok, if there is a grid and a form, then they are both controlled by one controller.) Let me expand on this, because I know this is not the norm.

    Every Grid has some (or all) of the following events that I have to listen to and handle:
    · Add a Record (click)
    · Delete a Record (click)
    · Search (Read) the Table (click)
    · Handle Editing (edit)
    · Handle Row Selected (select)
    · Handle Checkbox or Combo Box Change (checkchange or change)
    · Protect fields (beforeedit)

    Using Controller references, after I copy a controller, it takes no more than 5-10 minutes to change the new controller to point to the correct tables / stores, etc. (matter of fact, while the naming is not as descriptive, I have a reference called “myGrid” that points to the current grid, so that I have to change even less. When I need the store its just: this.GetMyGrid().getStore().)

    Logic for calculated fields:
    I put that logic either in the model or on the grid rendered. For calculated fields that might be used in more than one place (i.e. first name and last name persistant fields, but want to display the full name in multiple places) I create a non-persistent field in the model called fullName and using the convert event, have it format the 2 fields. If, on a grid, I want to color the customer Red, Yellow or Green depending on how old their invoices are, I will use a renderer and enter the code there (if agingDate > 60, return “<span style color=red…….

    The only time it takes a little longer, is when I am displaying a form for adding / editing. Now I have a few fields that have to be formatted, displayed, validated.


    So, back to my original question. What does MVVM add that MVC does not offer?

    Thanks

    Bruce

  2. So the binding has obvious benefits in reducing code.

    In my apps I've embraced ViewControllers and I like that I get to work "locally" meaning the ViewController is bound to that view. I don't have to worry about my ComponentQuery selectors being right, I get to do a this.getView() in the ViewController and it gives me the view it's bound to. If there is a child view (like a button in a grid) that I know I'm gonna need to use, I set the reference config and now I can use this.getReference('someName') and now I have a reference to that button. The reference config works like the ref in a global controller only for a couple differences:

    1. You set the reference config on the component you want that reference to refer to. The ref in a global controller does the opposite, it tries to find the component based on the selector you provided. This means less breakage as you refactor and less can go wrong.

    2. The ref in a global controller cached instances in a global controller, using reference in a ViewController is scoped to that ViewController so there is less chances of conflicts.

    A ViewController also doesn't have to be added to Ext.application like a global controller so for those of us that share code the view instantiates the ViewController meaning the code is plug-and-play. The user requires the view, instantiates it and the framework automatically instantiates the ViewController.

    If you want to share logic in a ViewController you can always create an abstract ViewController and subclass it.

    I was very comfortable with the MVC from Ext JS 4 (and Sencha Touch 2) so I was a bit hesitant on why we need it but my development in the past couple months has been a little easier. My controllers are smaller now, the framework does most of the piping for me. I set a listener on the view and it can get executed on the ViewController, it seriously made the event listening in a ViewController dead simple:

    Code:
    Ext.define('MyApp.view.FooController', {
        extend : 'Ext.app.ViewController',
        alias  : 'controller.myapp-foo',
    
        doSomething : function(button) {
            var toolbar = this.getReference('topToolbar'); //instead of button.up('toolbar')
    
            toolbar.add({
                text    : 'Do Something Else',
                handler : 'doSomethingElse'
            });
        },
    
        doSomethingElse : function(button) {
            var toolbar = this.getReference('topToolbar');
    
            toolbar.remove(button);
        }
    });
    
    Ext.define('MyApp.view.Foo', {
        extend : 'Ext.panel.Panel',
        xtype  : 'myapp-foo',
    
        controller : 'myapp-foo',
    
        title : 'My Foo',
    
        dockedItems : [
            {
                xtype : 'toolbar',
                dock  : 'top',
                reference : 'topToolbar',
                items : [
                    {
                        text    : 'Do Something',
                        handler : 'doSomething'
                    }
                ]
            }
        ]
    });
    Look at the handler configs on the buttons, automatically mapped to the ViewController. The listeners config works the same way. Hopefully people (especially new people) can take to this much easier than with the old MVC.

    Of course, the old MVC will still work in the same way as it has.

  3. #2
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,308
    Answers
    13
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      1  

    Default


    The key advantage of MVVM is that you will need to write less custom code (because of the bindings) and your code will be higher quality (less prone to memory leaks).

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    525
    Answers
    8
    Vote Rating
    36
    blomasky has a spectacular aura about blomasky has a spectacular aura about

      0  

    Default


    I am confused with the comment about less custom code, perhaps you can elaborate. The grids get loaded when I run the .load() function on the store. When I need to get the data from the grid into my function, I type one line; var foo = Ext.ComponentQuery.query(queryString)[0].getSelectionModel().getSelection()[0]; How are binding reducing the amount of code. (I do not know how a MVVM makes code "higher quality" than a MVC. I am not trying to argue, but can you please document or explain your comments. Thank you

  5. #4
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,308
    Answers
    13
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      1  

    Default


    Did you see this doc?

    Basically, you don't need to set up many event handlers and ensure that listeners are disconnected.

  6. #5
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,264
    Answers
    8
    Vote Rating
    80
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    Quote Originally Posted by blomasky View Post
    var foo = Ext.ComponentQuery.query(queryString)[0].getSelectionModel().getSelection()[0];
    Horrible way of doing things!

    That's no MVC way!

    MVC way would be:
    1. Define a ref in the controller.
    2. Get the selection through that ref.
    3. Check that the selection is not empty.
    If I need to get the selected row I always have a method in the controller which returns it, like:

    Code:
    getMainSel: function() {
    	var me = this,
    		grid = me.getMainGrid();
    	return grid.getSelectionModel().getSelection();
    }
    
    
    getMainFirstSel: function() {
    	var me = this, sel = me.getMainSel()
    	if (sel.lenght) {
    		return sel[0];
    	}
    	return null;
    }
    I normally put this code on controller's parent class of other controllers, at each subclass the ref section is redefined to point to correct view's components. Of course you must wire events to view's components also.

    But the problem with MVC is that the artifacts (controllers, views and stores) are, after all, practically singletons: You can't have more than one instance at a time of any artifact. If you need more than one instance you must throw away MVC and write events in the view itself. With MVVM you can have more than one instance of the same artifact because each view owns its controller and its data.

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  7. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,797
    Answers
    452
    Vote Rating
    602
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      3  

    Default


    Better yet, let's say you're binding the selected record name to the title of some panel...

    Code:
    // Assumes we have the appropriate viewmodel stuff setup
    {
        xtype: 'grid',
        reference: 'users'
    }, {
        xtype: 'panel',
        bind: '{users.selection.name}'
    }
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    525
    Answers
    8
    Vote Rating
    36
    blomasky has a spectacular aura about blomasky has a spectacular aura about

      0  

    Default I was responding to the comment re: less code

    I was responding to the comment re: less code


    You are right, I do use a reference, but was responding to Les's statement that a lot less code is required. Was stating that with one line of code, I have full access to all of the columns in a selected row. Your comment re: multiple instances of a view, I have not had that be a requirement. If I have a customer grid up, I only have one copy of it, therefore, one controller.

    Can you explain about less event handlers? I assume I still need one for the add / delete buttons. As far as the others
    * On Selecting a row (select) I will enable delete buttons and possibly read child records (Yes, I have heard that associations are working better now, and will possibly test that), but I do need an event for this, yes?
    * On editing (when the user tabs out of a field), I will possibly do some calculations, update the store, sync the store), I assume I still need the edit handler.
    * Ditto for before edit to conditionally protect some fields (some are allowed to be entered when inserting records, but not changed on edit, etc.) Still need an event for this, right?

    Bruce

  9. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    525
    Answers
    8
    Vote Rating
    36
    blomasky has a spectacular aura about blomasky has a spectacular aura about

      0  

    Default


    Evant, and others, I do see a lot of benefits using the bind, esp. for things like titles, enabling buttons, etc. This will def. save a lot of coding esp. if writing something from scratch. However, since, after I design a new grid panel, I copy my "boilerplate" controller and change the references to point to this new grid, I already have the code for a Lot of that.. (protecting fields until row selected, etc.) in the controller. I am certainly looking forward to trying the new, and improved, version and am sure I will find a lot of time saving.. but right now my approach is pretty RAD (Rapid Application Development) for me.

  10. #9
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,264
    Answers
    8
    Vote Rating
    80
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    Quote Originally Posted by blomasky View Post
    ...I copy my "boilerplate" controller and change the references...
    That's what you shouldn't do in OOP but in SA there is no option because doesn't supports inheritance.

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  11. #10
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Connecticut
    Posts
    525
    Answers
    8
    Vote Rating
    36
    blomasky has a spectacular aura about blomasky has a spectacular aura about

      0  

    Default


    There certainly are limits to how you code if you embrace the SA editor vs. a traditional editor. I think the productivity benefits are enough to put up with the less "pure" OOP

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi