Session Recap – Using Marionette and Backbone.js on the Platform

Red Argyle logo

Big thank you to those who attended my session this afternoon. Hopefully I was able to impart some knowledge or spark a few ideas. I’m just going to briefly recap what we talked about and then share some links to the resources I mentioned during my presentation.

Modular event-driven programing can bring structure to your javascript applications in a big way. At Red Argyle we have be building applications using Marionette and Backbone.js and have developed a library that sits on top of those frameworks that handles the communication between our applications and Salesforce. Marionette and Backbone.js give our applications the foundation to achieve a modular, composite architecture.

jQuery and similar libraries can sometimes lead to applications being built in an extremely complicated and tangled manner with a bajillion nested callbacks. This leaves developers who may pick up these projects scratching their heads and wasting time deciphering the code before even being able to fix or improve upon it. The solution is to use a more structured architecture which compartmentalizes functionality into modules bringing consistency to your code, isolating functionality and funneling communication between modules through event aggregators.

Backbone.js is a lightweight JavaScript library used to help bring structure to applications. It uses MVP (Model–View–Presenter) and lays the groundwork for a modular application. It also gives us a method of decoupling data from the UI so we aren’t storing information on the DOM.

Marionette improves upon this by extending Backbone.js in some key ways. With Marionette we get three new views that extend Backbone.js’s original view object. ItemViews are used to render out a singular item or model, CompositeViews are used to display a collection of many models and a LayoutView has the ability to nest views or modules inside it using regions. The definition of each of these views add some much needed functionality that helps reduce boilerplate code allowing you to do more while writing less code. Marionette also gives us an event aggregator that helps us bring structure and consistency to how our modules are communicating with each other.

RA-JS-Library is a library that Red Argyle has developed to sit on top of Marionette. It handles the communication between a Marionette application and the Salesforce server. It also includes quick file generation from templates using a JavaScript task running called Grunt. Based on an example from Kevin O’Hara, we are also using Grunt to deploy the JS and CSS running our application as a static resource using the Migration Tool.

Demo – Contact Manager. This is repository containing the code behind the simple application I used for my demo.

Thanks again to those who attended my session and I hope enjoyed the show. You can read more Red Argyle Dreamforce 13 session recaps here.

Red Argyle logo
Red Argyle logo

Related Blog Posts