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...
Module Architecture Modular programming  is a software design technique that increases the extent to which software is com...
Module Architecture in RIA A part  of web application Independent  unit of functionality Modules know nothing about the ot...
Loose vs. Strong coupling Strong coupling  occurs when a dependent class contains a pointer directly to a concrete class w...
Sandbox Includes Public Area  (Interface) of the modules Interface depends on private members (non accessible area) Module...
MVC Pattern Based on Module Architecture
MVC Pattern Interface Interface Interface
MVC in JavaScript var ModelModule = (function () { var interFace = { setName: _setName, getName: _getName }, _name = '', _...
Notices Controller controls every thing, initializes other modules Controller has normally the largest sandbox Controller ...
How to start? Start with the View! How should the widget look like? Draw it out using different mockup tools Create the Mo...
Widget Design Source:  http://mockupstogo.net/rich-internet-application-sample-2 Messages: Array of string Links: Array of...
Upcoming SlideShare
Loading in …5
×

MVC pattern for widgets

6,549 views

Published on

describes the MVC architechture used in widget development for PLE

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,549
On SlideShare
0
From Embeds
0
Number of Embeds
75
Actions
Shares
0
Downloads
61
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

MVC pattern for widgets

  1. 2. Building a good Application Maintainable Scalable Robust Extensible Responsive Performance Simple Elegant Backend Frontend
  2. 3. Building a good JavaScript Application (RIA) Maintainable Scalable Robust Extensible Responsive Performance Simple Elegant Backend Frontend Browser Compatibility
  3. 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
  4. 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
  5. 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. Source: Wikipedia Sandbox
  6. 7. Sandbox Includes Public Area (Interface) of the modules Interface depends on private members (non accessible area) Module Communication channel
  7. 8. MVC Pattern Based on Module Architecture
  8. 9. MVC Pattern Interface Interface Interface
  9. 10. 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
  10. 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
  11. 12. 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
  12. 13. 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); } … .

×