“Sams Teach Yourself jQuery Mobile In 24 Hrs” is a new book by Phil Dutson that introduces web developers to building mobile web apps with JQuery Mobile. The book is divided into 24 separate chapters meant to be consumed in an hour each.
InfoQ got in touch with Phil to know more about the book and Mobile web app development in general.
InfoQ: You haven’t used any specific server side programming language and focussed mainly on the presentation layer – what is the minimum experience you would recommend for a programmer to have before they start reading this book?
Phil: One of the things that makes the jQuery Mobile framework so powerful is that developers that are fairly new to web development can jump right in and get started without having much knowledge. I would recommend that readers have enough knowledge of HTML and CSS to be able to create a web page. That being said, the book should appeal to developers of all skill levels. New developers are initially given a refresher course on HTML, CSS, and JavaScript, and then shown how they can leverage what they already know to create beautiful, fully-functional websites without a steep learning curve.
InfoQ: You have mentioned several key differences while programming for touch vs. mouse interfaces – for e.g. the small but very noticeable difference between the touchstart and the click events. If you have to list out a few most important of such differences, what would they be?
Phil: Another strong suit of jQuery Mobile is that it takes into account the support of the device you are using. You have already pointed out that there is a noticeable difference between touchstart and click, another difference would be using swipe events. Desktop users that use a button-mouse without a touch sensitive area are not use to being able to swipe in order to interact with websites or applications while touch users have to use swipes to scroll or manipulate data. Another event that is commonly done on mobile devices is a tap-and-hold. This event is handled with jQuery Mobile for desktop users allowing them to click-and-hold in order to trigger the same event.
InfoQ: What are the biggest mistakes you have noticed in developers building mobile versions of their sites, with or without JQuery-Mobile?
Phil: Using the jQuery Mobile framework definitely gives you a headstart on handling a majority of today’s mobile devices however I have seen some pretty bad implementations where developers have not taken the time to properly format their site for the device used. By skipping steps like using the built-in grid system, or by over-complicating the CSS with lots of custom class handling, some sites fail to perform correctly when a device has been shifted to landscape or portrait.
Without using jQuery Mobile the biggest error that I have run across is odd double-click behavior that occurs when the touchstart and click event are not properly bound cause clicks on dialog boxes to “fall-through” to whatever is below (this happens mostly on modal or dialog windows and drop-menu navigation). Improperly handling events can be a serious headache to mobile users.
InfoQ: You’ve touched upon virtual mouse events and that they can help bridge compatibility issues between mobile and desktop – could you explain where this can be useful and where it should be avoided, maybe with some examples?
Phil: If you have ever used a site that uses a drop-down menu or navigation bar on your mobile device you may have become frustrated by the way the site flashes the menu when you tap it on your mobile device. This was one of the biggest points of aggravation I had with a certain large online retailer that would happen everytime I switched from the mobile site to the full site. While they have corrected the issue now, the hover event is something that can be detected and handled by use of virtual mouse events. By simply binding the mouseover event to run during the pageinit stage of your page load you can handle for this somewhat complicated event.
Another place that virtual mouse events could be used is in web applications that use mouse input to draw or create lines. By using these events you can get the exact touch point on a screen and filter that data for use to track, draw, or manipulate based on the touch or swipe point.
InfoQ: You have dedicated an entire hour/chapter to discuss video and audio encoding formats as well as various encoding tools. Could you briefly explain why, as a mobile website developer, it is important to know these details?
Phil: Coming from an ecommerce perspective, rich media is one the ways to make or break the sales of your product. As mobile device sales and activations surge there needs to be a way to deliver that content to the consumer. Unfortunately, not all devices are created equal, and even fewer will handle the same media types. Something that I learned when the Motorola Xoom came out was that even though it was running Android and should have had a wealth of playback codecs, it failed miserably when attempting to play the same MP4 file that would play perfectly on an iPad. Knowing how to encode video, what codecs can and should be used, and how this relates back to file size and distribution are vital to web developers who are looking to push videos to consumers. This is especially important to smaller studios that do not have the financial backing to work with streaming video providers. It is also important to know that there is software out there that is much less expensive than using commercial solutions that will yield the same results.
InfoQ: As a web developer - at what point would you start considering building a native app (or even a cross-platform app using something like titanium/phonegap) instead of a mobile web app? (in terms of what the app needs to do)
Phil: This is actually a difficult question to give a quick and solid answer to. It really depends on your situation and on what you are trying to do with your application. For example, if you are building a game and really want to squeeze the most out of your performance, sound, and special effects, then there is a very strong chance that you should consider making your application native. That isn't to say that you can't still make an amazing HTML5 application, just that you will not be able to use all of the features that a mobile device includes. Enterprise developers may actually be very interested in building a hybrid application (an app built with PhoneGap/Cordova or Appcelerator/Titanium). This gives them the flexibility of tapping into the hardware controls of a device as well as push new features, check for updates, and enable added application security from the web application side.
What you really need to do is sit down and decide what your application is going to do, how you plan on distributing and updating it, and if it will be dependent on device controls such as a camera, gps, accelerometer, etc. Once you have a list made out you can start to focus on what your application is going to need and then on what you will need to develop it.
InfoQ: Have you used other mobile-specific frameworks such as Sencha or JQTouch? Any views on those?
Phil: I have dabbled with Sencha and know a few developers who absolutely adore it. Sencha is a brilliant framework that really helps to push a native application feel. I think it is great for those developers who really want to dig into the semantics of a framework and push it to create touch-enabled web applications. That being said, I find the framework to be a bit more involved than those who are used to using jQuery.
Dojo Mobile is another framework that I have taken a look at, and while I find it rather similar in some attributes, I think that it is still a little bulky and doesn’t render quite as well as I had expected in a cross-device and browser scenario. That being said it is a very stable framework and built on another very hardy and well tested framework (Dojo).
As for jQTouch, that was one of the first mobile frameworks that I started researching. When I first loaded the framework up I was instantly drawn in by the use of themes and the page transitions. It’s probably not too surprising to those familiar with jQuery Mobile that the page transitions were originally borrowed and tweaked from jQTouch.
InfoQ: Are there any specific inconsistencies across mobile devices, that if weren't present, would make a developer's life easier?
Phil: While I would rather spend time focusing on the good things that various mobile devices bring to the table, there are some devices and platforms that will just not play nice all of the time. For many devices touch/click events can cause a problem, and styling can also be a pain. In a perfect world there would be one browser to rule them all, and for the moment, it would most-likely be based on Webkit. That isn’t to say that the native browsers of other devices are not usable or that other mobile browsers such as Opera Mobile and Firefox Mobile do not do a fantastic job of delivering the mobile web. It is to say that every device and browser seems to think that they know exactly how to render everything, and that their way is obviously right. This is where frameworks like jQuery Mobile come into play, you design it once and the framework does an amazing job at making sure that the majority of devices render your application as closely as possible to what you had originally designed. It’s true that it doesn’t always work the way you intend (such as drop shadows and the occasional rounded corner seeming to be slightly off), but with updates constantly being pushed and fallback support implemented through the framework it makes the job of the developer much easier.
InfoQ: Can you cite any mobile sites/web apps that you would consider as examples of good, mobile-centric design?
Phil: While there are a few sites leveraging responsive design to serve content to mobile devices, there are quite a few using jQuery Mobile that do a great job giving users a good mobile experience. Adidas, Walt Disney World, and Verizon each provide a very good mobile experience to the user. Each of these sites also leverage something that is very important to mobile shoppers, a locator. While this feature seems to occasionally be forgotten, it is extremely important to users who may need to find a “brick-and-mortar”, or in the case of Disney World, where a character can be found in the park. If you get a minute, get out your mobile device and give each of these sites a quick browse, you’ll be shown an easy to navigate site that gives you a simple, clean interface that maximizes your ability to shop or find information that also doesn’t break the bank when it comes to bandwidth usage. These sites also scale well, so if you happen to have a tablet or large screen mobile device you should also get a good looking, easy to use site. For other sites that have been built using jQuery Mobile be sure to check out the jQuery Mobile Gallery.
InfoQ: What capabilities would you foresee coming soon to mobile web apps, which are not quite present yet?
Phil: The line between native application and web application is constantly getting more blurred as browser technology and device speeds increase. As HTML5 gets nearer to final release the standards for video and audio integration are getting finalized and it won’t be long before these are fully implemented into mobile devices. While you can currently playback video depending on the container and codec used, this will enable web developers to provide very rich media experiences that will reduce latency and optimize video and audio playback to the end user. Full support for websockets will also help developers create low-bandwidth solutions for real-time data transfer. Another capability to keep an eye out for is the full support of CSS3 on all mobile devices for transitions, animation, and styles. CSS3 drastically cuts down on the elements, requests, and bandwidth needed to render and create a fantastic looking application. An interesting project to keep tabs on is Firefox OS as it will be providing an OS that is built on HTML5 and rendered in the Gecko engine. This will hopefully be a great resource for future mobile web developers to get ideas and to create and submit their own while helping to push the capabilities of mobile web devices further.
This article is based on the book, ‘Sams Teach Yourself jQuery Mobile in 24 Hours’, authored by Phil Dutson, published by Pearson/SAMS, July 2012, ISBN 0672335948, Copyright 2013 by SAMS Publishing. For more info please visit the publisher website.
About the Book Author
Phil Dutson is the lead front-end developer for ICON Health and Fitness, one of the world's largest online fitness equipment retailers. There he specializes in creating seamless customer experiences across multiple browsers and platforms. He has worked on projects and solutions for NordicTrack, ProForm, Freemotion, Sears, Costco, Sam’s Club and others. He was an original team member of the iFit project that integrated Google Maps into personalized workout creation and playback. Phil co-founded and currently manages “The E-Com DevBlog”, a development blog focused on web development and solutions.