Javascript MVC Appliacation - MVC in Javascript

http://maheshvnit.wordpress.com/


MVC in JavaScript

Model View Controller

Presented by: Mahesh Prasad


Content:

•Background –MVC
•Why –MVC ?
•What is MVC?
•How MVC works?
•MVC –Implementation
•Advantages of MVC
•References and Questions



MVC -Background

•The model-view controller (MVC) paradigm was 
developed at the Xerox Palo Alto Research Center(PARC). MVC was central to the architecture of 
the multi-windowed Smalltalkenvironment used 
to create the first graphical user interfaces (GUIs). 
In such an interface, input is primarily by the 
mouse and keyboard; output is a mix of graphics 
and textual components as appropriate. MVC is 
elegant and simple, but rather unlike the 
approach of traditional application programs.



Why MVC?

•From where the MVC comes:
–how can we make JavaScript code more reusable and 
easier to maintain?


•MVC is a familiar term to those in back-end application 
development—using—MVC’s origin in user interface 
development lends itself to structuring client-side 
applications.
•In complex application where JavaScript requires 
interactions across multiple parts, there separating 
JavaScript into Model, View, and Controller parts can 
produce more modular, reusable code.
•Howto break JavaScript code into its constituent parts.



Details of MVC Design Pattern

•Name(essence of the pattern)
–Model View Controller MVC




•Context (where does this problem occur)
–MVC is an design pattern that is used when developing interactive 
application such as a shopping cart on the Internet.




•Problem (definition of the reoccurring difficulty)
–User interfaces change often, especially on the internet where look-
and-feel is a competitive issue. Also, the same information is 
presented in different ways. The core business logic and data is 
stable.





MVC continued

•Solution(how do you solve the problem)
–Using the software engineering principle of “separation of concerns” to divide 
the application into three areas: 
–Model encapsulates the core data and 
functionality
–View encapsulates the presentation of 
the data there can be many views of the 
common data
–Controlleraccepts input from the user 
and makes request from the model for 
the data to produce a new view.





What is MVC?

•MVCstands for Model-View-Controller. It’s a 
design pattern that breaks an application into 
three parts: the data (Model), the 
presentation of that data to the user (View), 
and the actions taken on any user interaction 
(Controller).
•Data –Model –business logic
•Presentation –View 
•User Interaction –Controller 



MVC Architecture

•The Modelrepresents the structure of the data in the application, 
as well as application-specific operations on those data.
•A View (of which there may be many) presents data in some form 
to a user, in the context of some application function. 
•A Controllertranslates user actions (mouse motions, keystrokes, 
words spoken, etc.) and user input into application function calls 
on the model, and selects the appropriate View based on user 
preferences and Model state. 



Model

•The Model: the domain objectsor data structuresthat represent the application's state.
•The modelmanages the behaviour and data of 
the application domain, responds to requests for 
information about its state (usually from the 
view), and responds to instructions to change 
state (usually from the controller)
•The modelis all about data and the model is 
where the primary data in the system lives.



View

•In the MVCpattern, the Viewaccepts data 
and determines how to display it. The Viewmay use the existing HTML, it may request a 
new block of HTML from the server, or it may 
build new HTML using the DOM. It then 
combines the provided data with the View 
and displays it to the user. It’s important to 
note that the Viewdoesn’t care how to get 
the data or where the data comes from. It 
takes the data it gets.



Controller

•How do we get the data from the Modelto 
the View? That’s where the Controllercomes 
in.
•A Controlleractivates after an event occurs. 
That may be when the page loads or when a 
user initiates an action. An event handler is 
assigned to a controller method that will do 
the user’s bidding.
•The Controller, which translates user input 
into operations on the model.



How MVC works?

1.) In classic MVC Modelwas the main object to 
manage the system.

2.) In JS MVC Controlleris the main object to 
manage the system.


How JavaScript MVC architecture works?

•Model
–The modelis all about data and the model is where the primary 
data in the system lives.
–When the modelnotifies its observers, the model should tell the 
observers what happened to the model. A model may say “hey, I 
changed!” and the observers then decide what they do based on 
that information. The model should never tell the observers what 
they need to do. The model will never say “you need to redraw 
the time you are displaying” because the model has no idea if 
there is any view that is drawing time. The model is oblivious to 
what its observers might be doing.
–The modelcan notify different groups of observers. For example 
some observers may only be interested in withdrawals in the 
following account model.


