http://www.developer.com/ws/mobile-web-development-frameworks-the-javascript-roundup.html

Back to article

Mobile Web Development Frameworks: The JavaScript Roundup


September 21, 2011

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.

Is jQTouch Right for You?

Whereas jQuery Mobile strives to provide compatibility across a wide spectrum of mobile devices, the jQTouch project instead focuses the bulk of its effort on devices supporting WebKit-based browsers (Chrome and Safari). Therefore, jQTouch should be used in conjunction with web applications intended to be deployed on the iPhone and Android devices. Supporting slick WebKit-optimized animations, multiple themes which are intended to mesh with the mobile device's styling,

The easiest way to get acquainted with jQTouch's capabilities is by way perusing the demo site via your mobile device or a WebKit browser. In particular I suggest viewing the demo source, as you'll see that like jQuery Mobile, jQTouch "pages" are assembled using a series of DIV elements and associated attributes, an approach which should put designers right at home.

jQTouch's Key Qualities

Although there are many reasons to use jQTouch, two reasons in particular stand out among the rest:

  • Although jQTouch is also based on jQuery, its focus is primarily on optimized support for WebKit-based browsers. Therefore jQTouch might be preferable if you plan on specifically targeting users tied to an iOS- or Android-based device.
  • Like jQuery Mobile, jQTouch takes an HTML- and CSS-centric approach to page development, using JavaScript to solely focus on incorporating events, animations, and other functionality. This approach is appealing when working with a designer or when the developer isn't particularly proficient with JavaScript and is looking for a way to ease into mobile web development.

Is Sencha Touch Right for You?

In comparison to jQuery Mobile and jQTouch, Sencha Touch comes with a relatively steep learning curve, however with the added complexity comes amazing capability. A dual-licensed (commercial and GPL/FLOSS) product of Sencha, Inc., Sencha Touch employs a radically different approach to its aforementioned siblings in that the layout and interface widgets are built using a slick JavaScript library which also happens to be packed with useful features such as offline support, idiomatic layouts, and easy theming capabilities.

Additionally, Sencha Touch takes a much more holistic approach to the challenges inherent to application development in the sense that it supports building an MVC-driven application right out of the box. To illustrate just how stark the contrast is between building a Sencha Touch application versus a jQuery Mobile / jQTouch application, compare the source code found in the jQuery Mobile / jQTouch demos with the following Sencha Touch code, used to merely create and launch a viewport:

Ext.regApplication({
  name: 'App',
  defaultUrl: 'Index/index',
  launch: function()
  {
    this.viewport = new App.views.Viewport();
  },
});

Although this approach is perhaps daunting to relative JavaScript novices, I nonetheless suggest spending some time experimenting with Sencha Touch as the intuitive syntax, well-written documentation, and numerous companion examples will go a long way towards quickly bringing you up to speed.

Sencha Touch's Key Qualities

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

  • The native MVC architecture serves to quell the nerves of framework-oriented developers who fret over how to sanely organize JavaScript code.
  • The Sencha developers have put considerable effort into publishing a wide variety of tutorials and demo applications on the Sencha website.
  • The JavaScript-driven approach to widget placement and organization will be familiar to developers hailing from widget toolkit backgrounds (think Swing and GTK+).

Conclusions

On the occasion I pen a summary article such as this, readers inevitably subsequently ask for a definitive conclusion regarding which framework is preferable. The answer is always the same: It depends. Sencha Touch is no doubt the most feature-rich of the three, however it comes with an occasionally dubious learning curve. That said, if your goal is to merely provide a user-friendly mobile interface to an existing application, then jQuery Mobile or jQTouch are likely going to provide the path of least resistance. If you've set your mobile ambitions higher, then Sencha Touch is in all likelihood going to be well worth the time investment. Regardless of what solution you wind up choosing, I'd love to hear about your experiences! Please add your comments below, or get in touch via e-mail.

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.

Sitemap | Contact Us