PhoneGap and jQuery Mobile vs. Sencha Touch

PhoneGap Build lets web developers create native mobile apps for iOS and Android without learning Objective C or Java, while still being able to access native hardware features like vibration, accelerometer, camera, and so forth.  This is great if you are a web developer and need to develop a native mobile app on multiple platforms (iOS, Android, etc.)

I was fortunate enough to be able to attend Web Unleashed 2012, a two-day “Front End Developer Event” near Boston, where they discussed mobile app development. One of the highlights for me was a presentation called “Building Multiplatform Apps with HTML & JavaScript Using PhoneGap Build”, by Brian Rinaldi from Adobe.

PhoneGap Build Makes it Easier

PhoneGap Build is Adobe’s attempt to take care of more of the development process for you (especially the convoluted iOS compilation process). In fact, using PhoneGap Build, you can develop iOS apps using a Windows PC! (Apple’s iOS development tools only run on Mac).  Adobe accomplishes this by moving the iOS-specific parts of the PhoneGap development process to their servers on the web, so you only need to upload files there and push a button. To load your app onto your mobile device, you scan a QR code from your phone and it sends you to a link where the files are waiting for you. I went through most of the process and it was relatively painless! The only reason I didn’t go all the way was that I had an iPhone and I didn’t have an Apple developer license ($99), which is required for iOS development.

Android development (and Blackberry, for those who care), works the same way, except that you don’t need a license. If I had an Android phone, I would have been able to run the demo on my phone that day.

I had attended a native iOS development workshop once before, and the whole process turned me off. If I had to develop an iOS app, I’d definitely use PhoneGap Build instead. I’d recommend it to any web developer who wants or needs to develop a native mobile app. This is the easiest way that I’ve found.

PhoneGap Build is free for one app and $10/month for 25 apps. You can find out more about PhoneGap Build here: http://build.phonegap.com/

PhoneGap vs. PhoneGap Build

I wasn’t aware of this before I went, but there is a distinction between “PhoneGap Build” and “PhoneGap” (without the “Build”). Both allow you to develop native mobile apps using HTML, CSS, and JavaScript and give you access to native hardware features. However, PhoneGap requires that you have a Mac running XCode if you want to develop an iPhone app. That is why Phone Gap Build is so cool – no Mac required. The Mac-specific stuff is done on Adobe’s servers.

jQuery Mobile vs. Sencha Touch

Closely related to Phone Gap is jQuery Mobile, a JavaScript UI framework that gives your app the look and feel of a native app by providing cosmetic elements like buttons, menus, etc., as well as animations like transitions. These elements are not just icing on the cake; Apple requires that native apps have a specific look and feel, so you’ll either have to craft these elements yourself or rely on a framework.

I have previously used jQTouch for this, which was easy to use, but doesn’t seem to have much momentum behind it now. For my next project, I’ll definitely use jQuery Mobile. It seems very easy to use for anyone familiar with HTML and CSS and it appears to be well-supported by Adobe.  More on jQuery Mobile here: http://jquerymobile.com/.

I also attended a talk on Sencha Touch, which is another mobile app framework, but is a much bigger departure from traditional web design methodology. With Sencha Touch, the whole HTML body section is generated dynamically by the JavaScript framework, in a more MVC philosophy. You don’t write any HTML code for the body directly, which might be disconcerting to some developers. I think most front-end web developers would feel much more at home with a less radical framework like jQuery Mobile. I know that if I needed to develop a mobile web app fast, I’d be up and running much quicker with jQuery Mobile than Sencha Touch.  Pure JavaScript programmers, on the other hand, might prefer Sencha Touch.

A Side Note: The Brackets Code Editor

Some of the coolest things I discover from these presentations are the tools that the presenter uses.

Brackets is an open-source code editor created and maintained by Adobe. One of the coolest features of Brackets is inline code editing.  Say you are editing a div tag in your code and want to see the CSS that goes with it.  Click a button, and the CSS for that div appears right below the line you are editing.  Very cool!!!

Brackets is still in beta, but I’m going to be watching it.  It could become the code editor that you’ve been looking for too.

Mongoose: An Easy-To-Use Web Server

