1 00:00:00,000 --> 00:00:03,000 [Requirements] 2 00:00:03,000 --> 00:00:06,000 [?music?] 3 00:00:06,000 --> 00:00:09,000 [Jim Hoskins] So the requirements for our application: 4 00:00:09,000 --> 00:00:13,000 first, it's mobile, so we want it to at least work on the iPhone, 5 00:00:13,000 --> 00:00:17,000 Android, and hopefully any other devices that are advanced enough 6 00:00:17,000 --> 00:00:20,000 for our other requirements. 7 00:00:20,000 --> 00:00:23,000 Second, we want it to be an offline application 8 00:00:23,000 --> 00:00:26,000 and that will require us to store our data on the device 9 00:00:26,000 --> 00:00:31,000 as well as have some facility for the device to be able to store the application 10 00:00:31,000 --> 00:00:36,000 in a cache, and that is something that HTML5 will allow us to do. 11 00:00:36,000 --> 00:00:39,000 Finally, we want it to be location aware, 12 00:00:39,000 --> 00:00:43,000 so we need some way to get geolocation data from the device. 13 00:00:43,000 --> 00:00:47,000 Again, the HTML5 geolocation API provides just that, 14 00:00:47,000 --> 00:00:50,000 but we also need to make sure that any device we plan on supporting 15 00:00:50,000 --> 00:00:53,000 support HTML5 geolocation. 16 00:00:53,000 --> 00:00:57,000 Fortunately, the support for geolocation is even stronger on mobile devices 17 00:00:57,000 --> 00:01:00,000 than it is on desktop browsers 18 00:01:00,000 --> 00:01:03,000 because obviously, mobile devices would have more of a need for geolocation 19 00:01:03,000 --> 00:01:06,000 as the devices move around more. 20 00:01:06,000 --> 00:01:10,000 Now, if we take these requirements and we start looking at how they break down 21 00:01:10,000 --> 00:01:14,000 into technical requirements that will inform how we develop our application, 22 00:01:14,000 --> 00:01:18,000 we see that since we want it to be offline, we're going to basically have to make this 23 00:01:18,000 --> 00:01:20,000 all in JavaScript. 24 00:01:20,000 --> 00:01:24,000 We can't communicate with a server, for instance, having a different HTML page 25 00:01:24,000 --> 00:01:28,000 for each Note or having the data stored in a remote server. 26 00:01:28,000 --> 00:01:32,000 Everything's going to have to happen locally on a single page 27 00:01:32,000 --> 00:01:34,000 in the browser using JavaScript. 28 00:01:34,000 --> 00:01:40,000 So basically we're going to be using one HTML page for our entire application. 29 00:01:40,000 --> 00:01:42,000 That means we're going to need to do some magic 30 00:01:42,000 --> 00:01:46,000 in order to make it look like it's on multiple pages on a web application. 31 00:01:46,000 --> 00:01:50,000 The next thing is we're going to have to store all of our data locally. 32 00:01:50,000 --> 00:01:53,000 We can't use a remote server with a database 33 00:01:53,000 --> 00:01:57,000 in order to store our information and to recall it later. 34 00:01:57,000 --> 00:02:00,000 Now, this has some benefits, as it's obviously faster 35 00:02:00,000 --> 00:02:02,000 since all the data will be stored locally, 36 00:02:02,000 --> 00:02:06,000 but it has some down sides since by default, our data will not be stored 37 00:02:06,000 --> 00:02:10,000 anywhere but the device, so if somebody wants to access their data on another device, 38 00:02:10,000 --> 00:02:14,000 that's going to require some extra code in order to synchronize 39 00:02:14,000 --> 00:02:17,000 between different local storage devices. 40 00:02:17,000 --> 00:02:20,000 Now, there are a few ways we could store data. 41 00:02:20,000 --> 00:02:25,000 One of the classic ways is to use cookies, which have been around in the web forever, 42 00:02:25,000 --> 00:02:31,000 and that would allow us to store small bits of information locally on the device. 43 00:02:31,000 --> 00:02:35,000 However, HTML5 brings us the localStorage API, 44 00:02:35,000 --> 00:02:41,000 which provides a key value store that will us to easily store data locally on the device. 45 00:02:41,000 --> 00:02:45,000 The main benefits of this is there's going to be a much larger capacity 46 00:02:45,000 --> 00:02:47,000 compared to cookies. 47 00:02:47,000 --> 00:02:49,000 In a cookie you really wouldn't want to store 48 00:02:49,000 --> 00:02:52,000 more than a few kilobytes of information. 49 00:02:52,000 --> 00:02:56,000 Cookies are not a great place to store data because all of that cookie data 50 00:02:56,000 --> 00:03:00,000 will be uploaded for every request to a server, 51 00:03:00,000 --> 00:03:03,000 basically so the server can read that data, too, 52 00:03:03,000 --> 00:03:05,000 and that will slow everything down. 53 00:03:05,000 --> 00:03:08,000 In our application, that's not much of a concern 54 00:03:08,000 --> 00:03:10,000 because we won't be making any server requests, 55 00:03:10,000 --> 00:03:13,000 but it's always a good consideration when storing data locally 56 00:03:13,000 --> 00:03:18,000 to consider how cookies send the information to the server. 57 00:03:18,000 --> 00:03:21,000 Now, localStorage also has a much easier API for storing data. 58 00:03:21,000 --> 00:03:25,000 It looks a lot like an object and we simply need to assign keys and values 59 00:03:25,000 --> 00:03:28,000 and the browser will store that data for us. 60 00:03:28,000 --> 00:03:33,000 We don't need to worry about encoding it like we do when we store data into cookies. 61 00:03:33,000 --> 00:03:36,000 Since all of our information is on a single page 62 00:03:36,000 --> 00:03:40,000 and we're doing a lot of manipulation--for instance, creating New Notes 63 00:03:40,000 --> 00:03:45,000 or editing existing Notes--we need a way to handle those data changes 64 00:03:45,000 --> 00:03:46,000 on our page. 65 00:03:46,000 --> 00:03:51,000 For instance, a single Note might be represented on its showing page 66 00:03:51,000 --> 00:03:53,000 where the actual details of the Note exist, 67 00:03:53,000 --> 00:03:56,000 and a Note's information may also appear on several lists 68 00:03:56,000 --> 00:03:59,000 as well as in things like Edit forms. 69 00:03:59,000 --> 00:04:03,000 So anytime there's a change, we're going to need to update those changes 70 00:04:03,000 --> 00:04:07,000 everywhere that the information is represented on the page. 71 00:04:07,000 --> 00:04:10,000 Since everything's being handled on one page 72 00:04:10,000 --> 00:04:14,000 but our interface makes it flow like there's several separate pages, 73 00:04:14,000 --> 00:04:16,000 we need a way to manage our page 74 00:04:16,000 --> 00:04:20,000 and make it appear like it's a multi-page application. 75 00:04:20,000 --> 00:04:24,000 Now, finally, if we want our application to be really offline, 76 00:04:24,000 --> 00:04:27,000 we need a way to cache all of the resources 77 00:04:27,000 --> 00:04:32,000 including the HTML, JavaScript, CSS, and images, 78 00:04:32,000 --> 00:04:37,000 so we're going to need a way for the browser to store all of that information 79 00:04:37,000 --> 00:04:39,000 on the device itself. 80 00:04:39,000 --> 00:04:43,000 The HTML5 Application Cache offers us a great way to do that 81 00:04:43,000 --> 00:04:47,000 in that it will store all of our resources, including HTML, JavaScript, 82 00:04:47,000 --> 00:04:52,000 images, and other resources on the device as we specify it. 83 00:04:52,000 --> 00:04:55,000 That way, the user only needs to visit our website once 84 00:04:55,000 --> 00:04:58,000 to cache the application. 85 00:04:58,000 --> 00:05:01,000 Then, the next time they launch it, if they're unable to reach our website again, 86 00:05:01,000 --> 00:05:06,000 the device will serve the last version that was cached on the device, 87 00:05:06,000 --> 00:05:08,000 so it's truly offline. 88 00:05:08,000 --> 00:05:11,000 So looking at these requirements, there's a few different strategies 89 00:05:11,000 --> 00:05:13,000 we could use to develop this application. 90 00:05:13,000 --> 00:05:15,000 We could develop all of this from scratch, 91 00:05:15,000 --> 00:05:19,000 including ways to create transitions between pages, 92 00:05:19,000 --> 00:05:23,000 serialize the data into the HTML5 localStorage, 93 00:05:23,000 --> 00:05:27,000 manage changes to the data every time we update things, 94 00:05:27,000 --> 00:05:31,000 or we could use libraries to handle a lot of these problems for us 95 00:05:31,000 --> 00:05:35,000 and see if we can integrate them together to save us a lot of time in development. 96 00:05:35,000 --> 00:05:40,000 So let's take a look at what these technologies are and if they'll fit our application.