Working with Backbone.js and the Parse.com Proxy

Series Overview

<< Making Backbone.js Work with Parse.com     An Example Backbone/Parse.com App >>

In the last post, I presented some base prototypes for Backbone.js models and collections that play nicely with Parse.com

Next, I will put all the pieces together and show how to use Backbone.js with Parse.com.  All of the code is available on GitHub. https://github.com/BrianGenisio/Parseback/tree/parse.com-proxy-with-backbone.js

Create an “App” on Parse.com called “MyPeeps”

Once you crate the App, you will be given an Application Id and a Master Key which are essentially your user/password authentication for the site.

Set the ApplicationID and MasterKey in the config.coffee file

Create the model and collections (people.coffee)

The model and collection extends from ParseModel and ParseCollection described in the last post.

window.app =
  models: {}
  collections: {}

class app.models.Person extends Backbone.ParseModel
  urlRoot: "/data/People"

class app.collections.People extends Backbone.ParseCollection
  model: app.models.Person
  url: "/data/People"

Create index.html

<html>
<head>
  <script type="text/javascript" src="/vendor/jquery-1.6.2.js"></script>
  <script type="text/javascript" src="/vendor/underscore-1.1.7.js"></script>
  <script type="text/javascript" src="/vendor/backbone-0.5.3.js"></script>

  <script type="text/javascript" src="app.js"></script>
</head>
<body>
  Use the developer tools in your browser to play
</body>
</html>

Run the proxy server

Point your browser to http://localhost:3001. Open your console and start playing

Use your developer tools to create and work with your backbone models (created in people.coffee).

Create

Create a new Person model with the attributes you want and save it.  The “People” class will get created on Parse.com and the attributes will get populated. Everything is schema-less so it gets created on demand.

List

Create a new People collection and fetch the items.  When the server responds, you will see your new item in the collection with the attributes you set.

Update

When you update the attributes on your Person model and save it, the updates will go back to Parse.com.

Show

If you create a new Person model with a known id, you can fetch it from Parse.com

Delete

If you don’t want your object anymore, you can destroy it.

Querying

A very useful feature of the Parse.com API is the ability to query data.  To illustrate this, let’s populate the database with three Person models: Brian Genisio, Eli Genisio and Jon Doe.

I can pass a query parameter into the fetch function because Person derives from ParseModel.  Here, I am querying for any object in the database with a last attribute of “Genisio”.  Note that I only receive the two and Jon Doe is not retrieved.

Queries can be more complex.  Here is a similar query asking for all objects who’s last name attribute is not “Doe”.

Conclusion

I’ve illustrated how easy it is to use Backbone.js to work with the Parse.com backend.  Everything available in the REST API is abstracted with the Model and Collection paradigm that Backbone provides.  By placing a small proxy between your HTML client and Parse.com, you can quickly build single-paged applications and forget about the back-end. (For data-centric apps)

In my next post, I will give an example of a single-paged application that uses Parse.com as the back-end.

Tags: , , , , , , ,

4 Responses to “Working with Backbone.js and the Parse.com Proxy”

  1. [...] A Proxy Server for Parse.com Working with Backbone.js and the Parse.com Proxy [...]

  2. [...] « Working with Backbone.js and the Parse.com Proxy [...]

  1. Looking forward to the next post!

Leave a Reply