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