---
layout: default
title: Library - Home
root: ../
---

<div class="container library">
  <div class="page-header">
    <h1>
      Documentation
    </h1>
  </div>

  <p>Building on <a href="http://backbonejs.com/">Backbone</a>, Recline
  supplies components and structure to data-heavy applications by providing a
  set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph
  etc).</p>


<h2 id="concepts">Concepts and Structure</h2>

<h1><small>The Recline Library consists of 3 parts: Models, Backends and Views</small></h1>

<div class="row">
  <div class="span4">
    <div class="well">
      <h3>Models</h3>
      <p>Models help you structure your work with data by providing some standard objects such as Dataset and Record &ndash; a Dataset being a collection of Records. <a href="models.html">More &raquo;</a></p>
    </div>
  </div>
  <div class="span4">
    <div class="well">
      <h3>Backends</h3>
      <p>Backends connect your Models to data sources (and stores) &ndash; for example Google Docs spreadsheets, local CSV files, the DataHub, ElasticSearch etc. <a href="backends.html">More &raquo;</a></p>
    </div>
  </div>
  <div class="span4">
    <div class="well">
      <h3>Views</h3>
      <p>Views are user interface components for displaying, editing or interacting with the data. For example, maps, graphs, data grids or a query editor. <a href="views.html">More &raquo;</a></p>
    </div>
  </div>
</div>

<img src="https://docs.google.com/drawings/pub?id=1tEKX9ybHZKdPImoy7j_m5x3_b9HzcaU1OnNfQB3F9XQ&amp;w=888&amp;h=539" style="display: block; margin: auto;" />

<div id="tutorials" class="tutorials">
  <h2>Tutorials</h2>
  <div class="alert alert-success"><strong>Note:</strong> A quick read through of the <a href="#concepts">Concepts section</a> will
  likely be useful in understanding the details of these tutorials.</div>

  <div class="row">
    <div class="span4">
      <div class="well">
        <h4><a href="example-quickstart.html">Recline Quickstart Guide</a></h4>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h4><a href="example-backends.html">Loading from difference sources: Google Docs, Local CSV, DataHub</a></h4>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h4>Twitter Example</h4>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="span4">
      <div class="well">
        <h4>Customing Display and Import using Fields</h4>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h4>Listening to events</h4>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h4>Setting and Getting State</h4>
      </div>
    </div>
  </div>

  <h3>Extending Recline</h3>
  <div class="row">
    <div class="span4">
      <div class="well">
        <h4>Create a new View</h4>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h4>Create a new Backend</h4>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h4>Create a Custom Record Object</h4>
      </div>
    </div>
  </div>
</div>

<h2 id="docs-source">Source Docs (via Docco)</h2>
<div class="row">
  <div class="span4">
    <h4>Models</h4>
    <ul>
      <li><a href="model.html">Models</a></li>
    </ul>
  </div>
  <div class="span4">
    <h4>Backends</h4>
    <ul>
      <li><a href="src/backend.memory.html">memory: Memory Backend (local data)</a></li>
      <li><a href="src/backend.elasticsearch.html">elasticsearch: ElasticSearch Backend</a></li>
      <li><a href="src/backend.dataproxy.html">dataproxy: DataProxy Backend (CSV and XLS on the Web)</a></li>
      <li><a href="src/backend.gdocs.html">gdocs: Google Docs (Spreadsheet) Backend</a></li>
      <li><a href="src/backend.csv.html">csv: Local CSV file backend</a></li>
    </ul>
  </div>
  <div class="span4">
    <h4>Dataset Views and Widgets</h4>
    <ul>
      <li><a href="src/view.multiview.html">MultiView View (plus common view code)</a></li>
      <li><a href="src/view.grid.html">(Data) Grid View</a></li>
      <li><a href="src/view.graph.html">Graph View (based on Flot)</a></li>
      <li><a href="src/view.map.html">Map View (based on Leaflet)</a></li>
    </ul>
  </div>
</div>

</div> <!-- / container -->