Embed Daybed forms

A brief article to introduce backbone-daybed, a few helpers to render Web forms for Daybed models.

Antikes Sofa Diwan furniert Laden daybed

Daybed, lay down and REST

Daybed is a data validation and storage API, written in Python, using Pyramid and the fantastic Cornice addon.

It's a minimalist Web API where you :

Key features are:

It's a side-project we've been hacking on for a while, and we envision many applications ! One of them is, since the beginning, a Web forms service !

Models are yours

In order to create your own models, you can either use the crude GUI of daybed-maps or post a JSON manually on the Daybed instance we run for you.

In both cases you will reference your model definition using the ìd you chose.

Below, we define demo-poll-conf using cUrl in the command-line.

The model will be a stupid poll to ask how many conferences you attended in the past year.

# in a terminal...
definition='{
"title": "Conferences Poll",
"description": "How many conferences attended last year ?",
"fields": [
  {
    "name": "total",
    "type": "int",
    "description": "How many times ?"
  }, {
    "name": "category",
    "type": "enum",
    "choices": ["Web", "Strategy", "Technology"],
    "description": "Mostly in..."
  }
]}'

curl -XPUT http://daybed.lolnet.org/definitions/demo-poll-conf -d "${definition}"

backbone-daybed, simple and stupid

Backbone.js is not the next big thing :) #ooold, it's sooo 2011 !

But frankly, it has remained simple, very easy to learn and yet quite efficient! That's why I chose it to demo the power of having storage-as-a-service with Daybed. Plus, backbone-forms provided the right level of abstraction I needed !

For example, here we embed a form in the page for the model we just created, and start polling the audience !

The few lines of Javascript below render the form and reacts on submission !

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone-forms/0.12.0/backbone-forms.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/spiral-project/backbone-daybed/1e410a85/backbone-daybed.js"></script>
<script type="text/javascript">

    var form = Daybed.renderForm('#demo-form-container', {id: 'demo-poll-conf'});

    form.on('created', function (record) {
        // plot chart !
    })
</script>

The helper downloads the definition JSON, renders fields within an HTML form with backbone-forms. And in this example specifically, on submission, we fetch all the records, compute average values by category in order to plot some naive chart using Chart.js.

You can also have a look at the very few lines of the backbone-daybed demo, it's dead easy ! It features a CRUD application : Create, edit and delete records for the model of your choice ! http://spiral-project.github.io/backbone-daybed/#demo-poll-conf (See URL hash)

Shortly

So far, Daybed data is not protected (like a wiki), but access control is currently being implemented :)

Stay tuned !

#daybed, #javascript, #backbone - Posted in the Dev category