MVC pattern for widgets

MVC pattern for widgets

• 2.
  Building a good Application  Maintainable  Extensible  Scalable  Backend  Simple  Responsive  Elegant  Frontend  Robust  Performance 
• 3.
  Building a good JavaScript  Application (RIA)  Maintainable  Extensible  Scalable  Backend  Simple  Responsive  Elegant  Frontend  Robust  Browser  Performance  Compatibility 
• 4.
  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 
• 5.
  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 
• 6.
  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.  Sandbox  Source: Wikipedia 
• 7.
  Sandbox  Includes Public Area (Interface) of the modules  Interface depends on private members (non accessible area)  Module Communication channel 
• 8.
  MVC Pattern  Based on Module Architecture  Controller  Model  View 
• 9.
  MVC Pattern  Controller  Interface  Interface  Interface  Model  View 
• 10.
  MVC in JavaScript  Private areas  Sandboxes  var ModelModule = (function () {  var ControllerModule = (function  var ViewModule = (function  (Model, View) {  (Controller, $) {      var interFace = {          setName: _setName,      var interFace = {      var interFace = {          getName: _getName          retrieveName: _retrieveName,          init: _init,      },      },      },      _name = '',      _retrieveName = function() {      _init = function() {      _setName = function(name) {          return Model.getName();          $         _name = name;      },  ("div#name").click(function() {      },      _init = function() {              var name =      _getName = function() {         Model.setName('Herbert');  Controller.retrieveName();          return _name;          View.init();              $(this).html(name);      };      };          });      };  _init();      return interFace;      return interFace;      return interFace;  }());  }(ModelModule, ViewModule));  }(ControllerModule, jQuery)); 
• 11.
  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 
• 12.
  How to start?  Start with the View!  How should the widget look like?  Draw it out using different mockup tools  Set the events. What should happen after event is fired?  Do you need data to feed into the DOM? Set Controller interface  Create the Model, which objects are needed?  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 
• 13.
  Widget Design  View mockup (HTML + CSS + JS code)  Model  Controller  Messages: Array of string  PostMassag()  Links: Array of string  showMessages()  Files: Array of objects  showLinks()    File.name  ……….    File.size    ….  Events: array of objects    Event.date    Event.place  Event handling in View    …  $(“#post”).click = function() {    var m=$(“input”).value();  SaveEvent()    Conteroller.postMessage(m);  getEvent()  }  setLinks()  ….  ……  Source: http://mockupstogo.net/rich‐internet‐application‐sample‐2