Building an app using Backbone.js

Exclusive offer: get 80% off this eBook here
Instant Backbone.js Application Development [Instant]

Instant Backbone.js Application Development [Instant] — Save 80%

Build your very first Backbone.js application covering all the essentials with this easy-to-follow introductory guide with this book and ebook

₨387.00    ₨77.40
by Thomas Hunter II | July 2013 | Web Services Open Source Web Development

In this article by Thomas Hunter II author of Instant Backbone.js Application Development, we will develop a simple application using Backbone.js. Backbone is a JavaScript library with a RESTful JSON interface, and is based on the model-view-presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. It is designed for developing single page web applications and for keeping various parts of web applications (for example, multiple clients and the server) synchronized.

(For more resources related to this topic, see here.)

Building a Hello World app

For building the app you will need the necessary script files and a project directory laid out. Let's begin writing some code. This code will require all scripts to be accessible; otherwise we'll see some error messages. We'll also go over the Web Inspector and use it to interact with our applications. Learning this tool is essential for any web application developer to proficiently debug (and even write new code for) their application.

Step 1 – adding code to the document

Add the following code to the index.html file. I'm assuming the use of LoDash and Zepto, so you'll want to update the code accordingly:

<!DOCTYPE HTML> <html> <head> <title>Backbone Application Development Starter</title> <!-- Your Utility Library --> <script src ="scripts/lodash-1.3.1.js"></script> <!-- Your Selector Engine --> <script src ="scripts/zepto-1.0.js"></script> <script src ="scripts/backbone-1.0.0.js"></script> </head> <body> <div id="display"> <div class ="listing">Houston, we have a problem.</div> </div> </body> <script src ="scripts/main.js"></script> </html>

This file will load all of our scripts and has a simple <div>, which displays some content. I have placed the loading of our main.js file after the closing <body> tag. This is just a personal preference of mine; it will ensure that the script is executed after the elements of the DOM have been populated. If you were to place it adjacent to the other scripts, you would need to encapsulate the contents of the script with a function call so that it gets run after the DOM has loaded; otherwise, when the script runs and tries to find the div#display element, it will fail.

Step 2 – adding code to the main script

Now, add the following code to your scripts/main.js file:

var object = {};
_.extend(object, Backbone.Events);
object.on("show-message", function(msg) {
$('#display .listing').text(msg);
});
object.trigger("show-message", "Hello World");

Allow me to break down the contents of main.js so that you know what each line does.

var object = {};

The preceding line should be pretty obvious. We're just creating a new object, aptly named object, which contains no attributes.

_.extend(object, Backbone.Events);

The preceding line is where the magic starts to happen. The utility library provides us with many functions, one of which is extend. This function takes two or more objects as its arguments, copies the attributes from them, and appends them to the first object. You can think of this as sort of extending a class in a classical language (such as PHP).

Using the extend utility function is the preferred way of adding Backbone functionality to your classes. In this case, our object is now a Backbone Event object, which means it can be used for triggering events and running callback functions when an event is triggered. By extending your objects in this manner, you have a common method for performing event-based actions in your code, without having to write one-off implementations.

object.on("show-message", function(msg) {
$('#display .listing').text(msg);
});

The preceding code adds an event listener to our object. The first argument to the on function is the name of the event, in this case show-message. This is a simple string that describes the event you are listening for and will be used later for triggering the events. There isn't a requirement as far as naming conventions go, but try to be descriptive and consistent.

The second argument is a callback function, which takes an argument that can be set at the time the event is triggered. The callback function here is pretty simple; it just queries the DOM using our selector engine and updates the text of the element to be the text passed into the e vent.

object.trigger("show-message", "Hello World");

Finally, we trigger our event. Simply use the trigger function on the object, tell it that we are triggering the show-message event, and pass in the argument for the trigger callback as the second argument.

Step 3 – opening the project in your browser

This will show us the text Hello World when we open our index.html file in our browser. Don't believe me? Double click on the file now, and you should see the following screen:

If Chrome isn't your default browser, you should be able to right-click on the file from within your file browser and there should be a way to choose which application to open the file with. Chrome should be in that list if it was installed properly.

Step 4 – encountering a problem

Do you see something other than our happy Hello World message? The code is set up in a way that it should display the message Houston , we have a problem if something were to go wrong (this text is what is displayed in the DOM by default, before having JavaScript run and replace it).

The missing script file

The first place to look for the problem is the Network tab of the Web Inspector. This tab shows us each of the files that were downloaded by the browser to satisfy the rendering of the page. Sometimes, the Console tab will also tell us when a file wasn't properly downloaded, but not always. The following screenshot explains this:

If you look at the Network tab, you can see an item clearly marked in red ( backbone-1.0.0.js ). In my project folder, I had forgotten to download the Backbone library file, thus the browser wasn't able to load the file. Note that we are loading the file from the local filesystem, so the status column says either Success or Failure . If these files were being loaded from a real web server, you would see the actual HTTP status codes, such as 200 OK for a successful file download or 404 Not Found for a missing file.

The script typo

Perhaps you have made a typo in the script while copying it from the book. If you have any sort of issues resulting from incorrect JavaScript, they will be visible in the Console tab, as shown in the following screenshot:

In my example, I had forgotten the line about extending my object with the Backbone events class. Having left out the extend line of code caused the object to be missing some functionality, specifically the method on(). Notice how the console displays which filename and line number the error is on.

Feel free to remove and add code to the files and refresh the page to get a feel for what the errors look like in the console. This is a great way to get a feel for debugging Backbone-based (and, really, any JavaScript) applications.

Summary

In this article we learned how to develop an app using Backbone.js.

Resources for Article :


Further resources on this subject:


Instant Backbone.js Application Development [Instant] Build your very first Backbone.js application covering all the essentials with this easy-to-follow introductory guide with this book and ebook
Published: July 2013
eBook Price: ₨387.00
See more
Select your format and quantity:

About the Author :


Thomas Hunter II

Thomas Hunter II is a Jack of all trades with over eight years of open source web development experience. This includes backend PHP / Node.js programming, MySQL / MongoDB database engineering, and frontend programming with JavaScript. He’s even done plenty of graphic design, game development, and music composition.

Books From Packt


 Backbone.js Testing
Backbone.js Testing

 Learning Modernizr
Learning Modernizr

Backbone.js Cookbook
Backbone.js Cookbook

Instant Dependency Management with RequireJS How-to [Instant]
Instant Dependency Management with RequireJS How-to [Instant]

 RESTful Java Web Services
RESTful Java Web Services

 RESTful PHP Web Services
RESTful PHP Web Services

 HTML5 iPhone Web Application Development
HTML5 iPhone Web Application Development

 CoffeeScript Programming with jQuery, Rails, and Node.js
CoffeeScript Programming with jQuery, Rails, and Node.js


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software