In this recipe, we are going to talk about how to create a Backbone project from scratch. There is important information of which we should be aware when dealing with the later chapters of this book.
We are going to speak about Backbone dependencies and the directory structure for our project. Let's follow the ensuing guidelines:
Visit http://backbone.js and download the Backbone.js library. There are several versions available: production, development, and an edge version.
You can use the production version for the best performance because it has been optimized and minimized. The development version may be good to use when working on the application, so you can use the code completion and debugging features of your IDE. And finally, you can use the edge version of Backbone, but do it at your own risk, because it may not be fully tested.
Download Backbone dependencies.
Backbone.js depends on the Underscore.js library, which can be downloaded from http://underscorejs.org. Underscore is also shipped in three different versions.
Also, Backbone.js depends on either the jQuery or Zepto libraries. These libraries have the same syntax and both provide useful functionality to the developer. They simplify work with the document tree, event handling, AJAX, and JavaScript animations.
For many examples in this book, we are going to use the jQuery library, which can be downloaded from http://jquery.com. It is provided with both the development and production versions.
Create a project directory structure.
If you follow a specific directory structure, it would be easier to find any file and work with it, because such an application structure brings more order into your project. Here is an example of a directory structure that can be used by a simple Backbone application:
lib/: This is a directory for third-party libraries, such as the following:
backbone.js: This is the source code of Backbone.js
underscore.js: This is the source code of Underscore.js
jquery.js: This has sources of jQuery
js/: This is the directory of the project's JavaScript files.
main.js: This is the main JavaScript file that has been used in the project
index.html: This is the main file of our application.
Create the main file of the application, which is index.html. It should include third-party libraries and your application files, as shown in the following code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Backbone.js Cookbook – Application Template</title> <script src="lib/jquery.js"></script> <script src="lib/underscore.js"></script> <script src="lib/backbone.js"></script> <script src="js/main.js"></script> </head> <body></body> </html>Create the main JavaScript file named main.js that will contain the code of your application.
(function($){ // Your code is here })(jQuery);As we include our scripts into the head tag, they are executed before the body content is processed by a browser and before the whole HTML document is loaded.
In a Backbone application, as in many other JavaScript applications, we want to make sure our program starts to run right after the document is loaded, so main.js should look like the following code snippet:
(function($){ // Object declarations goes here $(document).ready(function () { // Start application code goes here }); })(jQuery);