Extjs 5 beta is coming up soon and with it the guys from Sencha are providing us with the MVVM architectural model. I am going to cover the basics behind MVVM, the difference between MVC and MVVM, and lastly when is MVVM advised for usage. Go to the Sencha website and read the blogs and the documentation. All information is there for devs to look at and provides valuable examples as well as definitions.
What is MVVM ?
MVVM stands for Model View ViewModel. The new part is the ViewModel and what this class does is serve as a mediator between the Data Model and the View. As we know in a perfect circumstance the Model and the View should be unaware of each other. In MVC the link between the Model and the View was the Controller. The controller relied on events to manage the data and provide it to the view, and also to manage the view. This would eventually leave a programmer (if not very careful) to huge controllers that manage large or complicated segments of an application. MVC logic is really good to organize your code and separate functionality, but it funnels us to introducing a method into the controller class for every event that we listen for – wether it’s data or view related.
view.getViewModel().setData({myData.label});How ViewModel helps
In MVVM the weight of constantly relying on the controllers for all View and Model management is alleviated by providing the ViewModel class to handle the data mapping and to basically create bindings. This way if the dev wants they can still use a controller to handle events from the view like user interaction etc, but they have also the help of the ViewModel to map their data to their view.
When to use it ?
The data binding is good for many situations where you have straightforward representations like for example a combo box with a drop down menu to select from. In large applications you should carefully judge where you want to introduce a ViewModel because even though it’s easy to dynamically update the ViewModel, as a whole in a large application there would eventually be cases where data manipulation needs to occur before rendering.
To Remember
In MVVM for every View there would be an instance of a ViewController and View Model. The MVC best practices are still relevant in Ext JS 5, but now devs have an extra helper class to handle the pesky data-binds without wasting resource by using events.
Have fun!
