[Documentation]

[?music?]

[Jim Hoskins] So now that we've seen the tools that we want to use,

the last, most important tool that we can use

is actually the documentation for all of the libraries that we're about to use.

Now, the documentation, obviously, is the way we're going to learn

what the capabilities of our libraries are and how to use them.

So starting from Backbone, the documentation for Backbone is at its homepage.

For documentcloud.github.com/backbone

I definitely recommend you give the documentation a good read

before we begin our application.

This will allow you to understand what the framework is capable of.

It's a little bit long, but you can skim through a lot of it.

It has a lot of good code examples

and can really get you an idea of what's available in the framework.

Now, the next most important thing is actually at the bottom of Backbone.js.

There's a section with examples.

Examples are really good because they give you an idea

of what the actual application can do

and allow you to see the code that implemented it in a practical example.

Now, the best one is the first example in the examples documentation,

this Todo list application.

I've opened it up on this tab here.

This application is a simple to-do list application

that is implemented on one page using Backbone.js.

documentcloud.github.com/backbone/examples/todos/index.html

So you could do Task one,

task 2

and check them off.

Now, this is a particularly good example for us to use and understand the source code for

because it mirrors our application very closely.

While this is doing Todo lists, we're doing Notes,

which are very similar in that we're just creating new things and storing them.

Also, this application uses localStorage as its backend

in order to store the data locally on the machine.

Now, one of the cool things about this application is that the source code is available

and well-commented.

You can click on this link right down here to view the annotated source,

which I have open in this tab.

And this is the source code on the right-hand side

and all of the comments explaining what the code does on the left.

So I'd recommend taking a look at this source code, too.

That way, we can see how an actual Backbone application is constructed

and how models, collections, and views all work together

to create a single page offline application.

One of Backbone's dependencies, called _js,

is also another tool we're going to want to have documentation for.

documentcloud.github.com/underscore/

_js just simply has a bunch of methods

that allow us to iterate over collections, manage arrays,

manage functions and objects.

It's a really cool library, and if you haven't used it before,

take a look at some of these methods and look at the documentation

and see examples of how to use them.

Some of these methods are used in the Backbone code

and made available to us sort of as wrappers for these methods,

so understanding how they work in underscore

will allow us to use the Backbone code more effectively.

Now, besides just using the underscore methods that are exposed in Backbone,

it's also good to know how underscore works because you can use it to your advantage

when just doing normal coding and underscore is available to you.

The next tool is Query, and if you're not familiar with jQuery,

this is the site, jquery.com

and having the jQuery API available is a great thing to have.

It's at api.jquery.com

and it has all the methods you need to know in order to use jQuery.

Having this tool open is always a great thing

because sometimes you just forget how to use a specific method

or how to do a certain action in jQuery.

Now obviously, our last thing is jQuery Mobile

and that's available at jquerymobile.com.

We've already seen a little bit of the documentation

and the demo code and they're all one thing,

so click on the Documentation and Demos and you'll be taken to this page.

I highly recommend going over every page on this documentation

not only because it will show you how jQuery Mobile works,

but it's also a demonstration app so you can see a lot of the different effects

and tools in action.

For instance, we can go down to the Pages & dialogs

and not only learn how to create different pages

but learn about the different page transitions available,

such as sliding up and down,

popping,

and other transitions.

So just taking an exploratory view of this entire documentation

and demo application is going to be really, really helpful.

Now, you may want to use a bookmark manager

or just keep all these tabs open in a separate window

so all of the documentation and example code you need

is available at one click.