Upload
behnam-taraghi
View
5.594
Download
1
Embed Size (px)
Citation preview
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
Backend
Frontend
Browser Compatibility
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
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
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
Sandbox
Includes Public Area (Interface) of the modules
Interface depends on private members (non accessible area)
Module Communication channel
MVC Pattern Based on Module Architecture
Controller
View Model
MVC Pattern
Controller
View Model
Interface Interface
Interface
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
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
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
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); } ….