13

MVC pattern for widgets

Embed Size (px)

Citation preview

Page 1: MVC pattern for widgets
Page 2: MVC pattern for widgets

Building a good Application 

Maintainable 

Scalable 

Robust 

Extensible 

Responsive 

Performance 

Simple Elegant 

Backend 

Frontend 

Page 3: MVC pattern for widgets

Building a good JavaScript Application (RIA) 

Maintainable 

Scalable 

Robust 

Extensible 

Responsive 

Performance 

Simple Elegant 

Backend 

Frontend 

Browser Compatibility 

Page 4: MVC pattern for widgets

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 

Page 5: MVC pattern for widgets

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 

Page 6: MVC pattern for widgets

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 

Page 7: MVC pattern for widgets

Sandbox 

Includes Public Area (Interface) of the modules 

Interface depends on private members (non accessible area) 

Module Communication channel 

Page 8: MVC pattern for widgets

MVC Pattern Based on Module Architecture 

Controller 

View Model 

Page 9: MVC pattern for widgets

MVC Pattern 

Controller 

View Model 

Interface Interface 

Interface 

Page 10: MVC pattern for widgets

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)); 

Sandboxes Private areas 

Page 11: MVC pattern for widgets

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 

Page 12: MVC pattern for widgets

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 

Page 13: MVC pattern for widgets

Widget Design 

Source: http://mockupstogo.net/rich‐internet‐application‐sample‐2 

Messages: Array of string Links: Array of string Files: Array of objects   File.name   File.size   …. Events: array of objects   Event.date   Event.place   … 

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); } ….