Backbone Marionette apps with Parse!

I have recently completed a simple Backbone Marionette application using the Parse SDK as a stoarge back-end and cloud hosting environment. As far as I know, this is the first "Todo" template out there using these frameworks. You can see the application here:
http://marionette-todo.parseapp.com/

And the source code here:
https://github.com/priley86/parse-marionette-todo

There is also an ASP.NET MVC4 template for those that prefer a Visual Studio development environment:
 https://github.com/priley86/marionette-mvc4-bootstrap-template/tree/Parse-Backend

All of the documentation about the frameworks and setup is listed on the github markdown file, but I wanted to point out a few things about this template and the benefit from using this approach.

First, you vastly cut down on application development and setup time by using the Parse back-end. Parse handles all of the object storage for you and sets up flexible APIs for you automatically when you save objects to your Parse application via the SDK. No more time wasted worrying about the database, user management, or an API layer. It's all done. Oh, and by the way, they'll host your web application for you. It's all free while you are developing, and very cheap to get enterprise scale hosting and custom domains. Start-up doesn't get any easier than this.

Second, Marionette is a very extensible plugin for Backbone which makes your single page app development much smoother. You save lines of code (because Marionette handles the trivial things like template rendering), and your application becomes easier to manage and maintain. Marionette takes care of the things you frequently do, and most of the things that Backbone forgets to, like event aggregation, view structuring (for collections and models), view layouts, and much more.

A few things to point out in each of the templates that I found important as I wrote it. There isn't enough time to cover everything on Parse and Backbone-Marionette, but the links below will help get you familiar with them:

Marionette
https://github.com/marionettejs/backbone.marionette

Parse

https://parse.com/docs/js_guide

First, you will want to make sure you take care of your Parse initialization in it's own Require JS module. Running this in another module or outside of Require will lead to errors. Also, make sure you set the Parse jquery reference to your application's jquery reference since Parse depends on this:

/* Parse.js */
define(
  ['jquery'
], function ($) {
      "use strict";

      Parse.$ = $;
      Parse.initialize("YOUR_APP_ID", "YOUR_JAVASCRIPT_KEY");
      return Parse;
  }
);

Next, notice that our collections and models are no longer Backbone collections and models, but Parse collections and models:

 /* Todo.js */
define(['Parse'], function (Parse) {
    'use strict';

    return Parse.Object.extend({
        className: "Todo",
        defaults: {
            title: '',
            completed: false,
            created: 0
        }
     ...

/* TodoList.js */
define(['Parse', '../models/Todo'], function (Parse, Todo) {
    'use strict';

    return Parse.Collection.extend({
        model: Todo,
    ...

Now that we have our Parse models and collections, it is important to remember to set the current user and their access control list (created in the login view) before creating any new persisted models

 /* Header.js */
define(['marionette', 'tpl!../templates/header.html'], function (Marionette, header) {
  "use strict";

  return Marionette.ItemView.extend({
      ...
       if (evt.which === ENTER_KEY && todoText) {
        this.collection.create({
            title: todoText,
            user: Parse.User.current(),
            ACL: new Parse.ACL(Parse.User.current())
        });

And when querying your Parse user's persisted objects, set the query parameter's accordingly:

 /* Layout.js */
        ...
        onShow: function () {
            
            //instantiate our collection instance for each of our views
            var viewOptions = {
                collection : this.todoList
            };

            this.headerRegion.show(new HeaderView(viewOptions));
            this.mainRegion.show(new TodoListCompositeView(viewOptions));
            this.footerRegion.show(new FooterView(viewOptions));
            
            // Setup the query for the collection to look for todos from the current user
            this.todoList.query = new Parse.Query(Todo);
            this.todoList.query.equalTo("user", Parse.User.current());

            // Fetch all the todo items for this user
            this.todoList.fetch();

If you do this correctly, you will see the user's objects created successfully with the user specified:

Lastly, there is an easy guide for deploying your application to Parse. A few quick shell commands to deploy your app to the Parse cloud, and your app is up and running. Guide:
https://parse.com/docs/cloud_code_guide#hosting

Way to simple, right? I will be blogging more about the Parse SDK in the future as I develop some amazing cloud applications! Parse has way too many features to cover in one blog post, so stay tuned!