MVC pattern for widgets
Upcoming SlideShare
Loading in...5

MVC pattern for widgets



describes the MVC architechture used in widget development for PLE

describes the MVC architechture used in widget development for PLE



Total Views
Views on SlideShare
Embed Views



4 Embeds 73 44 19
http://localhost 7 3



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

MVC pattern for widgets MVC pattern for widgets Presentation Transcript

  • Building a good Application Maintainable Scalable Robust Extensible Responsive Performance Simple Elegant Backend Frontend
  • Building a good JavaScript Application (RIA) Maintainable Scalable Robust Extensible Responsive Performance Simple Elegant Backend Frontend Browser Compatibility
  • Module Architecture Modular programming is a software design technique that increases the extent to which software is composed from separate parts, called modules. Conceptually, modules represent a separation of concerns , and improve maintainability by enforcing logical boundaries between components. Source: Wikipedia
  • Module Architecture in RIA A part of web application Independent unit of functionality Modules know nothing about the others Lives on its own Sandbox , talks to other modules Loose coupling Refactoring one module does not affect the others
  • Loose vs. Strong coupling Strong coupling occurs when a dependent class contains a pointer directly to a concrete class which provides the required behavior. Loose coupling occurs when the dependent class contains a pointer only to an interface , which can then be implemented by one or many concrete classes. Loose coupling provides extensibility to designs. A new concrete class can easily be added later that implements that same interface without ever having to modify and recompile the dependent class. Strong coupling does not allow this. Source: Wikipedia Sandbox
  • Sandbox Includes Public Area (Interface) of the modules Interface depends on private members (non accessible area) Module Communication channel
  • MVC Pattern Based on Module Architecture
  • MVC Pattern Interface Interface Interface
  • MVC in JavaScript var ModelModule = (function () { var interFace = { setName: _setName, getName: _getName }, _name = '', _setName = function(name) { _name = name; }, _getName = function() { return _name; }; return interFace; }()); var ControllerModule = (function ( Model , View ) { var interFace = { retrieveName: _retrieveName, }, _retrieveName = function() { return Model .getName(); }, _init = function() { Model .setName('Herbert'); View .init(); }; _init(); return interFace; }(ModelModule, ViewModule)); var ViewModule = (function ( Controller , $ ) { var interFace = { init: _init, }, _init = function() { $ ("div#name").click( function() { var name = Controller .retrieveName(); $ ( this).html(name); }); }; return interFace; }(ControllerModule, jQuery)); Sandbox Private area
  • Notices Controller controls every thing, initializes other modules Controller has normally the largest sandbox Controller talks with Model and View View talks ONLY with Controller (event handling) Model talks with NO modules NEVER use global objects, put them in sandbox instead NEVER create global objects, Do not forget “var” Interactions with HTML is done ONLY in View Consider Coding standard
  • How to start? Start with the View! How should the widget look like? Draw it out using different mockup tools Create the Model, which objects are needed? Set the events. What should happen after event is fired? Do you need data to feed into the DOM? Set Controller interface Set Model interface, usually setters and getters Write CSS + HTML code in index.html to test out your View Populate the Model with fake data Set a View interface to test your View with fake data
  • Widget Design Source: Messages: Array of string Links: Array of string Files: Array of objects File.size … . Events: array of objects … SaveEvent() getEvent() setLinks() …… PostMassag() showMessages() showLinks() ……… . Event handling in View Model Controller View mockup (HTML + CSS + JS code) $(“#post”).click = function() { var m=$(“input”).value(); Conteroller.postMessage(m); } … .