April 20, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Mobile Web Development Frameworks: The JavaScript Roundup

  • September 21, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Regular Developer.com readers might have noticed I've been lately particularly focused on JavaScript-driven mobile application development solutions, having published introductions to a wide variety of related topics including jQuery Mobile, jQTouch, Sencha Touch, and PhoneGap. Admittedly, navigating your way through this jungle of cutting-edge technologies can be a daunting process, so I thought I'd put together a compendium of sorts which summarizes the key features and advantages of these leading mobile development solutions (minus PhoneGap). Hopefully this summary will serve as a starting point for determining which solution might be most suitable to your project's particular requirements.

Is jQuery Mobile Right for You?

Dealing with cross-browser HTML and CSS inconsistencies has been the bane of many developers' existence for almost two decades. The advent of Ajax only compounded these problems, as developers were now expected to add a myriad of JavaScript-related browser incompatibilities and quirks to their stack of concerns. Then along came jQuery, which thanks to its powerful abstraction of fundamental JavaScript tasks has largely removed much of the stress involved in writing complex cross-browser code. Soaring popularity ensued.

Mobile application developers face perhaps even greater challenges due not only to the wide array of mobile browser incompatibilities, but also because the need to produce layouts which thrive within the varied form factors and limited resources inherent to mobile devices. Enter jQuery Mobile, a self-described "touch-optimized web framework for smartphones and tablets" which takes advantage of both jQuery and jQuery UI.

Although still only a beta release (the second beta release was announced on August 3), jQuery Mobile already supports an impressive number of mobile platforms, including Android, BlackBerry, iOS, and Windows Mobile, among others. Equally impressive is the sheer number of supported widgets, which thanks to the emphasis placed on progressive enhancement, developers can use to easily create unified, cross-mobile device interfaces. Be sure to load the demo into a number of different devices, including your desktop browser, to get a feel for how the interface morphs to suit the target device.

Additionally, be sure to view the demo source code from within a desktop browser; even novice jQuery users will notice the care taken to thoroughly separate the page layout and JavaScript-driven functionality. You'll see that the entire application resides in a single document, with each "page" and its constituent parts defined using a DIV which is associated with custom attributes. For instance:

<div id="home" target="_blank"> <h1>WJGilmore, LLC</h1> </div> <div> <p>Check back regularly for the latest information about Jason's books!</p> </div> <div> <h1>Copyright © 2011 W.J. Gilmore, LLC</h1> </div> </div>

jQuery Mobile's Key Qualities

Although there are many reasons to use jQuery Mobile, three reasons in particular stand out among the rest:

  • jQuery developers will feel right at home with jQuery Mobile due to the shared code base.
  • Focus on cross-platform compatibility is ideal if the target user base is not constrained to using a particular device.
  • Widespread community and corporate participation has led to jQuery Mobile support within popular development products such as Dreamweaver CS 5.5 and a slew of interesting plugins such as the very slick Photo Swipe.

Tags: mobile web development, JQuery Mobile



Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel