Introduction

As we continue to push thin-client interfaces and capabilites, the amount of Javascript we're writing and maintaining has increased substantially. Unfortunately, for most of this expansion we haven't had have lacked clear guidelines set-out for Javascript development. This has in part contributed to the fragmentation of our thin-clients into the usage current collection of various different Javascript frameworks and methodologies. This document is an effort to consolidate best practices and serve as a reference to inform future development.

Frameworks

Historical

Early thin-client works at Pentaho were primarily plain javascript with the exception of WAQR (Ad-hoc reporting) which was written partially with the Dojo 0.4 framework. We introduced GWT as a way of allowing our Java developers to contribute to thin-client development. Later efforts have been a mixture of JQuery and modern Dojo.

Looking forward

Going forward we're trying to consolidate as much new development as possible around a JQuery stack. Dojo will continue to be used for Analyzer and Interactive Reporting, major thin-client applications where Dojo is already in use and excels.

GWT usage will be limited to shared code situations leveraging XUL such as the Pentaho Modeler.

jQuery Stack

jQuery alone is not a full development suite in and of itself. As such we've chosen the most popular technologies to augment jQuery with. Backbone for MVC http://backbonejs.org, Handlebars for templating http://handlebarsjs.com, and jQuery.UI for widgets http://jqueryui.com.

Javascript Doc

All Javascript should be documented using JSDoc notation https://github.com/jsdoc3/jsdoc. Generation of doc will be added to a future update to Subfloor-JS

AMD and RequireJS

Scripts need to be written as AMD modules.

NOTE: Add link to our AMD doc

Unit Testing

MORE RESEARCH REQURED.
Notes: Seems like RequireJS guys have worked around the issues with the major test suites out there, JSTestDriver, Jasmine. I know Rob and I were initially impressed by JSTestDriver. https://github.com/jrburke/requirejs/wiki/Test-frameworks

Source maps

Source Maps allow the debugging on compressed and obfuscated javascript by mapping the compressed version to it's original source http://www.thecssninja.com/javascript/source-mapping. GWT, Dojo and RequireJS all support this. Future releases should be constructing source maps for all of the compressed javascript portions of our product.

CSS Considerations

CSS is quickly becoming as much of an issue as the scripts have been.

Pre-processing (compiled CSS)

There's broad interest in moving to a CSS pre-processor to generate consolidated CSS. SASS http://sass-lang.com is the leading candidate to provide this.. Much work needs to be done to migrate to a pre-processor but we should be able to start the transition soon.

Image Bundles (Sprites)

SASS and it's associated tool, Compass http://compass-style.org, provide this capability.

Standardize the DOCTYPE

We need to get to HTML4 strict as fast as possible. In addition, we should consider adopting one of the templates out there, HTML5-Shim or Boilerplate.