Developing MVC based AJAX applications Kapil Mohan Rich Internet Application Developer, Uzanto Consulting A talk by

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

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.

The Shopping Cart Example All -> Electronics -> Palmtops - Electronics + Palmtops + Mobiles + + Cars - Literature + Novels + Treo Blackberry Casio Palm O2 Handspring x blah Add to cart1 Your cart Palm EvilDead 2 items Cost: Rs Checkout Save AJAX tree component to show product categories Expandable item’s list User’s cart status

Chopping up the Code 3 folders = 3 packages (model, view, controller). Separate package for any 3 rd party JS. Keep it separate from your own code. JavaScript Classes. JavaScript Objects. JSON.

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.

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.

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.

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.