[docs,refactor][s]: move examples to being tutorials in the docs directory.

docs/tutorial-backends.markdown

@@ -0,0 +1,110 @@
+---
+layout: container
+title: Library - Example - Loading data from different sources using Backends
+recline-deps: true
+root: ../
+---
+
+<div class="page-header">
+  <h1>
+    Loading data from different sources using Backends
+  </h1>
+</div>
+
+These set of examples will show you how you can load data from different
+sources such as Google Docs or the DataHub using Recline.
+
+<div class="alert alert-info">
+<p><strong>Note</strong>: often you are loading data from a given source in
+order to display it using the various Recline views. However, you can also
+happily use this data with your own code and app and this is a very common
+use-case.</p>
+<p>Moreover, Recline is designed so you need <strong>only</strong> include the
+backend and its dependencies without needing to include any of the dependencies
+for the view portion of the Recline library.</p>
+</div>
+
+## Overview
+
+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.
+
+You can use a backend directly e.g.
+
+{% highlight javascript %}
+var backend = recline.Backend.ElasticSearch.fetch({url: ...});
+{% endhighlight %}
+
+But more usually the backend will be created or loaded for you by Recline and all you need is provide the identifier for that Backend e.g.
+
+{% highlight javascript %}
+var dataset = recline.Model.Dataset({
+  backend: 'backend-identifier'
+});
+{% endhighlight %}
+
+<div class="alert alert-info">
+<strong>Backend identifiers</strong>
+How do you know the backend identifier for a given Backend? It's just the name of the 'class' in recline.Backend module (but case-insensitive). E.g. recline.Backend.ElasticSearch can be identified as 'ElasticSearch' or 'elasticsearch'.
+</div>
+
+### Included Backends
+
+* [elasticsearch: ElasticSearch Backend](docs/backend/elasticsearch.html)
+* [dataproxy: DataProxy Backend (CSV and XLS on the Web)](docs/backend/dataproxy.html)
+* [gdocs: Google Docs (Spreadsheet) Backend](docs/backend/gdocs.html)
+* [csv: Local CSV file backend](docs/backend/csv.html)
+
+Backend not on this list that you would like to see? It's very easy to write a new backend -- see below for more details.
+
+## Preparing your app
+
+This is as per the [quickstart](example-quickstart.html) but the set of files is much more limited if you are just using a Backend. Specifically:
+
+{% highlight html %}
+<!-- 3rd party dependencies -->
+<script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
+<script type="text/javascript" src="vendor/underscore/1.1.6/underscore.js"></script>
+<script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script>
+<!-- include the backend code you need e.g. here for gdocs -->
+<script type="text/javascript" src="src/backend/gdocs.js"></script>
+
+<!-- Or you can just include all of recline. -->
+<script type="text/javascript" src="dist/recline.js"></script>
+{% endhighlight %}
+
+
+## Loading Data from Google Docs
+
+We will be using the [following Google
+Doc](https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdGZPaUZsMjBxeGhfOWRlWm85MmV0UUE#gid=0).
+For Recline to be able to access a Google Spreadsheet it **must** have been
+'Published to the Web' (enabled via File -> Publish to the Web menu).
+
+<div class="alert alert-info">
+<strong>Want a real world example?</strong> This <a
+href="http://okfnlabs.org/opendatacensus">Open Data Census micro-app</a> loads
+data from Google Docs and then displays it on a specialist interface combining
+a bespoke chooser and a Kartograph (svg-only) map.
+</div>
+
+{% highlight javascript %}
+{% include example-backends-gdocs.js %}
+{% endhighlight %}
+
+### Result
+
+<div id="my-gdocs" class="doc-ex-rendered">&nbsp;</div>
+
+<script type="text/javascript">
+{% include example-backends-gdocs.js %}
+</script>
+
+
+## Writing your own backend
+
+Writing your own backend is easy to do. Details of the required API are in the
+[Backend documentation](docs/backends.html).
+