MVVM JavaScript frameworks and how they have changed Web application development

In the beginning, JavaScript was mainly used to validate user input without doing a round trip to the server.  As web browsers matured, so did JavaScript.

The first major evolution for JavaScript were libraries like jQuery, Dojo, MooTools and Prototype.  These libraries allowed frontend developers to manipulate the HTML document library easily without worrying about different browser implementations of JavaScript.

With that being said, MVVM can be considered asthe second major evolution for JavaScript.

What is MVVM?  MVVM stands for Model View View Model and allows developers to create model(s) of the data to be displayed and the view(s) to display them.
MVVM was originally defined by Microsoft for use with Windows Presentation Foundation and Silverlight, since its launch in 2005.

The model holds the data and the view automatically displays whatever is in the model, and vice versa.

Let’s say that you are selling products and want to present the user with a list of products that they can search, filter, etc.  Clicking on a product will display the details and hopefully lead to a sale!

With a traditional approach you would need to:
1. Create a page to show all of your categories
2. Create a page to display a list of products per category
3. Create a page to display the details of the product

With the MVVM approach, you can do all of this with in one page:
1. Create a model that will hold your categories
2. Create a model that will hold your products
3. Create a model that will hold your product details

Initially no products will exist in your products model, so nothing will display.  Clicking on a category will fetch all of the products from the backend which will cause the products to display.  Clicking on a product will clear the categories and product list and fetch the product details from the backend, thus automatically displaying the product details.  When the user modifies the quantity input field, the model also updates automatically.  When the user clicks on ‘Add to Cart’, it would then pass the model to the backend.

Though you can do this without MVVM, the automatic binding between the models and the UI is what makes this simple and valuable.

Some of the more popular MVVM libraries are Angular, Knockout, and Ember.  Because these libraries reside in the browser you can use any modern web stack to drive them, like ASP.NET, ASP MVC, PHP, Java, etc...

Technology is changing constantly, and it seems like there are new ways of doing things every day.  Some of them stick around and some don’t make it.  It looks like MVVM is here to stay as it effectively simplifies web application development and it just simply works!

We hope you have found this week’s edition of “To The Point” by Fetbi Irsat to be helpful and informative. Look out for our next week instalment as we continue to explore unique topics from business to the latest technology.

We want to hear your point! If you have any ideas, suggestions or any questions about our weekly blog, please contact us at: info@pointalliance.com.

Warm regards,
Point Alliance Team