Master Mobile Web Apps with jQuery Mobile

I haven’t written a review in months. I don’t think anyone was holding their breath in anticipation, but I apologize anyway. Thing is, I got a new job. I moved from freelancing as Nora Brown Design to working as a full-time web developer for a company here in Boston. It’s good, but I haven’t had a lot of time to read books, much less review them. Until now!

A couple of weeks ago, my boss basically said “Hey wanna learn jQuery Mobile?”. So, as is my habit, I went out to the inter webs looking for a book, and Master Mobile Web Apps with jQuery Mobile, by Matt Doyle, is the one I found. It is an excellent introduction to jQuery Mobile (JQM), an “interface framework for mobiles” (p24) that is still, at the time of this review, in beta. JQuery Mobile is built on top of jQuery, uses principles from jQuery UI, and also includes a CSS theme framework.

Going mobile
This book dives right in to an example project, which, though very simple (a list of products, a contact form, and some navigation) serves to demonstrate that a person with solid knowledge of HTML and javascript/jQuery can work with jQuery Mobile and achieve some impressive results in short order. However, because iQuery Mobile really becomes useful when handling user interaction, and not just presenting information (most web apps actually do something), some back-end coding is required to demonstrate many of its features. The examples in this book use PHP (to handle the aforementioned contact form, for instance), but Mr. Doyle doesn’t spend time covering the backend code in too much detail.

After the rapid-fire example, Part II rewinds to start with the basic structure of jQuery Mobile pages, and continues through some of the major user interface elements: buttons in all their incarnations; footers, headers, and navbars; dialogs; forms; the many variants of listviews; and plain old page content. The author’s descriptions are clear and well-organized, and most code blocks are followed by an appropriate level of step-by-step explanation.

Going beyond default

Part II: “JQuery Mobile Essentials” digs deeper, explaining how to get jQuery Mobile to depart from its default look, feel, and functionality. Chapter 10 focusses on the theme framework — editing and applying your own theme “swatches” to UI components, as well as creating and using your own standard and high-def icons. Going beyond the CSS, Chapter 11 introduces the jQuery Mobile API, including initialization options and all the exposed methods and events.

The last chapter walks through an entire mobile to-do app, from start to finish. It’s a tidy example that takes the reader through many common facets of developing a web app — like a building a login process and handling errors.

What’s here that isn’t in the jQuery Mobile Docs?

JQuery Mobile, following the precedent set by the jQuery docs, has thorough and well-organized documentation. Nevertheless, finding something in the documentation means you have to know what you are looking for, or be lucky enough to stumble upon it. The nice thing about a non-reference book is that it has a direction: read it from beginning to end, and you will encounter (and hopefully learn) everything it has to offer. In addition, Master Mobile Web Apps puts the functionality in context and covers bugs and “gotchas” you might come across. For example, on page 238 the author clarifies the distinction between the create event and the refresh method, and when you’d want to use each.

The fact that JQM docs are themselves jQuery-Mobile-powered means you can see many of its features implemented in a real-life context, but also means explanatory source code blocks are mostly absent, and it’s a little tedious to view the source of a given page. Master Mobile Web Apps provides all the example code in a zip file, making it simple to learn from the code as well as edit and add to the files to experiment on your own.

This book also contains two really useful Appendices. Appendix A breaks down the process by which jQuery handles URLs and page requests. Appendix B is a complete table of all the data- attributes, describing their function and what elements they can be used on.

Conclusion

You might be hesitant to purchase a book on a framework that is still in beta, but the author assures readers that “we’re planning to publish updated versions of this ebook to keep it up to date with the current version” and updates will be “free to people who have already purchased an earlier version of the ebook”. In fact, with jQuery Mobile’s third beta release just out, I’m looking forward to the next installment of this excellent book.