Friday, June 6, 2014

A simple modular design for jQuery-based single page application (SPA)

Due to the complexity of a single page application, there are separate JavaScript files for different functions of a page. We developed a simple JavaScript modular system to organize these files. A typical module is an assignment of an IIFE (Immediately-Invoked Function Expression) to a global variable. It has the following structure:
var globalName = (function($) {
    // declarations of variables and functions
var declaredName1 = …;
var initModule = function(dep1, dep2) {
    // Initialization code using dependent module or dependent module variables
    …
};
var onDocumentReady =  function () {
   // code to be executed in JQuery on document ready call
   …
};
return {
    name1: declaredName1,
    …,
    initModule: initModule,
    onDocumentReady: onDocumentReady
};
} (jQuery));
The above code executes when the JavaScript file is loaded into an HTML page. The result of its execution is an assignment of an object with some exported names to a global variable. Each module only has one global name.

Each HTML page also has a pageRun.js that initialize each module and call a module’s onDocumentReady() function. It has the following structure:
jQuery(function() {
globalName.initModule(dependent1, dependent2);
globalName. onDocumentReady();
});
In the above code, shared modules and independent module run first. A module should be initialized and run after its dependent modules. The initModule() call makes the dependent relationship explicit. 

Thursday, June 5, 2014

Include StyleCop in build process

The following are steps to include StyleCop in build process. It  is based on: http://stylecop.codeplex.com/wikipage?title=Setting%20Up%20StyleCop%20MSBuild%20Integration&referringTitle=Documentation

You may want to change the 4.7 with the StyleCop version used in your project. 

1. Download StyleCop
2. Copy the StyleCop binary {Program Files}\StyleCop4.7 to the repository solution folder:  {Solution Folder}\ExternalTools\StyleCop\V4.7. Solution folder is where the VS solution file located. 
3. Copy all of the files from {Program Files}\MSBuild\StyleCop to the {Solution Folder}\ExternalTools\StyleCop\V4.7 folder. 
4. Edit {Solution Folder}\ExternalTools\StyleCop\V4.7\StyleCop.targets to make it to use the copied binary files in the same directory:  <UsingTask AssemblyFile="StyleCop.dll" TaskName="StyleCopTask"/>
5. Put Settings.StyleCop in the {Solution Folder} to set solution-wide StyleCop rules.

The above steps are for the whole solution, for each project, you need complete the following steps. 
6. Add one property definition in the project file <PropertyGroup>:  <StyleCopTargets>..\ExternalTools\StyleCop\v4.7\StyleCop.targets</StyleCopTargets>
7. In the same project file, add the <Import Project="$(StyleCopTargets)" /> after <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
8. In the Debug <PropertyGroup>,  set run code analysis to true:  <RunCodeAnalysis>true</RunCodeAnalysis>