Recline combines a data grid, Google Refine-style data transforms and visualizations all in lightweight javascript and html.

Designed for standalone use or as a library to integrate into your own app. Recline builds on the powerful but lightweight Backbone framework making it extremely easy to extend and adapt and its modular design means you only have to take what you need.

Main Features

• View and edit your data in a clean grid / table interface
• Bulk update/clean your data using an easy scripting UI
• Easily extensible with new Backends so you can connect to your database or storage layer
• Visualize data
• Open-source, pure javascript and designed for integration -- so it is easy to embed in other sites and applications
• Built on the simple but powerful Backbone giving a clean and robust design which is easy to extend
• Properly designed model with clean separation of data and presentation
• Componentized design means you use only what you need

Screenshots

Demo

For Recline Demo Click Here »

Documentation

Quickstart

// Note: you should have included the relevant JS libraries (and CSS)
// See above for dependencies

// Dataset is a Backbone model so the first hash become model attributes
var dataset = recline.Model.Dataset({
    id: 'my-id'
  },
  // Either a backend instance or string id for a backend in the registry
  backend
);
// DataExplorer is a Backbone View
var explorer = recline.View.DataExplorer({
  model: dataset,
  // you can specify any element to bind to in the dom
  el: $('.data-explorer-here')
});
// Start Backbone routing (if you want routing support)
Backbone.history.start();
    

More details and examples: see docs below and the Demo -- just hit view source (NB: the javascript for the demo is in: app.js).

Structure

Recline has a simple structure layered on top of the basic Model/View distinction inherent in Backbone.

Models: there are two main model objects:

• Dataset: represents the dataset. Holds dataset info and a pointer to list of data items (Documents in our terminology) which it can load from the relevant Backend.
• Document: an individual data item (e.g. a row from a relational database or a spreadsheet, a document from from a document DB like CouchDB or MongoDB).

More detail of how these work can be found in the Model source docs.

Backends connect Dataset and Documents to data from a specific 'Backend' data source. They provide methods for loading and saving Datasets and individuals Documents as well as for bulk loading via a query API and doing bulk transforms on the backend. More info on backends can be found below.

Views: complementing the model are various Views (you can also easily write your own). Each view holds a pointer to a Dataset:

• DataExplorer: the parent view which manages the overall app and sets up sub views.
• DataGrid: the data grid view.
• FlotGraph: a simple graphing view using Flot.

Backends

Backends are implemented as Backbone models but this is just a convenience (they do not save or load themselves from any remote source). You can see detailed examples of backend implementation in the source documentation below.

A backend must implement two methods:

sync(method, model, options)
query(dataset, queryObj)

sync(method, model, options)

This is an implemntation of Backbone.sync and is used to override Backbone.sync on operations for Datasets and Documents which are using this backend.

For read-only implementations you will need only to implement read method for Dataset models (and even this can be a null operation). The read method should return relevant metadata for the Dataset. We do not require read support for Documents because they are loaded in bulk by the query method.

For backends supporting write operations you must implement update and delete support for Document objects.

All code paths should return an object conforming to the jquery promise API.

query(dataset, queryObj)

Query the backend for documents returning them in bulk. This method will be used by the Dataset.query method to search the backend for documents, retrieving the results in bulk. This method should also set the docCount attribute on the dataset.

queryObj should be either a recline.Model.Query object or a Hash. The structure of data in the Query object or Hash should follow that defined in issue 34. (Of course, if you are writing your own backend, and hence have control over the interpretation of the query object, you can use whatever structure you like).

Source Docs (via Docco)

• Models
• DataExplorer View (plus common view code)
• DataGrid View
• Graph View (based on Flot)
• Backend: Memory (local data)
• Backend: ElasticSearch
• Backend: DataProxy
• Backend: Google Docs (Spreadsheet)

Tests

Run the tests online.

History

Max Ogden was developing Recline as the frontend data browser and editor for his http://datacouch.com/ project. Meanwhile, Rufus Pollock and the CKAN team at the Open Knowledge Foundation had been working on a Data Explorer for use in the DataHub and CKAN software.

When they met up, they realized that they were pretty much working on the same thing and so decided to join forces to produce the new Recline Data Explorer.

The new project forked off Max's original recline codebase combining some portions of the original Data Explorer. However, it has been rewritten from the ground up using Backbone.