•The modeldefinitelyshould know nothingabout the DOM. 
That would be a break down of all that is good.



•View
–The view is what you see and what you click.
–The view is the onlypart of the system that knows about 
the DOM. (Except perhaps some of the bootstrapping 
code.)
–When a user clicks on something in the view, the view is 
too stupid to know what to do. The view has to rely on 
its controller to make that decision. Since the view 
doesn’t know what should be done, it should be calling 
methods on the controller that explain what happened 
in the view.





•Controller
–The controller is a decision maker. When a user clicks in 
the view, the view forwards that event on to the 
controller so the controller can decide what needs 
doing.
–There is nothing particularly JavaScript-specific about 
controllers. They don’t know about host objects like 
those in the DOM or about XMLHttpRequest.
–Controllers mutate models and sometimes mutate 
views. Controllers mutating views is often not the right 
choice however.





MVC Schematic

1.) Data –Model –business logic

2.) Presentation –View 

3.) User Interaction –Controller 




MVC Illustration.

•There are four roles in this user interaction paradigm. 
The human Userhas a mental model of the 
information he is currently working with. The objectplaying the Modelrole is the computer's internal and 
invisible representation of this information. The 
computer presents different aspects of the information 
through objects playing the Viewrole, several Views of 
the same model objects can be visible on the computer 
screen simultaneously. Objects playing the Controllerrole translate User commands into suitable messages 
for the View or Model objects as needed.
•In other words, a user does something. That 
“something” is passed to a Controller that controls 
what should happen next. Often, the Controller 
requests data from the Model and then gives it to the 
View, which presents it to the user.



Example Control Flow in MVC

•User interacts with the VIEW UI
•CONTROLLERhandles the user input (often a 
callbackfunction attached to UIelements)
•CONTROLLERupdates the MODEL
•VIEWuses MODELto generate new UI
•UIwaits for user interaction



Controller tasks

•Receive user inputs from mouse and keyboard
•Map these into commands that are sent to the 
model and/or viewport to effect changes in 
the view



Model tasks

•Store and manage data elements, such as 
state information
•Respond to queries about its state
•Respond to instructions to change its state


View tasks

•Implements a visual display of the model




MVC –Implementation

CRUD Application

.Create, Read, Update and Delete
.Refer CRUD application source code





Advantages of MVC

Model View Controller


Advantages of MVC

•Separating Modelfrom View(that is, 
separating data representation from 
presentation)


-Easy to add multiple data presentations for the same data,

-Facilitates adding new types of data presentation as technology 
develops. 

-Model and View components can vary independently enhancing 
maintainability, extensibility, and testability. 


Advantages of MVC design Pattern

•Separating Controllerfrom View(application behavior from presentation) 


-permits run-time selection of appropriate Views based on workflow, user 
preferences, or Model state. 

•Separating Controllerfrom Model(application behavior from data 
representation) 


-Allows configurable mapping of user actions on the Controller to 
application functions on the Model. 


MVC supports Modular Design 

.Has set of modules, each tightly coupled internally, and loosely 
coupled between modules. 
.Each module has an interface that defines the module's functional 
requirements and provides a place where third-party products 
may be integrated. 
.The Modular design supports the design goal ofreusable 
software. 





Benefits of MVC Architecture

•Improved maintainability
–Due to modularity of software components


•Promotes code reuse
–Due to OO approach (e.g., subclassing, inheritance)


•Model independence
–Designers can enhance and/or optimize model 
without changing the view or controller


•Pluggable look and feel
–New Look & Feel without changing model
–Multiple views use the same data





Consequences or Benefits

•We leave the core code alone
•We can have multiple versions of the same 
data displayed-theme based system
•We have achieved “separation of concerns”



References

•Best reference: MVC in JS -Model View Controller
•http://michaux.ca/articles/mvc-architecture-for-javascript-applications
–Examples:
•MVC To-do Application
–http://michaux.ca/examples/to-do-application


•MVC Clock Application
–http://michaux.ca/examples/clocks/mvc-clock






•Further reading:
–http://en.wikipedia.org/wiki/Model–view–controller
–http://www.alistapart.com/articles/javascript-mvc/
–http://c2.com/cgi/wiki?ModelViewController
–http://www.codinghorror.com/blog/2008/05/understanding-model-view-
controller.html
–http://st-www.cs.illinois.edu/users/smarch/st-docs/mvc.html
–http://cristobal.baray.com/indiana/projects/mvc.html