Developing MVC based AJAX applications

1
Developing MVC based AJAX applications
A talk by
Kapil Mohan Rich Internet Application Developer,
Uzanto Consulting
2
The Model-View-Controller Architecture

• Model The data layer. Fetches/Saves data and
  keeps the updated data for consumption.
• View The presentation layer. Renders/Updates the
  UI with any changes to data model.
• Controller Captures and translates user inputs
  to requests on view or model.
• Multiple representations (views) of the same
  information (model).
• Scaleable. User interfaces (views) can be easily
  added, removed, or changed. Response to user
  input (controller) can be easily changed.
• Clear, maintainable code. Promotes reuse.
• Modular code. Multiple developers can
  simultaneously update the interface, logic, or
  input without affecting other source code.

Object references in MVC
The MVC communication cycle
3
AJAX

• AJAX is not DHTML.
• Asynchronous data retrieval using XMLHttpRequest.
• JS updates parts of user interface using DOM.
• Currently being mostly used as a quick hit, one
  time improvement to an existing web project.
• We are talking about making full fledged RIAs
  from scratch. AJAX as a complete RIA platform.
• Attempt Marry the proven MVC architecture with
  AJAX to build robust, scaleable, modular and
  maintainable RIAs.

4
The Shopping Cart Example
All -gt Electronics -gt Palmtops
- Electronics Palmtops Mobiles
Cars - Literature Novels
Your cart
Treo
Palm
Blackberry
EvilDead
Casio
AJAX tree component to show product categories
2 items Cost Rs. 5500
Palm
x
blah blah blah blah
Users cart status
Checkout
Add to cart
1
Save
O2
Expandable items list
Handspring
5
Chopping up the Code

• 3 folders 3 packages (model, view, controller).
• Separate package for any 3rd party JS. Keep it
  separate from your own code.
• JavaScript Classes.

• JavaScript Objects. JSON.

6
The Model

• Data Objects with properties and methods to
  manipulate data.
• APIs to access Data Objects.
• Data validation services.
• Server interaction code.
• Manage list of registered views. Update all
  registered views when state changes.
• Application specific utilities.

7
The View

• Creates the user interface.
• Listens to The Model for changes in state and
  updates itself.
• Might query The Model to get the changed state.
• Must forward all user input to The Controller,
  which decides what to do.

8
The Controller

• Initializes The Model and The View.
• Listens to The View for notifications about user
  input, and takes necessary action.
• Can call The View for purely cosmetic UI updates.

9
Key Takeaways

• Benefits of MVC.
• Near clear separation of design work and code
  work. So, designers and developers can work
  independently.
• Faster loading AJAX applications. Send HTML with
  initial interface baked-in first, JS can come as
  and when required or in background.
• On demand data.