mvc pattern for widgets
TRANSCRIPT
![Page 1: MVC pattern for widgets](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/1.jpg)
![Page 2: MVC pattern for widgets](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/2.jpg)
Building a good Application
Maintainable
Scalable
Robust
Extensible
Responsive
Performance
Simple Elegant
Backend
Frontend
![Page 3: MVC pattern for widgets](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/3.jpg)
Building a good JavaScript Application (RIA)
Maintainable
Scalable
Robust
Extensible
Responsive
Performance
Simple Elegant
Backend
Frontend
Browser Compatibility
![Page 4: MVC pattern for widgets](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/4.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/5.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/6.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/7.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/8.jpg)
MVC Pattern Based on Module Architecture
Controller
View Model
![Page 9: MVC pattern for widgets](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/9.jpg)
MVC Pattern
Controller
View Model
Interface Interface
Interface
![Page 10: MVC pattern for widgets](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/10.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/11.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/12.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022052912/55a0dbf91a28ab1e5a8b46c9/html5/thumbnails/13.jpg)
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); } ….