CATCH Demo - Annotation UI Grid

Technology Decisions For The CATCH UI

Outlines what libraries and frameworks were chosen and why.

Grid Control / Library

SlickGrid is the leading candidate, because: - It seems to nicely decouple presentation from data management, not trying to solve ajax loading, etc., which we want to be done in the MVC, not in the grid control - It seems to have the largest ecosystem among open-source JQuery-compatible grid controls

More detail and links for grid libraries that were evaluated

MVC Framework - more detail on front-end frameworks that were evaluated

Angular is the leading candidate: - easy to implement quickly - big and growing ecosystem, supported by Google

Ember may also be a good choice. It's a heavy-duty, opinionated framework designed for complex apps that people spend a lot of time in. As such it may result in a better-engineered product at the expense of additional development time.

More detail and links for MVC frameworks that were evaluated

Review of MVC Libraries for CATCH UI

Backbone

The original Javascript MVC framework

• lots of developers know it
• very simple and unopinionated
• has lost favor because it's very low level and doesn't provide a lot of what developers need, so they have to rely on third-party additions like Marionette or roll their own, resulting in hard-to-maintain code

Angular

Strong contender for new Javascript MVC library of choice for most projects, produced by folks at Google

• easier to get started than Ember
• comes from Google, so it may be a safe bet in terms of future-proofing the ecosystem
• declarative style makes for readable markup and fewer lines of code
• model layer may be less well designed than Ember's

Ember

Other lead contender for new MVC library of choice, designed for large-scale, complex apps

• this thread discusses grid controls, performance, etc. related ot ember vs angular

• designed for complex applications

• difficult learning curve
• powerful support for lots of features that may be needed
• strong model layer

Review of Grid Libraries for CATCH UI

JQuery UI Grid Widget

• not available yet
• JQuery UI team supposedly evaluating the best features of Slickgrid, jqgrid, and DataTables and rolling them into an officla JQuery UI Grid Widget, but this effort has been underway for years and there's not much update

SlickGrid

Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

Here's a very nice demo

• div based, not table based
• seems to have nice decoupling of data and presentation
• has the largest community
• appears to have been adopted by JQuery UI
• depends on JQuery
• has a lot of editing/spreadsheet functionality that wouldn't be relevant

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table

• table based, not div

jqGrid

Ajax-enabled grid control

• seems too coupled to backend

Backgrid

Backgrid.js is a set of components for building semantic and easily stylable data grid widgets. It offers a simple, intuitive programming interface that makes easy things easy, but hard things possible when dealing with tabular data.

• depends on Backbone (which depends on JQuery and Underscore)

Gridster

Gridster is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

• depends on JQuery

Recline.js

A simple but powerful library for building data applications in pure Javascript and HTML.

SlickGrid

Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

Here's a very nice demo

• div based, not table based
• seems to have nice decoupling of data and presentation
• has the largest community
• appears to have been adopted by JQuery UI
• depends on JQuery
• has a lot of editing/spreadsheet functionality that wouldn't be relevant

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table

• table based, not div

D3

Amazing JS data visualization library

• made for complex data visualization and graphics, not really for grid/tabular
• may be too complex, not having grid/tabular features
• example at http://bl.ocks.org/syntagmatic/3687826

Ember-Table

• depends on Ember.js and JQuery UI

ng-grid

• a grid plug-in for Angular