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.
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.
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 /body 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!");
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.
Earle Castledine
Sporting a Masters in Information Technology and a lifetime of experience on the Web of Hard Knocks, Earle Castledine (aka Mr Speaker) holds an interest in everything computery. Raised in the wild by various 8-bit home computers, he settled in the Internet during the mid-nineties and has been living and working there ever since. As co-creator of the client-side opus TurnTubelist, as well as countless web-based experiments, Earle recognizes the Internet not as a lubricant for social change but as a vehicle for unleashing frivolous ECMAScript gadgets and interesting time-wasting technologies.
Leave a Reply
Feedback
Got some ideas?
We are always looking to improve out site, if you have any ideas or criticisms we would be glad
to hear them! Leave a short message and we will do the best we can to accommodate it.
Or email us on info@buildmobile.com