To get people who didn’t have servers running on their laptops up and running quickly for the workshop, the presenter recommended using Mongoose. You simply download it (it works on Mac or PC), copy it to a directory, launch it, and boom, you have a web server running on your computer. No messing around with installing WAMP, MAMP or XAMPP. I already had a web server running on my laptop, but this seemed pretty cool.

The Verdict

If you are a front-end developer accustomed to building websites with HTML, CSS, and some JavaScript, you will find jQuery Mobile to be definitely easier and quicker to develop with than Sencha Touch.  If, on the other hand, you are a professional JavaScript programmer who likes the “MVC way” of doing things, you’ll like Sencha Touch.  As for Phone Gap Build, I’d recommend that for anyone who hasn’t already gone through the painful iOS development process.  Save yourself some headaches!

Have you used Phone Gap or PhoneGap Build? What are your thoughts?

– Brian



40 thoughts on “PhoneGap and jQuery Mobile vs. Sencha Touch

  1. Hi Brian, I wanted to know that, I have developed a app using MVC and JqueryMobile now I want to deploy it to android, IOS and Windows using PhoneGap CLI. Could you guide me a way or solution how to do it and what are the steps that i need to take while building it.
    Looking forward to hearing from you.

  2. Thanks a lot Brian.
    Your article really helped me in figuring out few queries & confusion.
    Now, here is my request to you.
    I’m an absolute beginner in web or mobile app development [but good hold in linux system administration & scripting/automation stuffs].
    So for such a novice person in the mobile app development space, how one should go ahead in
    1) Learning languages/technology
    2) What exact sequence of learning should be
    3) Kindly elaborate whether knowing these all is really required for app development… HTML, CSS, HTML5, JavaScript, Jquery, JqueryMobile, Sencha Touch, PhoneGap..
    4) What is parse or appcelarator exactly.

    Thanks a lot, in advance :)

    1. Hi Z,

      If you want to develop mobile web apps, the first question you should answer is whether you want to develop native apps for iOS and Android, or web apps. This is somewhat of a philosophical question that I can’t answer for you. Personally, I have chosen the web app route because I already had some experience in that area.

      If you want to go that route, you’ll have to be solid in HTML5, CSS, JavaScript and jQuery. I would learn HTML and CSS first, then JavaScript/jQuery, then jQuery Mobile.

      Sencha Touch vs. PhoneGap is another philosophical choice, but I believe Phone Gap is easier.

      Parse is a back-end database service where your app can store end user data and access it through JavaScript. I’ve used it before and it’s good.

      I have not used Appcelerator before but they seem to offer more services to help in mobile web app development. I believe Titanium is similar to Sencha Touch in that it allows you to create native apps using JavaScript.

      Hope this helps,
      Brian

      1. Hey Brian… really thanks a lot for such a quick & apt reply…!!
        You made my day..
        Well.. I dont have any plans to learn Java for Android & Objective-C for iOS as of now.
        But want to make an app for both android & ios platforms myself to test a biz idea.
        If it works well & gets some traction & momentum, I might think in future to have Native Apps but for now, thats definitely not my need.
        So I’m clear in that direction.

        So here is my learning process as per your suggestion:
        HTML
        CSS
        JavaScript
        Jquery
        JqueryMobile
        PhoneGap

        BTW, just couple of more genuine quereis …
        I hope using this non-native mode to build mobile app, I will be able to develop provision for in-app payments.
        And what about security. How secure non-native apps in real are when compared to native apps.

        I have seen many apps being pirated/cracked & are being used without paying a single penny for it.
        As my App will be a B2B app, payments are imp factor for me.
        Kindly shed some light on it too.

        Thanks a ton !!

        1. Hi Z,

          I believe in-app payments are no problem using these techniques.

          Regarding pirating/hacking, of course you should use good practices to keep your app secure. Once you’ve done that, I wouldn’t let worries over security paralyze your development. If your app is so popular that people are hacking it, that is kind of a good problem to have. The vast majority of people will use it properly and pay. I also think that businesses will be less likely to hack it, as opposed to consumers.. Just my two cents..

          Brian

  3. Which one is better to use developing Sencha Touch or phonegap mobile apps. iam new in mobile apps developement, i know only front end technologies(HTML5,CSS3,Js, Jquery)

Leave a Comment or Ask a Question