Making strides at Heartland

Recently, my company publicly announced their partnership with Big Commerce, a large scale e-Commerce provider. Having helped with this integration for the past several months, it feels great to know my work is making an impact!

Details:
http://finance.yahoo.com/news/retailers-omni-commerce-heartland-payment-120500693.html

Heartland's merchants are now able to open an e-Commerce store and quickly make their product's available online (similar to Amazon's Web Store). After uploading their product inventories and setting up their online site at Big Commerce, they simply select Heartland as their payment gateway, and enter in their account verification details (a process I am intimately familiar with having developed the Heartland APIs). After verification is complete, they can publish their store to their custom domain and process all payments with Heartland (very cool!). Considering Heartland has very competitive rates for their payment processing, this is a huge win for the company and Heartland's clients.

Obviously I can't give specifics or share source code of the API, but I can share from a technical perspective that writing RESTful services/Web APIs and exposing them to your business partners makes your solutions much more flexible and dynamic. When a partner is able to instantly sign up and send billing details to your service, you are able to quickly synchronize information between parties, and make billing decisions in real-time. This really makes things easier on your downstream reporting applications, and when you have a service oriented architecture (SOA), partnerships become fast and easy to implement and offer instant feedback to all parties involved.

Great work to everyone who helped with the project!

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!

MVC4-Marionette TodoMVC Template

It has been some time since I last posted, and honestly I'm not sure how long it will be until the next.... But I try to leave my interesting findings on this blog when I have the time. Lately I have been totally devoted to various single page application frameworks, and all of us in the development community have seen a great deal of popularity in this area lately. Single page javascript applications are fast, do most of their work on the client browser, and scale easily. They also make applications much more responsive because most of your client/server requests are lessened to the JSON model data returned by the asynchronous ajax requests your application makes after the initial page load. Google's Gmail is a great example of a SPA. The days of reloading/resubmitting lots of html from the server to the browser after each page request are coming to a close.

There are a large number of SPA frameworks gaining steam, notably Durandal, Backbone, and Angular JS. Each of these SPA variants often share many of the same core ideas, approaches, and libraries for implementing SPAs:

Typically there is the following components in a good SPA framework:

• A templating library for interactive HTML templates (example library: Underscore js)
• A binding library for DOM/HTML & Javascript application interaction. This typically handles things like application events, callbacks, model HTML bindings (example libraries: Knockout, Backbone)
• A routing library for handling client side application routing (example libraries: Sammy js, Backbone)
• AMD libraries for module definitions. These enable you to use common patterns for defining separated modules and make up for some of the inherent limitations of the javascript language. An example widely used in most SPAs today is Require js. 
• Methods for synchronizing or serializing your model data to and from the server (whether this is via a service or directly to database file) OR HTML5's local storage (which has become quite useful for many test applications). Some example libraries for this include Breeze js and Backbone js. 

As you can see, Backbone is a pretty extensive framework for building single page apps, thus the reason it is being used by many of the most popular websites in the world today. There are also many extensions available (such as Marionette) which simplify the development process and reduce the amount of repeatable code you need to write.

I have recently begun work on a simple SPA for a client and decided to share my template for the rest of the community. It makes use of the following frameworks:

• Underscore
• Backbone
• Marionette
• Twitter Bootstrap styling
• Require
• MVC4/Web API

I have not included any Web API methods in this application (as it makes use of a Backbone local storage library), but the frameworks are provided in the default MVC4 project in Visual Studio 2012. The application provided is a simple refactorization of Jarrod Overson's Backbone/Marionette TodoMVC application. This approach differs in that it aims to allow for ample division in structure for specific pages within your SPA.

The main reason I wanted to make this open to the public was because I was not able to find a Backbone/Marionette MVC template which makes use of Microsoft's nuGet package management tools in Visual Studio. NuGet is most widely used with Microsoft applications and makes package management easy because of its integration with Visual Studio.Often JS libraries pulled from various sources can be difficult to manage and maintain from version to version. NuGet attempts to resolve these issues by managing dependencies between libraries.

Backbone and Marionette have been upgraded to the latest stable versions in this template (Backbone v1.0.0 and Marionette 1.03.1).

My template:
https://github.com/priley86/marionette-mvc4-bootstrap-template

Jarrod Overson's (older) template:
https://github.com/jsoverson/todomvc/tree/master/labs/dependency-examples/backbone_marionette_require

I will likely add additional findings to this template in the future as I come upon them, so please stay tuned.

Enjoy!