Book Image

Backbone.js Blueprints

By : Andrew Burgess
Book Image

Backbone.js Blueprints

By: Andrew Burgess

Overview of this book

<p>Backbone.js is an open source, JavaScript library that helps you to build sophisticated and structured web apps. It's important to have well-organized frontend code for easy maintenance and extendability. With the Backbone framework, you'll be able to build applications that are a breeze to manage.<br /><br />In this book, you will discover how to build seven complete web applications from scratch. You'll learn how to use all the components of the Backbone framework individually, and how to use them together to create fully featured applications. In addition, you'll also learn how Backbone thinks so you can leverage it to write the most efficient frontend JavaScript code.<br /><br />Through this book, you will learn to write good server-side JavaScript to support your frontend applications. This easy-to-follow guide is packed with projects, code, and solid explanations that will give you the confidence to write your own web applications from scratch.</p>
Table of Contents (14 chapters)
Backbone.js Blueprints
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Preface

There was a time when if you wanted to build a web application, you were pretty much on your own. You had to start from scratch and figure it all out on your own. However, now there are plenty of libraries and frameworks that you can use to build amazing web apps that are full of features; Backbone is just one of those libraries.

Backbone is a client-side library that offers models to manage data records, collections to use when working with sets of models, and views to display that data. Strictly speaking, it's not an MVC library, it's a relatively loose toolbox that you can use in many different ways.

This book is not an introduction to Backbone. We won't be going through every feature in the library as if it were a friendly version of the documentation. Instead, we'll be looking at Backbone in the context of building an entire web application from start to finish. This means that there are a few features of Backbone—a few obscure methods or properties—that we won't use at all. If you want to learn every nook and cranny of Backbone, you should read the documentation at http://backbonejs.org/.

This book has two goals. The first is to teach you how to use Backbone to build complete web applications. A complete web application will have a lot more than just JavaScript that runs in the browser. There's HTML and CSS to consider, and of course, every application needs a server. In each chapter of this book, we'll build a different application from scratch, and we'll need to create all these components. Of course, these will be applications with heavy client sides, so most of the code we will write will use Backbone. However, because we're building complete applications, you'll get to see how our Backbone code will work in tandem with the rest of the code.

The other goal of this book is to teach you how Backbone thinks. As we build an application, we'll use as many different techniques as we possibly can. While there are many Backbone conventions, most of them are not actually necessary for your code to work. By learning what is required, you can fulfill those requirements and write the rest of your code as you see fit, following convention or not.

What this book covers

Chapter 1, Building a Simple Blog, introduces you to each of the main components of Backbone and how they work together. If you haven't used Backbone before, this is important groundwork; if you have, this will be your refresher on the purpose of each Backbone piece.

Chapter 2, Building a Photo-sharing Application, shows you how to build a photo sharing website similar to Instagram. Among other things, you'll learn how to customize the way Backbone models are sent to and received from the server. This is because we'll be using a Backbone model to upload files.

Chapter 3, Building a Live Data Dashboard, takes things to the next level by building an application that continually polls the server for changes to a dataset, effectively creating a live application. We'll also look at better code organization.

Chapter 4, Building a Calendar, will continue the theme of building apps with well-organized code. We'll also learn about properly distributing application functionality.

Chapter 5, Building a Chat Application, goes in a different direction by using Socket.IO to control the transfer of data between the client and the server. Also, we'll use the Marionette framework to make our jobs a little easier.

Chapter 6, Building a Podcast Application, shows that not every Backbone application is client-side code, some applications will have a lot of server code. We'll also look at building some custom infrastructure to work with Backbone.

Chapter 7, Building a Game, wraps up the book with a fun project. We'll review all the main components of Backbone, as well as building non-Backbone pages to create a more complete web application. Of course, we'll also have to write the game logic.

What you need for this book

Since this book is mostly about client-side code, the main tools are a text editor and a browser. However, there are a few others you'll need. You'll have to install Node.js (http://nodejs.org), which comes with npm, the Node package manager. If you're on a Mac, that's all you'll need. However, if you are on Windows, you'll also want to have a version of Python 2 (preferably 2.7.3) and Express 2013 for Windows Desktop; you'll need these to install the bcrypt Node.js package for some of the chapters.

Who this book is for

This book is written for anyone who wants to learn the Backbone library proficiently; by building seven very different applications, you'll quickly learn all the ins and outs of Backbone. Hopefully, you'll also improve your coding skills, for both client and server coding.

Of course, you'll need to know a few things before we get started. You should have a decent working knowledge of JavaScript. More nuanced language features will be explained in the text, but you should be able to hold your own most of the time. Also, all the server code we write will be in Node.js, so you'll want to be familiar with that. If you understand that Node.js code is often asynchronous and that's why it uses callbacks, you'll be fine. You'll want to be familiar with HTML and CSS; while they will not feature heavily, they will have their parts to play.

You might wonder if you need to be familiar with Backbone at all to benefit from this book. You'll probably be a little more comfortable with it all if you understand the basics of Backbone, and what the general purposes of its main components are. However, if you've not used it, don't worry. The very first chapter will introduce you to all the parts of Backbone by using them in a simple application.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Next, we can create a file named app.js in the public directory."

A block of code is set as follows:

var Posts = Backbone.Collection.extend({
  model: Post,
  url: "/posts"
});

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

var User = Backbone.Model.extend({
  url: function () {
    return '/user-' + this.get('id') + '.json';
  }
});

Any command-line input or output is written as follows:

npm install passport --save

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Type in a name and click on Join, and the name will appear above in the list."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.