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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video, we'll take a look at the libraries that we can use to fulfill the technical requirements of our application. Links: 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 let's take a look at the technical requirements for our app.
0:00
We're going to need a way to model our data, store our data,
0:03
and update our user interface whenever our data changes.
0:06
One of the best tools I've seen for handling this kind of interaction
0:10
is called backbone.js. documentcloud.github.com/backbone/
0:13
Backbone is a library that allows single-page JavaScript applications
0:18
to be structured in an organized way.
0:22
It is an MVC framework, which means Model View Controller,
0:25
and those are the parts of our application that are sort of separated
0:28
and allow us to organize it.
0:32
Now, in Backbone, we have a few different tools available to us
0:34
to allow us to make our applications communicate and organize themselves
0:38
much easier.
0:42
One is the Models, and Models allow us to create objects for our information.
0:44
For instance, a Model for our Note, which is the core piece of data in our application.
0:49
This will allow us to have properties of that Model, like its title,
0:55
its body, and its location data.
0:59
Now, another tool we're going to be able to use are Collections
1:02
which allow us to manage lists of these Models.
1:05
For instance, our list of Notes that we're viewing in our application.
1:08
and this will allow us to sort our information in different ways
1:12
and manage those collections.
1:16
Now, it has a controller, and what controllers are for
1:19
are for managing the different state transitions in our application.
1:22
For instance, moving from one page to another.
1:27
Now, we won't actually be taking advantage of the controllers in our application
1:29
because a lot of that is going to be handled by another library, jQuery Mobile,
1:33
which we'll see later.
1:38
But that's going to be part of our evaluation of looking at what libraries we can use
1:40
in our code.
1:44
We're going to be using some parts but not others, and we want to see
1:46
if the tool has a good overlap of what we need
1:49
versus what it's offering.
1:53
The history and sync are tools that allow us to manage the data
1:55
in our application as well as moving through our application.
1:58
We're not going to be using history as much because jQuery Mobile
2:02
will be able to handle that very well for us.
2:05
Finally, the View is going to actually manage the data that's presented to the user.
2:08
For instance, when we show a note in a list and see its title,
2:13
any time that the underlying model representing that note changes--
2:16
for instance, if we rename its title--
2:19
we want everywhere that it's presented to the user to be updated.
2:22
The View is what we can use to watch for changes on particular models
2:26
and update the actual HTML that's displayed to the user.
2:30
This is going to save us a lot of time and help us model our application more effectively.
2:34
Now, the other major library that we're going to be using in our application
2:41
is called jquerymobile.com.
2:44
jquerymobile.com is sort of a subproject of the jQuery framework
2:47
which aims to allow us to create mobile optimized applications and websites.
2:50
Right now as we record this, the current version is jQuery 1.0 Alpha 3,
2:56
which means that this is very new software and not really fully released
3:02
so this is something we need to take into account when we build our application.
3:07
Sometimes Alpha software can be really difficult to use
3:11
but sometimes it's good enough for us to use and obviously will only get better.
3:14
Now, let's take a look at some of the things that it can do.
3:20
I'm going to just click on the docs and demos here,
3:24
and we get a combination of the documentation for jQuery Mobile
3:26
as well as a live demonstration of what jQuery Mobile produces.
3:30
We can see that jQuery Mobile provides an interface that looks a lot like IOS.
3:34
For instance, we have these nice lists, it's separated onto multiple pages,
3:40
and we can transition between pages with nice animations,
3:44
and we can move back and forth, we have things like toolbars.
3:49
You can see that even though it's a mobile application,
3:54
it works pretty well in the desktop browser.
3:56
I'm using Chrome right now, which is the browser we'll actually be developing in,
3:59
but it also obviously works on mobile devices.
4:03
Now, Backbone and jQuery Mobile are the two main libraries we're going to be using,
4:07
but there's a few supporting libraries that we're going to need to use
4:12
in order to use Backbone and jQuery Mobile.
4:16
Now, backbone.js only has one major dependency,
4:20
and that's called Underscore.js documentcloud.github.com/underscore/
4:24
and Underscore.js is a utility library that provides helper functions
4:27
for things like iterating over collections and manipulating objects.
4:32
Underscore is actually a really great library to use even if you're not using Backbone.js.
4:38
It has a lot of cool functions that you may be used to from other languages
4:44
but without getting in the way of any of our other code.
4:48
All of the models are stored in a single Underscore object
4:52
and can be used without interfering with any of our other code.
4:55
Now, Backbone also will require us to use something like jQuery
4:59
or Zepto, which is another framework
5:03
in order to deal with things like the View
5:06
which will have to interact with the DOM, or Document Object Model
5:09
of our actual browser.
5:12
Now, we're going to choose to use jQuery
5:14
and that's because as the name might imply, jQuery Mobile requires jQuery to use.
5:17
jquery.com
5:25
jQuery, which you might be familiar with, having done web development,
5:26
allows us to manipulate the browser in a consistent and easy way.
5:29
So if we look at the technologies that we want to use,
5:34
we're looking at Backbone.js, which will handle storing our data
5:36
and updating any information that reflects our data in our application,
5:41
we're going to use jQuery Mobile to style the actual View of our application
5:45
to add things like pages, toolbars, lists, dialogues, and forms.
5:49
We're going to use the Underscore library as the utility library
5:55
and as a requirement of Backbone.js,
5:58
and we're going to be using jQuery, which is a requirement of jQuery Mobile,
6:01
which will allow us to manipulate the DOM in an easy way.
6:05
So next, let's take a look at the resources
6:08
we're going to be wanting to use during development of our application.
6:11
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