Introduction

Pentaho's web-based applications have been written using a variety of different techologies, Plain JS, Dojo, GWT, JQuery and others. This has had a number of negative effects:

The thin interfaces are difficult to maintain as developers are required to be proficient in all of the tech in use.
The number of developers which can effectively work in a particular area is limited to those which are familiar with the tech.
New work which spans across areas written in different technologies is slowed down by the need to integrate in each area uniquely.
Regressions are frequent due to all of the custom integration points.
The Script loading and Building system is strained by technologies which want to load their own scripts
JS Unit testing is difficult and as such is almost non-existant in our thin-client codebase.

Going forward, we want all new development to be done using a unified Thin-client technology stack (Unified Stack). This Unified Stack must be able to integrate with the existing areas now and have the capability to replace those legacy areas in the future.

The criteria for the Unified Stack and process for evaluating potential stack candidates follows:

New Stack Criteria

The following criteria must be meet by the Unified Stack

Compatible License
LGPL, MIT, APL or another liberal license.
Capable
The Unified Stack must meet the following:
- Dom querying and manipulation
- Works well with others and with multiple instances of itself.
- Good Class/Type system to allow for code re-use and customization.
- Functional JS support (iterators, map, reduce, etc.)
- Browser event abstraction, unified with synthetic eventing is possible (custom application events)
- Browser History handling (forward/back).
- Location routing. The ability to link to a particular area directly from the address bar (Deep linking)
- MV* architecture. Some sort of loose-coupling architecure, i.e separation of models from views and app logic (controllers)
- RESTFul service support, ideally with Model layer integration (automatic Model class generation from JSON)
- Widget Set with Layouts
- Templating System. The UI should not be constructed in Javascript. A declarative templating system, XML based to allow easy plugin template modification.
  - must support template snippet re-use (custom tags), collection looping, data binding, conditional blocks, recursion.
- View <--> Model databinding to automate the task of keeping each in sync.
Able to be "Built" into a minified form. Obfuscation-safe.
Flexible server layout. Shouldn't enforce a particular app structure, or at least allow for custom resource layouts.
Easy to debug
Testable through automated JS unit tests
Customizable. We must be able to replace any part of the stack with another technology as needed (no framework lock-in)
Plugin script integration. Runtime needs to be flexible enough to incorporate scripts provided by plugin.
Well documented
Active Community. Higher mindshare the better.

The Candidates

AngularJS http://angularjs.org
Dojo http://dojotoolkit.org
Dojo is the framework used to write both Analyzer and Interactive Reporting.
BackboneJS (http://backbonejs.org)
Used in the Browse Perspective
Backbone Derivatives: Marionette http://marionettejs.com, Chaplin http://chaplinjs.org
EmberJS http://emberjs.com
Distal templates https://code.google.com/p/distal# Distal templates https://code.google.com/p/distal
Y(Yahoo)UI http://yuilibrary.com/
KnockoutJs http://knockoutjs.com/

Evaluation

Candidates need to be proven-out in the various areas of our product using different tech. This involves ensuring bi-directionality between existing areas and the candidate.

PUC
Dashboards
Analyzer
Interactive Reporting

Candidate Analysis

Basics

Candidate	License	Documentation	Mindshare
AngularJS	MIT	API and Guide	Yes
Dojo	"New" BSD or Academic Free	Yes	Yes
BackboneJS	MIT	Yes	Yes
Marionette	MIT	Yes
Chaplin	Creative Commons	Yes	Yes
Distal	Apache 2.0	Yes
EmberJS	MIT	Yes	Yes
YUI	BSD	Yes	Yes
KnockoutJs	MIT	Yes	Yes

Click here to expand...

Capabilities

Capability	AngularJS	Dojo	BackboneJS	Marionette	Chaplin	EmberJS	YUI	Knockout
Dom Query/Manipulation/Eventing	jqLite	Yes	None (requires jQuery)	None (requires jQuery)	jQuery	None (requires jQuery)	Yes. Node is base element	No
Plays well with others and multiples of itself	Yes (multiple modules per page)	Yes, restrict namespaces	Yes	Yes, module and sub-module architecture	Yes, restrict namespaces	Yes, restrict namespaces	Yes, restrict namespaces	Yes, unique data-binding syntax
Good Class/Type system	Yes	Customization and code reusal	Yes	Yes	Yes	Yes	Yes	Yes
Functional JS support	only a few from jqlite (subset of jQuery)	Node list, query, map	Yes	Via jQuery	Via jQuery	Via jQuery	Yes	No, via jQuery
Event Bus	Yes, Scope methods	Events via Evented Class	Yes	Via, jQuery	Via jQuery	Via jQuery	Events via EventTarget and Custom	Yes, via Custom Bindings
Browser History handling	Yes, $location	dojo.router	Yes, Backbone.History	Yes, Backbone History	Yes, router	Yes	Browser History Manager	No, history.js is one option
Location routing	Yes, $routeProvider	dojo.router	Yes, Backbone.Router	Yes, AppRouter	Yes, router	Yes	Yes, Router	No, pagerjs or sammy are Knockout specific options
MV* architecture	Yes	dojox.mvc	Yes	Yes, via Backbone.Model	Yes	Yes	Yes	No. It is MVVM
RESTFul service Model support	Yes, $resource	dojo.xhrGet/Post/Put	Yes	Yes, via jQuery	Via jQuery	At least via jQuery	Yes, restful-xhr	No, via jQuery
View <--> Model databinding	Yes	dojo Data Modeling	Yes	Yes, via Backbone	Yes, backbone	Yes	Yes	Yes
Able to be "Built"	No	dojo srinksafe	No	No	No	No, at least native	Yes, YUI Compressor	No
Flexible server layout.	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
Easy to debug	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
Testable	It doens't look perfect, need other libraries	DOH, dojo Objective Harness	No, QUnit or Jasmine	No	Yes	Yes	Yes	No, Qunit or Jasmine
Customizable, cafeteria model	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
Plugin script integration	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes

Click here to expand...

Template Systems

Candidate	Programatic Overlay-like support	Data Binding	Looping	Conditionals	Recursion
AngularJS
Distal
XUL-HTML
YUI	Yes	Yes	Yes	Yes	Yes

Click here to expand...

Browser not supported