An Example Backbone/Parse.com App

Series Overview

<< Working with Backbone.js and the Parse.com Proxy    Hosting the Todos example on Heroku >>

This is the post where I put it all together.  I showed how to create a proxy to use Parse.com as your data store.  I also showed how to modify Backbone.js to use Parse.com.  Now, I will show how easy it is to use Backbone.js models and collections with a service like Parse.com.  Note that Parse.com is not the only service out there that does this.  StackMob is another example of a “place to put your stuff” service.  There are others.

In this app, I will borrow from the default Backbone.js example: Todos.  Todos is a simple to-do list, which uses the browser’s local storage to save data. 

I will adapt it to be hosted by the Parse.com proxy that I showed in my previous post.  Instead of storing locally, the app will put push to Parse.com.  Want to play with it?  I have hosted everything on Heroku: http://todos-parsepack.herokuapp.com/

There are only a few tiny steps to make this work:

  1. Replace localstorage.js with parse.com.js
  2. Modify the model and collection to use Parse.com instead of local storage
  3. Configure the proxy
  4. Run the proxy

 

1. Modify index.html

The example given with Backbone.js uses the “localstorage” override for Backbone.sync.  We want to use the default REST version Backbone.sync so we remove it.  We also want to use the base prototypes to adapt Parse.com to Backbone.

<script src="backbone-localstorage.js"></script>

<script src=”parse.com.js"></script>

2a. Modify the model

The example uses a vanilla Backbone.Model.  Instead, change it to Backbone.ParseModel and give it the location of the data.

window.Todo = Backbone.Model.extend({

window.Todo = Backbone.ParseModel.extend({

    urlRoot: "/data/Todos",

2b. Modify the Collection

The example uses a Backbone.Collection.  Instead, change it to Backbone.ParseCollection and give it the location of the data.

window.TodoList = Backbone.Collection.extend({

window.TodoList = Backbone.ParseCollection.extend({

    url: "/data/Todos",

Also, since we aren’t using local storage, remove the localStore details.

localStorage: new Store("todos"),

3. Configure the App

That is all you need to do in order to modify the app.  Everything else is exactly the same.  You do, however, need to create an App at Parse.com.

Use the Application ID and Master Key and edit the config.coffee file:

applicationID: 'APPLICATION ID'
masterKey:    'MASTER KEY'
apiPath:  '/data/'
port:     3001

4. Run the proxy:

> coffee proxy.coffee

Test the app

Add items to your list.

 

See them show up in your data store.

Conclusion

That was insanely easy.  You just need to tell you models and collections to go to the server instead of local storage, configure the proxy and run it.  This solution installs well on Heroku as you can see.  This app wasn’t built with any type of user models, so everyone in the world gets to share Todos in this example… that can also be done with Parse.com, but I that is a different post ☺.

If anyone finds this useful, I would be curious to know if it helps.  If you want the source code for this project, take a look at the GitHub project

As a bonus, I wrote up the modifications I needed to make in order to host the Parse-backed Todos example on Heroku. It was really easy and worth the writeup.

Tags: , , , , , , ,

2 Responses to “An Example Backbone/Parse.com App”

  1. [...] Making Backbone.js Work with Parse.com An Example Backbone/Parse.com App [...]

Leave a Reply