JSAnalyse published on codeplex

The following post shows how to design and verify client-side architectures in web applications. The possibilities of the open-source project "JSAnalyse" are described in order to handle big amounts of JavaScript in modern web applications.

The first beta of JSAnalyse has just been published on codeplex under "GNU General Public License version 2".

JSAnalyse is a tool to analyze the dependencies between JavaScript files and keep them under control. It helps to visualize and handle static references between JavaScript files in order to ensure the defined client-side architecture.

Nowadays is it nearly impossible to turn off JavaScript support in the browser. Most of the ASP .NET applications have a lot of functionality which bases on client-side scripts, especially ASP .NET MVC applications with build-in support for the JQuery Library.

The amount of JavaScript has been dramatically increased over the last couple years. That is the reason why it is more and more important to have good client-side architecture, minimize the dependencies and avoid cyclic dependencies between the JavaScript files.

JSAnalyse is a tool for verifying the client-side architecture. It analysis the dependencies between JavaScript files and shows unwanted references. It has to be configured which dependencies between the JavaScript files are allowed. This can be done either via XML or by using the Visual Studio 2010 Architecture Layer Diagram.

Visual Studio Layer Diagram Validation Extension

The Architecture and Modeling components are a great feature in Visual Studio 2010. There are already a lot of posts about the Layer Diagram Validation. Layer Diagrams allows to visualize and define the dependencies between layers, namespaces and classes. Furthermore they validates the dependencies during the build process in order to detect unwanted references.

JSAnalyse provides an extension for the Visual Studio Layer Diagram to validate and control dependencies between JavaScript files. This can be integrated into the build. Together with the Gated Check-in feature it is not even possible to check-in source code which does not fulfill the JavaScript architectural rules.

Console Application

Besides the Visual Studio Layer Diagram it is also possible to analyze JavaScript files from a console application. Therefore, JSAnalyse can be used in all JavaScript related projects which might not be created with the Visual Studio 2010.

Technical Description
JSAnalyse provides a Core Assembly which parses the JavaScript files with the help of Jint. Jint is a JavaScript Parser and Interpreter that supports ECMAScript 5.

After parsing the JavaScript files, JSAnalyse builds up a dependency tree based on a static analyzes. Additionally, it takes a data source which defines the allowed dependencies. Based on this information it detects unwanted references between JavaScript files.

On top of the Core Assembly a Visual Studio Layer Diagram Extension has been build, which allows defining visually the dependencies between the JavaScript files.

During the build the architecture diagram invokes the JSAnalyse extension. If the defined dependencies are not followed, the Visual Studio Error List contains the file, line and character where the unwanted dependency has been detected.