Sulc D. - Backbone.Marionette.js: A Gentle Introduction: Build a Marionette.js app, one step at a time

The open and flexible nature of Marionette allows it to be used in more ways than can be imagined. Ive seen applications that I would never have dreamed of, built with it: games, financial reporting tools, search engines, mobile applications, ticket sales and e-commerce, database management systems, and more. The down side of this flexibility, though, is documentation. Creating a comprehensive suite of documents that show all of the different ways that the parts can be combined is an overwhelming task.

Plenty of introductory articles, blog posts and videos exist out there on the web. But, very little of this information moved beyond the simple patterns of replace this Backbone code with this Marionette code. Putting the pieces together requires a new level of abstraction and thinking, and a new set of patterns to work with. And this documentation simply did not exist, even if some application developers other than myself were using these higher level patterns.

It wasnt until Brian Mann started producing his BackboneRails.com screencasts, and David Sulc started writing this book, that the Marionette community began to see all of the patterns of implementation that I was advocating, in one place. And Im so very happy to see David writing this book and Brian producing those screencasts. The community needs this information. The documentation gap is finally being closed.

This is the book that I wanted to write, but never had time to write. It is a complete and thorough introduction to building scalable applications with Marionette.js. Better still, it advocates and demonstrates the same patterns and principles that I use in my own applications. You owe it to yourself to work through all of the exercises in this book, even if you are a seasoned Backbone and Marionette developer. David has done a wonderful job of breaking down the architecture of large Marionette applications, lighting the path for each step of the journey.

The cover image depicts a theatrical appliance designed to help ventriloquists by having a partner voice their puppet. The image is from patent application 1,197,543 filed in 1914, which you can view here.

Who This Book is For

This book is for web developers who want to build highly interactive javascript applications. This book will cover using Backbone.Marionette.js to achieve that goal, and will empower you to build your own applications by understanding how Marionette apps are built.

All youll need to follow along is a basic understanding of javascript and the DOM (Document Object Model), such as being able to manipulate elements on the page using a jQuery selector. In other words, if youve used a few jQuery libraries here and there, you should be able to follow along just fine.

Following Along with Git

This book is a step by step guide to building a complete Marionette.js application. As such, its accompanied by source code in a Git repository hosted at https://github.com/davidsulc/marionette-gentle-introduction.

Throughout the book, as we code our app, well refer to commit references within the git repository like this:

Git commit with our scaffold code: e0eac08aa3287522fcab3301cf03ff81a60f1ddf

This will allow you to follow along and see exactly how the code base has changed: you can either look at that particular commit in your local copy of the git repository, or click on the link to see an online display of the code differences.

Any change in the code will affect all the following commit references, so the links in your version of the book might become desynchronized. If thats the case, make sure you update your copy of the book to get the new links. At any time, you can also see the full list of commits here, which should enable you to locate the commit youre looking for (the commit names match their descriptions in the book).

Even if you havent used Git yet, you should be able to get up and running quite easily using online resources such as the Git Book. This chapter is by no means a comprehensive introduction to Git, but the following should get you started:

• Set up Git with Githubs instructions
• To get a copy of the source code repository on your computer, open a command line and run
  gitclonegit://github.com/davidsulc/marionette-gentle-introduction.git
• From the command line move into the marionette-gentle-introduction folder that Git created in the step above, and execute
  gitshowe0eac08aa3287522fcab3301cf03ff81a60f1ddf

to show the code differences implemented by that commit:

• - lines were removed
• + lines were added

You can also use Git to view the code at different stages as it evolves within the book:

• To extract the code as it was during a given commit, execute
  gitcheckoute0eac08aa3287522fcab3301cf03ff81a60f1ddf
• Look around in the files, theyll be in the exact state they were in at that point in time within the book
• Once youre done looking around and wish to go back to the current state of the code base, run
  gitcheckoutmaster

What if I dont want to use Git, and only want the latest version of the code? You can download a zipped copy of the repository. This will contain the full Git commit history, in case you change your mind about following along.

Jumping in for Advanced Readers

My goal with this book is to get you comfortable enough to tackle your own Marionette projects, so it assumes very little knowledge. Although youll learn the most by following along with the code, you can simply skim the content and checkout the Git commit corresponding to the point in the book where you wish to join in.

Setting Up

In this book, were going to build an application step by step. The finished application can be seen at http://davidsulc.github.io/marionette-gentle-introduction.

The first order of business before we can start programming our application, is setting up our scaffold. Well be using pretty basic stuff:

• Bootstrap CSS and their starter template
• Marionette.js and dependencies

Easy, right?

Asset Organization

Before we get in the thick of things, lets quickly consider how well organize the various files (CSS, JS, etc.) that well be using in this project. In order to maintain our sanity as the files increase in number, well need some sort of system to keep the files tidy so we dont spend our time looking for things:

• project folder
  • index.html
  • assets
    • css
    • img
    • js
      • vendor