HTML5 Mobile UI: Documentation

[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