PhoneGap & jQuery Mobile – First Impressions

As an intern at Pariveda Solutions, I worked with PhoneGap and jQuery Mobile for the first time. I have to admit, prior to my internship I had heard these terms thrown around a lot but had no idea what they meant. My mind simply translated them to “mobile dev stuff.” After I learned we would be working with them, I did some research with my fellow interns and started to get the picture.

How PhoneGap Broke My Heart

With PhoneGap, I was super pumped about the possibilities of deploying one app to multiple platforms. It seemed like a dream come true for mobile. But nothing is ever that simple. It’s kinda like the phrase “no such thing as a free lunch.” Really, you can get a lunch without paying for it with money, but usually there’s some sort of extra effort involved, time, energy, blah blah blah, thus not so free.

PhoneGap is kinda like that. You think you are going to program one app and deploy to many (if you’re a young, naive programmer like me), but really there’s an extra layer of code you have to program somewhere in between the limited native code and all that JavaScript/HTML/CSS/jQuery to handle the quirks of Android, iOS or whatever platform you deploy to.

That said, I’m not against PhoneGap. The idea of a cross-platform app that can be deployed in multiple app stores is brilliant in my mind. Furthermore, developing these kinds of apps takes a lot less programming language know-how (one language vs. more than one language) and a lot less time to focus on GUI building, which often takes the greatest chunk of time if you develop your app with good UI and UX. Thus, I’m not opposed to PhoneGap. I’m just relating how PhoneGap crushed my dreams because I thought it was going to be easier than that.

But there is a part two to this sad story.

How jQuery Mobile Broke My Heart

So after I finished researching PhoneGap, I launch Xcode, start my PhoneGap project and dig into the code to see what’s going on, to figure out how PhoneGap does its magic. That takes a while. For those of you who are unfamiliar with PhoneGap and how it works, it basically displays a web view without the search bar and toolbar to display a web page. It also (of course) has to translate both ways between native code and JavaScript. You code the app using HTML, CSS and JavaScript. So I figure that out and start planning how I’m going to code my app.

I want my app to look like a real iPhone app. I also want it to look like a real Android app. Or at least I want both users feel like they are using a native app. That’s when I realize, I can’t accomplish this goal, or at least not entirely. It’s hard to fool an experienced iOS or Android user that they are using a native app. They know what the buttons look like, how the generic user experience goes, what the generic color schemes are, etc. Furthermore, I’m not going to accomplish the native experience by just coding basic HTML and CSS. So that’s when, as a developer, you turn to solutions like jQuery Mobile and Sencha Touch.

So I read up on jQuery Mobile and start coding it into my app. Everything works great and it looks awesome. I’m stoked because jQuery Mobile is making my web view look like a native app.

Then I get past the basics and I start coding in lists. And I want them to load content dynamically. I also want to transition from one list to another list. I want the lists to be scrollable. Then I want to include an input field on a page that is scrollable. Etc. etc. This all works in jQuery Mobile. It’s awesome. I’m pretty impressed at all the features jQM has to offer.

At the same time though, I can’t get past the feeling that all the jQ coding, jQM coding and HTML attributes sorta feels like a hack. Plus it’s hard to replicate native code when with something that’s not native. jQM does a great job at recreating the native experience, but transitions between pages aren’t as smooth always. jQM has bugs that need to be worked out for certain features. It’s a product in development and it’s new, so it’s bound to have a few weak points.

Key Takeaways for Me

PhoneGap and jQuery Mobile are powerful tools to use for cross-platform mobile development. They offer a lot of features to make cross-platform apps look native. They are not the same experience though, so don’t get any similar preconceived notions. They have their place and there are reasons why you’d want to use them.

jQuery Mobile in my experience can be slow and appear glitchy as you transition between pages and when pages render dynamically. Rendering HTML UI content is inherently different from rendering native UI content. Many of the UI “flaws” are imperceptible on a desktop or laptop due to faster hardware. However, these differences truly can affect the user’s experience. With time, I think many (not all) of these issues will go away. jQuery Mobile will be optimized, mobile hardware will be faster and so on.

For those of you who are experts on jQuery Mobile, I’m sure you could teach me a thing or two. I’d love to learn.

Comments, questions and feedback welcome.