CATCH Demo - Annotation UI Grid


Project Overview

Phil Desenne - Project Leader
Mark Soper - Developer


0.0.8 - Annotation List Control

0.0.7 - Media Annotation Tree With Video

0.0.6 - Media Annotation Tree

0.0.5 - Angular and ng-grid

0.0.4 - Ember Data

0.0.2 - Exploring Moby Dick Open Annotation Data

0.0.1 - Ember Table Demo

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

Angular

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

Ember

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

Review of Grid Libraries for CATCH UI

JQuery UI Grid Widget

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

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

jqGrid

Ajax-enabled grid control

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.

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.

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

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

D3

Amazing JS data visualization library

Ember-Table

ng-grid