(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:
- JBoss Portals and AJAX – Part 1 [Article]
- Getting Started with Zombie.js [Article]
- DWR Java AJAX User Interface: Basic Elements (Part 1) [Article]
