Mobile Web Apps: Setting Up Shop

This is an excerpt from the upcoming book “Build Mobile Websites and Apps for Smart Devices” by Earle Castledine, Myles Eftos and Max Wheeler. Over the coming weeks BuildMobile will exclusively publish a complete chapter from the book, the chapter on Mobile Web Apps. Enjoy.

1. Setting up Shop

As a first pass for app-ifying our mobile website, we’ll set up our environment, hook up a couple of common DOM events, and use the native-like features gifted to us for some gratifying “quick wins.” These should help us get well on the way to creating a usable app that we can build on with more advanced features.

1.1. Frameworks and Libraries

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.

A Slimmer jQuery

If you like jQuery, but are hesitant about its file size, you might like to check out the interesting Zepto project. It has a jQuery-compatible (though not full-featured) API, but is only about 4k when minimized. This is possible because it only targets mobile WebKit browsers, rather than wasting hundreds of lines of code getting IE6 on board.

1.2. Debugging Mobile 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 <types" of logs available to us:

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

fig_4_iphoneconsole

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.shaunbefort.com Shaun

    When does this book become available for purchase?

    • http://buildmobile.com Paul Bridgestock

      Very very soon. If you follow @buildmobile and or @sitepointdotcom or check back here or over at sitepoint.com over the coming 24 hours then you should have your answer, and you’re book.

  • bgolden

    I might of missed it in your post but, what is the cost of the book going to be?

    • http://buildmobile.com Paul Bridgestock

      The book is available for sale here http://www.sitepoint.com/books/mobile1/ at a price of $39.95 plus there are deals on bundling the book and an online course.