MVVM and KnockOut-Way To Go


KEY NOTE : 

Hi Friends,
This is my first post on the blog and i would very much appreciate your feedback on this post and what additional topics you want me to cover.Your feedback is valuable in improving the content of this post. 

MVVM (Model-View-ViewModel)

Technology is evolving day by day and so is the way you interact with it.Lately companies are switching from WinForms to MVVM.Lets understand what you mean by MVVM

MVVM (Model-View-View Model) pattern separates code into 3 different layers: 
1) Model
2) View and
3) View Model

The concepts of Model and View are same as those described in Model-View-Controller pattern
View Model is the latest of the 3 and has promised a great deal in future web world

 
 
 

 

MVVM Pattern Relation

Model :  includes set of classes that represents data from the database
View : represents the data that is visible to the user
View-Model : it serves as the intermediate layer between the view and the view model.Data from the Model is converted into the format that the view understands…
It also handles communication between views…..

MVVM enables a great developer-designer workflow, providing these benefits:
  • During the development process, developers and designers can work more independently and concurrently on their components. The designers can concentrate on the view, and if they are using Expression Blend, they can easily generate sample data to work with, while the developers can work on the view model and model components.
  • The developers can create unit tests for the view model and the model without using the view. The unit tests for the view model can exercise exactly the same functionality as used by the view.
  • It is easy to redesign the UI of the application without touching the code because the view is implemented entirely in XAML. A new version of the view should work with the existing view model.
  • If there is an existing implementation of the model that encapsulates existing business logic, it may be difficult or risky to change. In this scenario, the view model acts as an adapter for the model classes and enables you to avoid making any major changes to the model code.

Conclusion

In my next post i will teach you what exactly knockout is and how you can use knockout for implementing MVVM pattern and leveraging several benefits of MVVM and Knockout

Advertisements
Leave a comment

10 Comments

  1. amit

     /  April 11, 2013

    gr8 stuff…:-) nicely explained…keep up the good work

    Reply
  2. Vaibhav Diwate

     /  April 12, 2013

    Hi Sushant,
    Congo for your first post, i must say it was nicely written.

    I am using a ExtJS4 MVC framework. Where Controllers are used for performing following general tasks.. (for ex)
    1) All the events associated with the components has to be written in the controller.
    2) Configure Model and View associated with the module.
    3) Get the form data ,bind it to model and Save.(here it can be any component, i just mentioned form….)

    Now my main concern is
    1) With MVVM approch, where to put/accommodate above tasks mentioned for (MVC)controllers ?
    2) If you have any idea then can you please elaborate difference between (MVC)Controller and (MVVM) View-Model ??

    Reply
    • HI Vaibhav,
      Thanx for your comment…
      Sorry for the late reply…
      Answer 1 : All the events associated with the controller can be shifted to view model
      View Model is basically a class file like controllers(can be a java script file in case of knockoutjs)
      Answer 2 : I was going to post knockoutjs in my second post but i have seen people quite confused on MVVM,MVC and MVP….So i will write about them in detail in my next post.

      Reply
      • Vaibhav Diwate

         /  April 21, 2013

        thanx sushpapa for your answer, waiting for your examples……..

  3. Selvin

     /  April 12, 2013

    double like….keep posting stuffs…

    Reply
  4. durgesh

     /  April 13, 2013

    nice job buddy..just explain it with examples..

    Reply
  5. Rino

     /  April 27, 2013

    Gud1 …nicely xplained:-)

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: