Recently in Mobile Web Development


There have been quite a few updates to some of our favorite tools and frameworks lately in the mobile web development world. This post will provide a quick overview of some of the most significant updates to PhoneGap, Sencha Touch, and jQuery Mobile!

PhoneGap 1.5 / Cordova

PhoneGap Logo

The Nitobi team has released yet another version of their ever growing tool. With this release there are a lot of fixes along with the smooth transition to the Cordova namespacing for the framework.

Most of the updates relate to bug fixes from the 1.4.1 release accross multiple platorms, especially in Android. I can't say that the release notes are always helpful; they usually only make sense if you have already run into the issue personally. What's great, though, is that the project is moving forward quickly and promptly stomping out issues as they arise.

If you take a look at the release notes, you will see a lot of references to 'Renaming to Cordova.' You also might have heard that Nitobi was aquired by Adobe, and their main projects (i.e. PhoneGap and PhoneGap Build) became part of the Apache software foundation.

So, what is Cordova and what does it have to do with PhoneGap? I have heard varying answers to this. Many casual users assume that Cordova and PhoneGap are the same thing and that soon they will merge into one. However, this is not the case.

To quote Brian Leroux: "PhoneGap is powered by Cordova. Think: Webkit to Safari."

In other words, Cordova is the toolchain that is used in PhoneGap projects, but the PhoneGap brand isn't going anywhere.

Over time the PhoneGap project has added more and more support for various platforms, and while this release is lacking in new features, more WP7 support has been greeted with open arms by many. Hopefully this year will be the year of more PhoneGap apps!

Feel free to check out the official Cordova website for more details.

jQuery Mobile 1.1.0 RC1

jQuery Mobile Logo

The jQuery Mobile team moves fast. It seems like only yesterday that they made the 1.0 milestone. With the RC of 1.1 there are some significant changes and additions that you might want to pay attention to if you are currently working on a jQuery Mobile project.

For a lot of browsers (those who support position:fixed) jQuery mobile will now allow you to have true fixed toolbars, rather than a hackish JavaScript fake scroll.

True Fixed Toolbars: For a lot of browsers (those who support position:fixed) jQuery mobile will now allow you to have true fixed toolbars, rather than a hackish JavaScript fake scroll. The browsers that do not support position:fixed will get static toolbars, however, there is a polyfil for those wishing to have the old fixed toolbars in non-supporting browsers.

Fixed Toolbars are not the only new features for this release. There are two new page transitions (i.e. Turn and Flow), Firefox support for transitions, a much nicer and less intrusive Ajax loader, Support for jQuery 1.7.1 (previous versions were only supported by 1.6.4), and Mini form elements for putting form elements in toolbars (e.g. Sliders, Switches, etc). The Flip Switch has a new, much nicer look, and there is also the option to highlight the slider track when sliding.

If you don't want jQM to enhance an element, you can now use the data-enhance="false" attribute. There is some overhead with performance in using this, so it's worth reading the documentation on this one.

Along with these features, the platform support just gets better and better with the A-Grade support growing with every release, and the B and C grade getting smaller and smaller. Don't forget to check out the release notes for additional details.

Sencha Touch 2

Sencha Touch logo

Sencha Touch is an amazing toolset for creating mobile apps. With Sencha Touch 2 we get a new version of the framework along with some great new tools. I have not used the new version of Sencha Touch yet, but I've been diving into some of the documentation and code examples, and I really like what I'm seeing.

Processing speed and harnessing all that HTML5 has to offer seems to be of the utmost importance for the Sencha team. They have delivered something that performs very well, and along with the release of Sencha Touch 2 comes a couple of tools that I am excited to use.

Sencha Designer 2 gives you the ability to drag-and-drop GUI elements when building apps, and Sencha Animator is a tool to help build CSS animated apps.

Sencha Designer 2 gives you a drag-and-drop GUI for building apps. Some might be put off by its simplicity, and while its reach is limited in what you might be able to achieve with it, it is the go-to tool for creating Prototypes for small apps. Though it's still in beta at the moment, it very well may become one of the reasons many developers will choose Sencha Touch over anything else.

Sencha Animator is another tool that was recently released to help create CSS-based animations and interactive apps. It should help make building a rich-looking prototype, or even adding some animation to your app much easier, but again I am unsure how far the tools will stretch. The great thing is that you can always dive into the exported code.

Sencha is certainly flying at the moment, and I certainly plan to dedicate some time to exploring their tools for creating mobile applications this year. With their new tools, documentation, and excellent resources for learning Sencha, they are setting the bar very high!

Related Posts
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Game Development
    How to Learn
    How to Learn the Phaser HTML5 Game EnginePhaserlogo400px
    Phaser is an open source HTML5 game framework created by Photon Storm. It's designed to create games that will run on desktop and mobile web browsers. A lot of focus was given to performance inside of mobile web browsers, a growing and important area of web gaming.Read More…
  • Code
    PhoneGap: Build a Feed Reader - ConfigurationAudero reader preview2@2x
    This is the third and final part of the series about Audero Feed Reader. In this article, you'll learn how to create the configuration file and complete the project we started in a prior lesson.Read More…
  • Code
    Interview With Brian Leroux of Adobe's PhoneGap TeamBrian interview retina preview
    Mobile web development is tough especially when you're trying to offer native-like experiences to users. Several years ago, a small company called Nitobi took on the effort of simplifying building native mobile apps using traditional web development skills. Ambitious and sometimes controversial, the effort known as PhoneGap grew out of this need and one converts left and right. One of the main masterminds behind the framework is Brian Leroux who apart from being well-respected for his development skills and incredibly likeable personality is also one of the savviest mobile developers around. Considering the number of mobile devices PhoneGap targets, you have to be pretty well-versed in a variety of devices and OSs. Nitobi has since been acquired by Adobe and the PhoneGap codebase donated to the Apache Software Foundation to continue its development as the Apache Cordova project. Brian moved over to Adobe and continues to steward the codebase. In this interview, we'll chat with Brian about how PhoneGap came about and what the future of mobile web holds.Read More…
  • Code
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…
  • Code
    Master Developers: Dave Methvin (jQuery Core Team Lead)Davemethvin1
    Most of us are familiar with the jQuery JavaScript library, and likely use it in at least some of our projects. But how much do we know about the people who tirelessly give their time to maintaining the web's most popular JavaScript library? I recently had the chance to interview jQuery Core Team leader, Dave Methvin, and discuss how he became involved with the project and where he sees front-end development headed. He's been a contributor to jQuery since 2006, and is also the President of the jQuery Foundation.Read More…