AngularJS the MVVM way better modular UI Development

AngularJS the MVVM way better modular UI Development

Lot of buzz about Plug and Play and design patterns in the UI development round the clock!
Plug and Play is possible with good architecture and adoption of good design pattern. Most popular are – MVC, MVP and MVVM. Most of us are familiar with MVC (Model-View-Controller), MVP (Model-View-Presentation) and the one picking up now is – MVVM.

MVVM (Model-View-ViewModel) is actually an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler. For those who want to understand more on – MVC, MVP, can refer to http://www.codeproject.com/Articles/288928/Differences-between-MVC-and-MVP-for-Beginners and also MVVM included here – http://www.codeproject.com/Articles/66585/Comparison-of-Architecture-presentation-patterns-M.

The above details are all specific to the design pattern. So let’s now understand how we can adopt to this (MVVM) good pattern in UI development, especially, the Hybrid App development projects.

MVVM components include:
1. Model
2. View
3. View Model
Here, the controller of MVC is replaced by a ViewModel and the View Model is a JavaScript function which acts as a model for the view and is responsible for maintaining relationship between view and the model. If we update anything in view, it gets updated in model, change anything in model, it reflects in the view, and it’s called 2-way data binding. MVVM separates business logic from UI using the ViewModel. AngularJs helps in achieving this using plain JavaScript objects. $scope is the important object in AJS (AngularJS), which allows defining both the data and methods that will be available for the view.
Let’s look into the details of MVVM AJS:
Model:
Holds application/domain specific data along with actual information what our app needs to deal with. Eg: user name, age, DOB etc. in a form.
Services or Factories can be used to handle Model in AJS.
Services are view- control logic handlers as well. We can call it as a View-Model interface (or a VM Interface), where all the common business logic reside. This helps in easy plug and play of two dependent modules.
View:
View handles the events, behaviour and actual UI representation.
Eg: A visual representation of a Submit button, button click behaviour etc. The behaviour is actually handled by ViewModel. Eg: On click of a submit button, AJAX Post may be performed and data is posted to server etc (handled by ViewModel); and a pop-up message for success or
failure should be shown up (View).
Angular templates (using directives) act as the Views in AJS Hybrid apps.

ViewModel:
Holds the presentation logic and interacts with Model on state changes. Example is discussed in the View details above.

AJS Controllers serve this purpose in Hybrid apps. An AJS controller (the ViewModel) should –

• Include the state of the presentation – like which item is selected using radio button, if a switch is turned on/off etc.
• Utilize and process data from Model/Server – fetch DB, make a post / get AJAX request and pre-process data if required, before presenting.
• Be able to communicate with other Controllers via methods/interfaces.

This is all about AJS MVVM insights. 🙂

Please find the detailed tutorials on AJS here for more information:
http://zaiste.net/2013/07/concisely_how_to_get_started_with_angularjs/
http://codechutney.in/blog/javascript/mvc-and-mvvm-with-angularjs/
https://www.safaribooksonline.com/library/view/angularjs-up-and/9781491901939/ch01.html
https://angularjs.org/ (Official AJS site).
Disclaimer:

• This article is intended to explain the idea of MVVM design pattern using AJS in Hybrid apps. This will not give any in-depth details of neither MVVM nor AJS.
• AJS can be done in MVC as well.
• MVC handled in a better way is also a good candidate that supports Modularity, and Plug and Play. MVVM enforces MVC in a better modular approach.

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.