Converting CloudEdit from Backbone to Parse in 5 minutes

In Part 1 and Part 2 of the CloudEdit Backbone tutorials, I showed you how to create a simple Backbone app using Rails. Now, I’ll show you how to get rid of the Rails server entirely and convert CloudEdit into a Parse app using the Parse JavaScript SDK.

As usual, you can follow along with the codebase on GitHub and view the live app here.

Look Ma, No Servers!

My team and I at Parse have worked hard to create a platform that lets developers avoid having to think about or code anything on the server-side. You’ll notice that the codebase is just a static HTML5 app. You can easily throw this behind Nginx or even host it directly on AWS. Before embarking on this tutorial, you can sign up for a free account on Parse and have your app keys ready.

You can think of the Parse JavaScript SDK as completing the other half of Backbone: data persistence. Backbone doesn’t provide anything out of the box to store your data. Parse solves this (usually messy) half of the equation transparently. What you’ll see is that everything will Just Work™ without any server code.

From Backbone to Parse

The Parse JavaScript SDK is based on the Backbone codebase, and the core Parse.Object and Parse.Collection classes are compatible with Backbone Models and Collections. This tutorial is a step-by-step guide on how to convert CloudEdit to use Parse. There are also general conversion instructions on the Parse documentation page.

Let’s get started!

Directory Structure

The structure for the HTML5 is extremely simple since the whole site is static. We’ve reduced down to two main directories, with a similar hierarchy in the js directory:

index.html
stylesheets/
js/
    application.js
    controllers/
        documents.js
    models/
        document.js
    views/
        show.js
        index.js
        notice.js

Converting the Document Model

CloudEdit lets users create simple documents that have a title and body, and that are immediately publicly editable. To convert the document Backbone model to Parse, we simply replace the classes appropriately and specify a Parse className:

// The old Backbone Model
var Document = Backbone.Model.extend({
    url : function() {
      var base = 'documents';
      if (this.isNew()) return base;
      return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
    }
});

// The new Parse Object
var Document = Parse.Object.extend({
    className: "Document"
});

And that’s it. Notice that we can get rid of the notion of urls entirely and reduce the model to be backed by a named class on Parse.

Converting the Collection

Converting the collection is just as easy:

// Old Backbone Collection
App.Collections.Documents = Backbone.Collection.extend({
    model: Document,
    url: '/documents'
});

// New Parse Collection
App.Collections.Documents = Parse.Collection.extend({
    model: Document
});

Again, we simply get rid of the url attribute and point the collection over to the new Parse Object class. Everything just works the same.

But, it turns out we can get rid of the collection class altogether. Since it’s such a simple collection, we can automatically create an instance of this collection from a Parse.Query. Here’s how we do it:

var query = new Parse.Query(Document);
query.limit(50);
query.descending("createdAt");
var documents = query.collection();
documents.fetch();

We create a query to get all documents and limit it to 50 documents. We then generate the proper collection using the collection method.

Views and Controllers

We don’t have to do anything major to convert the Backbone views and controllers, since they don’t involve the data models.

As for the templates, I converted from the original JST templates over to underscore templates directly in index.html. Also, I combined various Rails templates to make index.html. You could also simply copy and paste the rendered output directly to create the index page.

Initializing Parse

There’s one last thing we need to do, and that is to initialize the Parse SDK with your application keys:

Parse.initialize("YOUR_APP_ID", "YOUR_JAVASCRIPT_KEY");

We also create a user automatically for each client by generating a username and password. This is crucial for security. You can read more about security and ACLs in the guide.

And, that’s it. You can check out the fully functioning app here.

Backbone Apps Without Servers

With Parse, we’re hoping to usher in an age of apps without servers. Or, at least, without servers that you as the developer have to worry about. What’s great is that by following this guide, you’ll be able to convert your existing Backbone apps to Parse with ease.

And, this is just the beginning. Read the full documentation to learn about user authentication, security, queries, geopoints, and much more.