Uncategorized

In One Post: Backbone.js

18 Apr , 2014  

I don’t know everything about Backbone.js, but I would like to. This post should get us to a point of creating a true MVC application without hesitation, without the fancy stuff. The focus will be on taking a static boilerplate and turning it into a single-page-application with history management. Sure, I will use tutorials for my investigation and I may spend hours pouring over the documentation, but let’s face it: you don’t have time for that. Everything can and should be boiled down to the most important parts and presented in a consumable format with linked references allowing people to dig into their interests as they need.

First I’ll start with a boilerplate. I’ve opted to use Bootstrap, so the boilerplate will be a basic page with a top-fixed header that leverages jQuery to display a left-fixed navigation panel. This initial ‘release’ will not contain any Backbone or Underscore dependent code. Grab a copy for yourself from github.

Important parts in this version:

  • The content area of my page is relatively simple – this will probably become simpler as I abstract out the contents of <div class=”container-fluid”> (line 100 of index.html)
  • The navigation links are all real links – I don’t know how Backbone handles routes but I know I want it to degrade and screen-read nicely which makes this important

Now let’s add some Backbone. Also some Underscore, as this is Backbone’s singular dependency. To keep it simple, I’m just going to convert a couple of my links to Backbone routes backed by Underscore templated views. If this sounds complicated, don’t worry, it will all make sense very soon. Here’s the code for those of you following along at home.

Important parts in this version:

  • Backbone views – This is where you define where the view should be placed and what should be placed in it
    var Home = Backbone.View.extend({
      el: '#main-container',  //this is where to place the view
      render: function() {
        var template = _.template($("#home-template").html(), {somevar: "someval"});  //this is the Underscore template
        this.$el.html(template);
      }
    });
    var home = new Home();
    
  • Backbone router – This binds a URL path to a route
    var Router = Backbone.Router.extend({
      routes: {
        '': 'home',
        'build/campaign': 'campaignBuilder'
      }
    });
    var router = new Router();
    
  • Backbone routes – This allows us to call the view on the route
    router.on('route:home', function() {
      home.render();
    });
    
  • Backbone.history.start()

    – This is what makes the router actually start running/recording (line 38 of emmbb.js)

  • Underscore templates – This is the actual template. Any Underscore formatted variables will be replaced with the value when it is called in a Backbone.View
    &lt;script id="home-template" type="text/template"&gt;
      &lt;h2&gt;Welcome&lt;/h2&gt;
      &lt;p&gt;&lt;%- somevar %&gt;&lt;/p&gt;
    &lt;/script&gt;
    

That’s it, we now have an application with a Backbone. Sure, this only covers about 1% of Backbone’s functionality, but with these few lines we are able to accomplish some important things like data-binding and history management all in a single-page-application. In the next iteration I want to make something even more dynamic which will hopefully reduce the repetitive nature of using Backbone for simple purposes, but that is a little complex to cover in just one post.

In review, this didn’t take me as long as I thought it would. Backbone is extremely flexible, which is great if you want to build highly customized features or create complex single-page-applications, but can also be annoying for basic apps that end up consisting of a lot of repeated code.


Leave a Reply