JavaScript and UI Architecture
Best Practices
Siarhei Barysiuk
s.barysiuk@sam-solutions.net

Our roadmap

Introduction: What will we cover today?
• Coding patterns
JavaScript-specific best practices
• Design patterns
Language independent patterns, UI architecture

Coding patterns

Namespaces

Tip of the day
“Global variables should be avoided in order to
lower the possibility of variable naming
collisions. “

Namespaces: Defining namespace
//defining top-level package
var MyApp = MyApp || {};
//defining package
//defining package
MyApp.dom = {
MyApp.string = MyApp.string || {};
addEventListener: function(element,
//defining package
callback) {
MyApp.string.utils = {
//code goes here
trim: function(str) {
},
//code goes here
removeEventListener: function(element,
},
callback) {
reverse: function(str) {
//code goes here
//code goes here
}
}
};
};

Namespaces: Usage in code
MyApp.string.utils.reverse(...);
MyApp.string.utils.trim(...);
MyApp.dom.addEventListener(...);
MyApp.dom.removeEventListener(...);

Namespaces: namespace() function
//defining top-level package
var MyApp = MyApp || {};
//defines package structure
MyApp.namespace = function(name) {
if(name) {
//some checks if name is valid
var names = name.split(\".\");
var current = MyApp;
for(var i in names) {
if(!current[names[i]]) {
current[names[i]] = {};
}
current = current[names[i]];
}
return true;
}
return false;
};

Namespaces: Defining namespace
//defining top-level package
var MyApp = MyApp || {};
//defining package //defining package
MyApp.string = MyApp.string || {}; MyApp.namespace(\"string.utils\");
//defining package //defining package
MyApp.string.utils = { MyApp.string.utils.trim = function(str) {
trim: function(str) { //code goes here
//code goes here console.log(\"trim\");
}, };
reverse: function(str) {
//code goes here MyApp.string.utils.reverse = function(str) {
} //code goes here
}; console.log(\"reverse\");
};

Questions?

Init-time branching

Tip of the day
“Branch some parts of the browser-specific code
during initialization, when the script loads, rather
than during runtime to avoid performance hit.”

Init-time branching: Defining browser-specific methods
MyApp.namespace(\"dom\");
MyApp.dom.addListener = null;
//all major browsers
if(typeof window.addEventListener === 'function') {
MyApp.dom.addListener = function(el, type, fn) {
el.addEventListener(type, fn, false);
};
}
//IE
else if(typeof document.attachEvent === 'function') {
MyApp.dom.addListener = function(el, type, fn) {
el.attachEvent('on' + type, fn);
};
}
//older browsers
else {
MyApp.dom.addListener = function(el, type, fn) {
el['on' + type] = fn;
};
}

Questions?

Lazy definition

Tip of the day
“The lazy definition pattern is very similar to the
previous init-time branching pattern.
The difference is that the branching happens only
when the function is called for the first time.”

Lazy definition: Defining browser-specific methods
var MyApp = MyApp || {};
Override function first time
MyApp.dom = {
addListener: function(el, type, fn){
if (typeof el.addEventListener === 'function') {
MyApp.dom.addListener = function(el, type, fn) {
el.addEventListener(type, fn, false);
};
} else if (typeof el.attachEvent === 'function'){
MyApp.dom.addListener = function(el, type, fn) {
el.attachEvent('on' + type, fn);
};
} else {
MyApp.dom.addListener = function(el, type, fn) {
el['on' + type] = fn;
};
}
MyApp.dom.addListener(el, type, fn);
}
};

Questions?

Configuration object

Tip of the day
“Instead of having many parameters, you can use
one parameter and make it an object.
The properties of the object are the actual
parameters.”

Configuration object: Ordinary constructor
var MyApp = MyApp || {};
MyApp.namespace(\"dom\");
MyApp.dom.Button = function(text, type) {
//some code here
}
MyApp.dom.Button = function(text, type, color, border, font) {
//some code here
}

Configuration object: Usage of configuration object
var MyApp = MyApp || {};
MyApp.namespace(\"dom\");
MyApp.dom.Button = function(text, settings) {
var type = settings.type || 'submit';
var font =settings.font ||'Verdana';
//..other props
//some code here
}

Questions?

Private properties and methods

Tip of the day
“Use local variables and methods inside a
constructor to achieve the “private” level of
protection.
Use naming conventions _doInternalOperation to
show that the function is private/protected.”

Private methods and properties: Private method
var MyApp = MyApp || {};
MyApp.namespace(\"dom\");
MyApp.dom.Button = function(text, settings) {
//..process properties
function setStyle(element, settings) {
//setting style to element
};
var button = //...
//..
setStyle(button,settings);
this.clone = function() {
var clonedButton = //...
//...
setStyle(clonedButton, settings);
}
//some code here
}

Questions?

Self-executing functions

Tip of the day
“Self-executing functions are especially suitable for
one-off initialization tasks performed when the
script loads.”

Self-executing functions: Usage
(function() {
//code goes here
})();
(function(){
// ...
var jQuery = window.jQuery = window.$ = function( selector, context ) {
// ...
return new jQuery.fn.init( selector, context );
};
// ...
jQuery.fn = jQuery.prototype = {
init: function() {
//...
}
};
})();

Questions?

Chaining

Tip of the day
“Pretty convenient way to call several related
methods on one line as if the methods are the links
in a chain.”

Chaining: Usage
var obj = new MyApp.dom.Element('span'); var obj = new MyApp.dom.Element('span');
obj.setText('hello'); obj.setText('hello')
obj.setStyle('color', 'red'); .setStyle('color', 'red')
obj.setStyle('font', 'Verdana'); .setStyle('font', 'Verdana');
document.body.appendChild(obj); document.body.appendChild(obj);
document.body.appendChild(
new MyApp.dom.Element('span')
.setText('hello')
.setStyle('color', 'red')
.setStyle('font', 'Verdana')
);

Questions?

Design patterns

Unobtrusive JavaScript

Unobtrusive JavaScript: Separate JavaScript functionality
<a onclick=\"doSomething()\" href=\"#\">Click!</a>
<a href=\"backuplink.html\" class=\"doSomething\">Click!</a>
$('a.doSomething').click(function(){
// Do something here!
alert('You did something, woo hoo!');
});

Unobtrusive JavaScript: Never depend on JavaScript
<script type=\"text/javascript\">
var now = new Date();
if(now.getHours() < 12)
document.write('Good Morning!');
else
document.write('Good Afternoon!');
</script>
<p title=\"Good Day Message\">Good Morning!</p>
var now = new Date();
if(now.getHours() >= 12)
{
var goodDay = $('p[title=\"Good Day Message\"]');
goodDay.text('Good Afternoon!');
}

Unobtrusive JavaScript: Never depend on JavaScript
<a href=\"javascript:window.open('page.html')\">my page</a>
<a href=\"#\" onclick=\"window.open('page.html')\">my page</a>
<a href=\"page.html\" onclick=\"window.open(this.href)\">my page</a>
<a href=\"page.html\" class=\"popup\">my page</a>
//some java script to open element with class \".popup\" in a new window

Questions?