(Updated: 2013-02-02, 2013-11-24)
Brief Background (optional reading)
A common problem with large JS web apps developed is that it became pretty messy really quick. The lacks of structure it’s hard to maintain. This is where Backbone comes into play. It provides structure to organize the code and increase maintainability. Backbone is not the only one; in fact, there are many JS frameworks that accomplish similar results like Ember.js, Angular.js and so on. However, I choose Backbone because is one of the most widely spread framework in its category. It has a vibrant community and it’s also being fully used in production for a considerable number of big companies like: Wal-Mart mobile, Groupon, Khan Academy, Pandora, Wordpress, Foursquare, and so on.
Just enough to get started with Backbone.js
Backbone.js has hard dependency on underscore.js and a soft dependency on jQuery. It’s composed by the following modules:
Shut up and show me the code!
Alright! the way we are going to explore all of these modules it’s through examples. This is a practical tutorial that I wished I had it when I stared learning. So, this is a fat-free walkthrough Backbone.js, as simple as it could be, all the code is in one file just for didactical purposes (no hidden magic tricks, all cards are on the board).
The first example is a ‘Hello World’ app in Backbone and the second it’s a Todo App. After doing these 2 apps, you’ll see in action every Backbone module and have practical understanding about them.
1. Hello World in Backbone.js
You can follow alone this tutorial’s code in this repository. Each feature implemented it’s a new commit, so you can easily see what changed in every step.
1.1.- Simple HTML5 and Backbone boilerplate
To get started download this simple html file. This file contains the libraries that you’ll need (jQuery, Underscore.js, Backbone.js and Backbone-localStorage.js) and the placeholders for your HTML and JS code. Don’t worry about the libraries we are going to explain them, as we need them.
After downloading the afored mentioned file, notice the HTML where all your page will be built using Backbone.Views!
All your js app will be loaded here:
Backbone’s Views are the equivalent of ‘controllers’ on MVC frameworks (like Ruby on Rails), if you are not familiar with MVC frameworks nevermind. Backbone’s Views glues together user events (clicks, pressed keys …), render HTML views and templates, and interacts with models which contains the data of the application.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
1.3.- Test the app
After copying the code, open the file, refresh the browser and you should see the ‘Hello World’ message… right? Wait, if you just seeing just ‘Loading…’ it’s because you need to initialize the view first.
var appView = new AppView();
Yay! you have your Hello Wold in Backbone and intro to the View module. (Full code it’s here)
1.4.- Backbone’s Templates
Backbones has a utility/helper library called underscore.js and you can use their template solution out-of-the-box, but you can use any other template solution that you want like mustache or handlerbars. Let’s stick with _.js’s template for simplicity sake.
Underscore.js template has the following signature:
_.template(templateString, [data], [settings])
where in the
templateString you use the place holder
<%= %> and
<%- %> to substitute them with data. The later does HTML escape while the first one doesn’t. Moreover, you can use
Let’s see it in action and rewrite our Hello World using template instead.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Run the app again and verify that it’s working with the template.