Intro to jQuery Mobile - jQuery Mobile Tutorial

Okay, let's begin by talking about what is jQuery Mobile. jQuery Mobile is a cross platform way of building mobile web apps. Now, remember, these are not native applications, these are web applications and jQuery Mobile is a cross platform framework for building these mobile web apps. It works with the jQuery library which is really popular, it's probably one of the most popular JavaScript libraries out there today, and it's built on top of the jQuery library architecture. jQuery Mobile relies on HTML5, CSS3, JavaScript and AJAX to do its work and all of these are modern Web technologies that are pretty widely implemented across most modern browsers. jQuery Mobile enhances existing Web pages with a consistent look across multiple modern mobile OSs. Like Android, and iOS, and BlackBerry, and Windows Phone, and so on. So, by using the jQuery Mobile library, you can give your application a consistent look and feel, and it's configurable enough where you can define your own CSS themes, so that for individual platforms you can make the application look native to that platform in the platform's web browser. jQuery Mobile has some advantages and some disadvantages. So, let's go through these. One advantage is that it uses familiar HTML5 technologies to build native-looking apps. So, there's nothing really new to learn here. If you already know HTML5 and JavaScript then you're pretty well on your way towards being able to build really great mobile web apps just by using jQuery Mobile. Now, compare that to how you'd need to do it if you wanted to build native applications. If you wanted to build native apps for all these different platforms, you'd have to learn C#, and C++, and Java, and, you know, various different APIs and so on. However, jQuery Mobile, since it's the web, if you already know web technologies then you have a pretty good head start. jQuery Mobile works across multiple platforms using one language, so you build your modern mobile web app first, and then it works on not only the platforms that we have today, but if other mobile platforms come along that include standard scalable browsers your app should just continue to work. Again, it provides a consistent look and feel for mobile apps. You don't have to do a lot of work to make your application look good and behave well across different mobile platforms. And it's small and lightweight, and modular. So, you only have to use what you really need. You don't have to include a lot of stuff that you don't use in your app. Now, there are some disadvantages. First, jQuery Mobile relies on whatever the platform's browser is, and as we've all seen on the desktop world, not all browsers support all of the library's features. Now, this has gotten much, much better in recent years. Specially with the rise of Android 4 and iOS 7, you've got some really nice mobile browsers now that pretty much implement all of what jQuery Mobile needs, and the other mobile platforms are getting better, too, so this isn't as much of a disadvantage as it used to be. Now, of course, this is the web, so jQuery Mobile doesn't provide native access to some platform features. If your application really needs to access, say, the microphone or battery information, or some other capability native to that platform, you're not going to be able to do it unless the platform's browser supports it. And, because it's JavaScript which, you know, is an interpreted language, performance is not going to be as fast as native applications. Now, that's not to say that the performance won't be good, because you will be able build fast apps. The only difference is that when you're using native code, it's compiled for the platform, and so, just by its very nature, it's going to run slightly faster. But that doesn't mean you can't build highly performant web apps using jQuery Mobile. Okay, let's take a look at some examples of websites that have been built, using jQuery Mobile. I'm here, on the jquerymobile.com/resources page, and you can see that they feature some sites that have been built using jQuery Mobile, such as OpenTable, and Disney World and Dodge, for example. In fact, this page is a really great resource for learning about a lot of things that go along with jQuery Mobile such as sites, there's books, apps, and frameworks that work along with jQuery Mobile, and so on. So, let's take a look at some of these sites in depth. Now, what I'm going to do is display these sites in Firefox on the desktop. But, with the windows scaled down to be about the size of what a mobile browser would be. And I'm going to do this, again, so we don't have to install any simulators or development tools or anything like that. So, let me just jump over to Firefox and scale the window down and we'll take a look at a few of these sites. Okay, so here in the Firefox browser, I've scaled the window down. And let's start out by looking at OpenTable. And you can see that this is the OpenTable site and it's showing me restaurants in San Francisco, California and I can do things like change number of people, I can change the day that I want, I can change the time that I want and you can see that it's updating the list as I make my changes. I can also click on the Menu up here. All right, I get a nice little menu there, and you can see I can refine my search by rating and distance. But the point is, if you look at the way this application is laid out, it's really nice. Right, the styles are really well done, the application looks nice and native. All right, we have a pretty common list view here for choosing restaurants. So, this is a really nice looking site. Again, built using jQuery Mobile, and it's available at m.opentable.com, and that's this URL right here. Alright, let's take a look at another one. Here's the website for Stanford University. And again, you can, just looking at this, you can see that this looks nicely designed for mobile devices. We have our list view here with various links. I can click on the news link for example, and get information about news going on around campus, I can go back to the main page, I can learn more about the contact directory, I can learn more about the various schools that they have. Alright? So again, nice job done by Stanford University to build a mobile optimized website using jQuery Mobile. Alright, let's take a look at one more. This is the website for Dodge. And again, this is m.dodge.com. And you can see that they were able to implement a little side drawer menu just like you would using a native app. And I can get information about the various vehicles. I can get information about the various sales they have going on. Here's a little carousel that they built using jQuery mobile. So again, I mean, looking at this, if you didn't see that you were Lbar and you didn't know this was a Firefox browser on the desktop, it's kind of hard to distinguish this from a mobile application. A native mobile application. You're getting some really nice carousel effect here. The performance feels pretty good. The layout is obviously been optimized for a mobile experience. This fix position toolbar right here. You can see it's not moving. And in fact, it's transparent. The content is kind of showing through it a little bit there. So, it's a really nice job. And it should give you an idea of what jQuery Mobile is capable of doing, just by building web apps. I mean, you don't have to build native apps to get really great experiences on mobile devices. And that's what we're going to cover as we move through the rest of the course. So, now let's move on and look at some of jQuery's features.