Framework Decision Process
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
Candidate |
License |
Documentation |
Mindshare |
---|---|---|---|
AngularJS |
|
||
Dojo |
|
||
BackboneJS |
|
||
Marionette |
|||
Chaplin |
|
||
Distal |
|||
EmberJS |
|
||
YUI |
|
||
KnockoutJs |
|
Capability |
AngularJS |
Dojo |
BackboneJS |
Marionette |
Chaplin |
EmberJS |
YUI |
Knockout |
---|---|---|---|---|---|---|---|---|
Dom Query/Manipulation/Eventing |
|
|
|
|
|
|
|
|
Plays well with others and multiples of itself |
|
|
|
|
|
|
|
|
Good Class/Type system |
|
|
|
|
|
|
|
|
Functional JS support |
|
|
|
|
|
|
|
|
Event Bus |
|
|
|
|
|
|
|
|
Browser History handling |
|
|
|
|
|
|
|
|
Location routing |
|
|
|
|
|
|
|
|
MV* architecture |
|
|
|
|
|
|
|
|
RESTFul service Model support |
|
|
|
|
|
|
|
|
View <--> Model databinding |
|
|
|
|
|
|
|
|
Able to be "Built" |
|
|
|
|
|
|
|
|
Flexible server layout. |
|
|
|
|
|
|
|
|
Easy to debug |
|
|
|
|
|
|
|
|
Testable |
|
|
|
|
|
|
|
|
Customizable, cafeteria model |
|
|
|
|
|
|
|
|
Plugin script integration |
|
|
|
|
|
|
|
|
Candidate |
Programatic Overlay-like support |
Data Binding |
Looping |
Conditionals |
Recursion |
---|---|---|---|---|---|
AngularJS |
|||||
Distal |
|||||
XUL-HTML |
|||||
YUI |
|
|
|
|
|