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.
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.
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.
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.
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:
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!");
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.