describes the MVC architechture used in widget development for PLE

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