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 will download and organize the code for the libraries that we are using in our project. Backbone.js jQuery 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
[Jim Hoskins] Now I'm going to show you how to download all the libraries you'll need
0:00
for this application.
0:03
Of course, after this video was produced,
0:04
new versions of the library will be released
0:06
so I've packaged all of the versions that we're using
0:08
in the project files for this Master Class.
0:11
If you want to download the files yourself,
0:14
go ahead and try, although you may experience some new challenges
0:16
that aren't going to be addressed in this video.
0:19
[Libraries]
0:22
[?music?]
0:24
So now that we've looked at the tools and the documentation
0:26
that we're going to be using, let's actually start setting up our project.
0:29
Now, because we have so many libraries,
0:32
actually downloading all of the code we need is a step within itself,
0:34
so let's start downloading the libraries that we need.
0:38
Let's start with Backbone.js.
0:42
documentcloud.github.com/backbone/
0:44
So to download Backbone, we just go to the website
0:47
and we can get the Development Version and/or the Production Version
0:50
and this is going to be similar among all libraries.
0:55
The Production Veryersion is what we call minified,
0:58
meaning all the extra space and comments have been removed
1:03
in order to make it the smallest file size possible.
1:06
Now, while this is great for our final release,
1:09
it's actually pretty devastating to use when we're actually developing.
1:11
Because these are new libraries to us, we're going to be making mistakes.
1:15
We're going to be causing errors and they may be our fault;
1:18
they may be limitations of our tools.
1:21
But we're definitely going to want to be able to step through and debug the actual code
1:24
of the libraries we're using.
1:28
So in development, we want to have the un-minified, fully commented
1:30
and formatted version.
1:35
So I'm actually going to download both of them right now,
1:38
so all we need to do is Save As
1:42
and I'm going to navigate to my folder
1:47
and I want to save this first one in a .js folder in our project
1:51
and we'll call it Backbone.js.
1:56
And then, I want to also download the Production Version
2:06
which we won't use right away, but we'll save it under a different name
2:09
so we can change to the Production Version and see if it still works.
2:12
So we're going to do the same thing, and we'll just call it Backbone-min.js.
2:16
So now we have Backbone, but remember that Underscore
2:22
is also one of our dependencies in order to use Backbone.
2:25
So we can click on the Underscore.js to be taken to the page,
2:29
which I have open here.
2:32
documentcloud.github.com/underscore
2:34
And at the top of the page, we go down to Downloads
2:36
and again, we have the same Development Version and Production Version
2:38
available to us.
2:41
I'm going to download both of these into our project directory
2:43
so we can use both of them.
2:46
We'll use Development while we're developing
2:48
and switch over to Production right before we are ready to deploy it.
2:50
So we will Save link as underscore.js--
2:53
this is the full version,
2:58
and let's save the Production minified version
3:00
as underscore-min.js.
3:03
And so now we have Backbone and the Underscore .js
3:06
saved to our application.
3:10
The next thing we want to get is jQuery--
3:13
the just normal jQuery library--jquery.com
3:15
and we can get that from the webpage.
3:19
We can get the Production Version or the Development Version
3:21
and it'll just take us to this page and we can save this Production Version.
3:24
Well save this as jquery-1.5.1.min.js
3:31
and let's go back and also get the Development Version
3:38
and this version is fully commented and formatted,
3:42
so simply save this one as jquery-1.5.1.js without the "min."
3:46
And now, we have the Development and Production Versions of Backbone,
3:53
Underscore, and jQuery.
3:57
From the jQueryMobile website, we can click on Download
4:00
and we'll be taken to this page: jquerymobile.com/download/
4:03
And on the Download page, they offer us the CD and Hosted Version,
4:07
which is available for jQuery itself and is something that we can use in production.
4:11
It's basically a version of the JavaScript and CSS hosted on a separate server,
4:15
which will allow for faster serving and caching.
4:21
But for development purposes, let's just download the ZIP file
4:25
that contains the JavaScript, CSS, and images that we need.
4:29
We'll just go ahead and click this,
4:32
and we'll open this ZIP file and see that we get an images directory,
4:37
JavaScript, and CSS, both compressed and normal.
4:41
So let's add these to our project.
4:46
So I have our web directory here for our project
4:49
and I'll take the CSS files--both compressed and normal--
4:52
and I'll drop them into the CSS directory.
4:56
I'll also take the images directory and I'm also going to place that in CSS
5:00
so the CSS files can find the images that are used in jQuery Mobile.
5:04
And then, I'll just take the JavaScript files
5:09
and drop them into our JavaScript folder.
5:12
So if we look under JavaScript, we have Backbone, jQuery, jQuery Mobile, Underscore;
5:15
and in our CSS, all we need is the jQuery CSS
5:21
and the images associated with that.
5:25
From there, we can go back to our text editor and begin working.
5:28
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