Well done!

You have completed HTML5 Mobile Web Applications!

Preview

HTML5 Mobile UI: Requirements: Part 2

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[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