Wednesday, June 11th, 2008

Frizone: JavaScript dev, test, and deployment environment

Category: JavaScript, Library

John Leach has created a very cool new open source project called Frizione (Italian for Clutch).

Frizione is a “JavaScript development, testing and deployment environment. It comprises a library agnostic set of tools for any type of browser based JavaScript development, which coincidentally has Gears support.”

You run Frizione as a Web server and it gives you a set of services:

Compressor Service

The compressor service takes a JavaScript file and removes comments and
unnecessary whitespace. This can be a destructive operation in that the original

JavaScript file can be overwritten, unless the -o option is specified – you have been
warned.

To invoke the service, send a POST request to /run_compressor, appending the
absolute JavaScript file path, with respect to the /Clutch root directory, as part of
the URL. Clutch will then compress the JavaScript file. Additional request parameters
can be set to modify the behaviour of the compressor, using the YUICompressor
command line options.

Fixture Service

The fixture service allows you to write text to hard disk. When sent a POST, the
service writes the POST data to the file specified in the URL, optionally modifying the
contents with parameter values specified in the POST request, using ERB.
To invoke the service, send a POST request to /run_fixture, appending the
absolute output text file path, with respect to the /Clutch root directory, as part of
the URL.

Join Service

The join (or concatenate) service uses ERB to join together a list of text files,
producing a single concatenated file. Each file can contain include commands
which contain relative URLs to other files to be included at the point of the include
command itself. This process can also be repeated within the included files (nesting).
To invoke the service, send a POST request to /run_join, specifying the absolute
text file path, with respect to the /Clutch root directory, as part of the URL. Clutch
will then create the joined (or concatenated) file. The to request parameter is
required to set the destination absolute URL of the resulting joined file.

JSLint Service

The original lint program analysed C source code for potential (and subtle)
malpractices likely to lead to run-time bugs. Modern C compilers now provide
sufficient syntactic and semantic checking that lint is now rarely required or used.

Fortunately for JavaScript programmers, Douglas Crockford has built a lint program
specifically for JavaScript, in JavaScript, called JSLint. Finding and removing
potentially poor code before unit testing is an essential process, at least for me.
Unfortunately, cutting and pasting code to the web page can itself be error prone.

Clutch alleviates this problem by creating static HTML pages that read in your
JavaScript code, which can then be analysed locally by JSLint. You only need create
the static HTML page once for each JavaScript file you wish to analyse.

To invoke the service, send a POST request to /run_jslint, specifying the absolute
JavaScript file path, with respect to the /Clutch root directory, as part of the URL.
Clutch will then produce a static HTML file under the /jslint folder, which
automatically loads the JavaScript file into the JSLint page. You may then wish to add
a link to this static HTML file in the /jslint/index.html page.

Test Service

The test service creates a run/view pair of static HTML files for a given JavaScript
file. The reasons for using two HTML files is explained in the ‘Unit Testing’ section
below.

It can also provide functionality similar to the join service. It can use ERB to join
together a list of JavaScript files, producing a single concatenated JavaScript file, but
only if the to parameter is specified.

To invoke the service, send a POST request to /run_test, specifying the absolute
JavaScript file path, with respect to the /Clutch root directory, as part of the URL.
Clutch will then create the two static HTML files.

The Unit Test Framework

The framework follows a similar pattern to the well known JUnit Java testing
framework.

Create your test methods in a plain JavaScript object, then wrap that object in a
clutch.unittest function call, as shown in the first example above. All functions
in your test object which begin with test will be executed by the unit test
framework, but the order of function execution is not guaranteed.

Before a testxxx function is executed, the unit test framework will execute a setUp
function in your object. After a testxxx function has been executed, the unit test
framework will execute a tearDown function in your object. Clutch provides a
default no-operation function for setUp and tearDown if none are defined in your
object.

Posted by Dion Almaer at 9:10 am
4 Comments

+++--
3.6 rating from 25 votes

4 Comments »

Comments feed TrackBack URI

Sounds intriguing. At Zazzle, our build scripts use Windows Scripting Host to run the UIZE scruncher on all the JS libraries, and then another WSH script builds library files that contain multiple scrunched JS modules, for optimizing to minimize HTTP requests on certain pages. Naturally, the JavaScript scruncher is written in JavaScript. Scrunching involves performing enumeration on identifiers flagged as private.
 
A framework for unit testing sounds tantalizing. I kind of wish there was a language that built unit testing directly into its syntax, so that the test cases could be declared inside / along with the implementations.

Comment by uize — June 11, 2008

Thanks for the write up Dion. One typo in the title it’s Frizione not Frizone.

I’d have used clutch on GoogleCode, but it was already taken, sigh. I can’t believe that something like this hasn’t already been done, maybe I just didn’t look hard enough. Nonetheless, it has been fun to do, but please remember it’s at a very low version number, there’s still a few pieces of the puzzle missing.

I have a few ideas for handling asynchronous unit tests – is there an Ajaxian forum where this could be discussed, or is comp.lang.javascript the place to go?

Comment by jhl — June 11, 2008

Very interesting. How could this work with say an environment like Aptana Studio or Aptana Jaxer?

Comment by khakman2 — June 12, 2008

@khakman2
I have now created a google Group for Frizione, my reply to your question can be found there:
http://groups.google.com/group/frizione/topics

Comment by jhl — June 12, 2008

Leave a comment

You must be logged in to post a comment.