Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we become acquainted with the documentation of the tools that we'll be using. Links: Backbone.js Backbone: Todo Application jQuery jQuery API jQuery Mobile Underscore.js
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Documentation]
0:00
[?music?]
0:03
[Jim Hoskins] So now that we've seen the tools that we want to use,
0:05
the last, most important tool that we can use
0:08
is actually the documentation for all of the libraries that we're about to use.
0:11
Now, the documentation, obviously, is the way we're going to learn
0:14
what the capabilities of our libraries are and how to use them.
0:18
So starting from Backbone, the documentation for Backbone is at its homepage.
0:22
For documentcloud.github.com/backbone
0:27
I definitely recommend you give the documentation a good read
0:31
before we begin our application.
0:35
This will allow you to understand what the framework is capable of.
0:37
It's a little bit long, but you can skim through a lot of it.
0:44
It has a lot of good code examples
0:46
and can really get you an idea of what's available in the framework.
0:48
Now, the next most important thing is actually at the bottom of Backbone.js.
0:53
There's a section with examples.
0:57
Examples are really good because they give you an idea
0:59
of what the actual application can do
1:02
and allow you to see the code that implemented it in a practical example.
1:06
Now, the best one is the first example in the examples documentation,
1:11
this Todo list application.
1:15
I've opened it up on this tab here.
1:18
This application is a simple to-do list application
1:20
that is implemented on one page using Backbone.js.
1:24
documentcloud.github.com/backbone/examples/todos/index.html
1:27
So you could do Task one,
1:29
task 2
1:31
and check them off.
1:33
Now, this is a particularly good example for us to use and understand the source code for
1:35
because it mirrors our application very closely.
1:39
While this is doing Todo lists, we're doing Notes,
1:42
which are very similar in that we're just creating new things and storing them.
1:45
Also, this application uses localStorage as its backend
1:50
in order to store the data locally on the machine.
1:53
Now, one of the cool things about this application is that the source code is available
1:57
and well-commented.
2:01
You can click on this link right down here to view the annotated source,
2:03
which I have open in this tab.
2:06
And this is the source code on the right-hand side
2:09
and all of the comments explaining what the code does on the left.
2:12
So I'd recommend taking a look at this source code, too.
2:16
That way, we can see how an actual Backbone application is constructed
2:19
and how models, collections, and views all work together
2:23
to create a single page offline application.
2:27
One of Backbone's dependencies, called _js,
2:30
is also another tool we're going to want to have documentation for.
2:34
documentcloud.github.com/underscore/
2:37
_js just simply has a bunch of methods
2:39
that allow us to iterate over collections, manage arrays,
2:42
manage functions and objects.
2:45
It's a really cool library, and if you haven't used it before,
2:48
take a look at some of these methods and look at the documentation
2:50
and see examples of how to use them.
2:53
Some of these methods are used in the Backbone code
2:56
and made available to us sort of as wrappers for these methods,
2:59
so understanding how they work in underscore
3:03
will allow us to use the Backbone code more effectively.
3:06
Now, besides just using the underscore methods that are exposed in Backbone,
3:09
it's also good to know how underscore works because you can use it to your advantage
3:13
when just doing normal coding and underscore is available to you.
3:17
The next tool is Query, and if you're not familiar with jQuery,
3:20
this is the site, jquery.com
3:24
and having the jQuery API available is a great thing to have.
3:27
It's at api.jquery.com
3:30
and it has all the methods you need to know in order to use jQuery.
3:33
Having this tool open is always a great thing
3:37
because sometimes you just forget how to use a specific method
3:39
or how to do a certain action in jQuery.
3:42
Now obviously, our last thing is jQuery Mobile
3:44
and that's available at jquerymobile.com.
3:47
We've already seen a little bit of the documentation
3:50
and the demo code and they're all one thing,
3:53
so click on the Documentation and Demos and you'll be taken to this page.
3:56
I highly recommend going over every page on this documentation
4:00
not only because it will show you how jQuery Mobile works,
4:04
but it's also a demonstration app so you can see a lot of the different effects
4:08
and tools in action.
4:13
For instance, we can go down to the Pages & dialogs
4:15
and not only learn how to create different pages
4:19
but learn about the different page transitions available,
4:22
such as sliding up and down,
4:25
popping,
4:27
and other transitions.
4:29
So just taking an exploratory view of this entire documentation
4:32
and demo application is going to be really, really helpful.
4:36
Now, you may want to use a bookmark manager
4:40
or just keep all these tabs open in a separate window
4:42
so all of the documentation and example code you need
4:45
is available at one click.
4:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up