Mobile Web Apps: Setting Up Shop

First of all, we need to make some tough decisions. The mobile web app development landscape has no yellow brick road; it’s more like strolling through a dense, twisted forest of super-cool devices and browsers—all with wildly varying capabilities. To help us out, new frameworks and libraries for mobile app development are sprouting up like mushrooms.

A framework can greatly simplify our task by taking care of cross-device and cross-browser inconsistencies, and offering prebuilt UI widgets and designs that we can patch together as an application. Sencha Touch and jQuery Mobile are two big players, but there are scores of others, and there is certainly no “winning” framework at the moment. All the big frameworks have benefits and drawbacks, so you’ll need to carefully test and evaluate the options to see if they meet your needs for performance, compatibility, and customization. In the interests of teaching you the underlying concepts of developing for the mobile web, we’ll be writing our own UI code in this book.

Okay, but how about a DOM library? Surely there’s no need for us to write our own DOM manipulation code, right? Over the last few years, JavaScript libraries have changed the way we work with the DOM. We can modify and animate our documents with some terse, elegant APIs, and maintain some level of confidence that we won’t be spending the majority of our workdays troubleshooting inconsistencies across desktop browsers.

So, does it make sense to bring this convenience to mobile? The answer is, of course, “it depends.” Most of the major DOM libraries take great care to ensure they function across all the desktop browsers, including IE6. But when working on a mobile web app, IE6 is a non-issue. Again—you need to evaluate your options. For the remainder of the book, we’ll stick with jQuery as it’s very well known, but all of the concepts (and most of the code) convert easily between libraries—or to plain JavaScript.

We’ve settled on jQuery, so let’s add our library to the bottom of the HTML document, as low as you can before the final tag. We’ll also throw in a quick alert to verify that jQuery is up and running:

<script src="javascripts/vendor/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    alert("StarTrackr loaded!");
  };
</script>

What if you didn’t receive an alert? What went wrong? Well, there are a few ways to troubleshoot and debug. The first is to test it on your desktop browser. Safari or Chrome (or another WebKit-based browser) will do a good job of emulating an iPhone or Android phone, and their built-in tools for debugging will save you a lot of headaches.

A rudimentary console is also available on the iPhone, though it’s disabled by default. Switch it on in the Safari preference screen via the general phone preferences. Not only will the console show you any errors that occur on the page, you can also throw your own messages in there—which is far more convenient than spawning alert boxes throughout your code. There are a few different

console.log("General log item");
console.info("Just some information.");
console.warn("Oooh, be careful here…");
console.error("We've got a problem!");

iPhone Console

We’ve just output strings here, but you can also print the value of variables. On the iPhone, you’ll only get the value of simple types (strings, numbers, and so on)—not objects. It’s still very useful, though—just remember to remove these messages before you go live. If a user’s device lacks a console object, it will throw an error and stop your scripts.

If you’re testing on an Android device, you can enable USB debugging on your phone, and then use the Android Debug Bridge that comes with the Android SDK to log messages from your device to your computer’s terminal. (We’ll cover installing the SDK in Chapter 7, Introducing PhoneGap.) To view these logs, run adb logcat from the platform-tools directory of your SDK.

Build Mobile Book

You can purchase the book “Build Mobile Websites and Apps for Smart Devices” from Sitepoint. Read the whole of Chapter 4. Mobile Web Apps, exclusively here at BuildMobile, for free, in the following sections.

• Setting Up Shop
• Events
• Quick Wins
• Loading Pages
• Ajax
• Templating
• We Have an App!