Use a web mobile framework?

Question

I'm currently on a new projet to realize an application for mobile. The client isn't decided and I've to suggest several solutions. The compatibility with Android (version 2.2+) is required and iOS and others OS could be nice. We can only develop for Android but I thought to use a web mobile framework.

As I never used them, I started to looking for the existing solutions. I has heard of PhoneGap, Titanium, Sencha Touch and jQuery Mobile.

Here is possibilities that I found :

• PhoneGap + Sencha Touch
• PhoneGap + jQuery Mobile (or an equivalent)
• Sencha Touch (API + UI)
• Titanium

The critical point in the application will be to allow users to take a photo and edit it : resize, add some text... On Android it's technically possible but with a web mobile framework I don't know.

With PhoneGap and jQuery Mobile for example, is it possible to do it ? I found parts of code for each function but nothing very complete, and not sure it'll be compatible on a lot of mobiles. For developping time, perhaps is it better to do 2 natives applications instead of trying to use a mobile framework (and develop the picture edition in Javascript) ?

And I found a lot of opinions on each framework but some of them were posted there is more than one year and they evolved so difficult to have a clear vision of all solutions.

So I would like to know if I could do realize this picture edition with one of these solutions and which could be the best.

Thank you for your help

Answer 1

Intro

Technically it can be done using all of your possibilities, I will rank them by the difficulty from low to hard, I will even few more possibilities. Also, I wrote much more extensive ARTICLE for my blog.

PhoneGap/Cordova + jQuery Mobile (Low difficulty)

Phonegap is what you need here, jQuery Mobile is only for the UI. Still this combination is very easy to implement together and there are a lot of working examples. Phonegap serves as a wrapper for HTML5/JS/CSS and it will give you an access to mobile phone functionalists. Phonegap will be used to take a picture and jQM will be used to modifications.

Here's a rather new PhoneGap + jQuery Mobile tutorial. If you want to see a MAcOS version of that article than take a look here.

Take a look HERE if you want to find a good source of information regarding differences between jQuery and jQuery Mobile a lot lot more.

PhoneGap/Cordova + Sencha Touch (Medium/Hard difficulty)

Unlike jQM, Sencha Touch is a bit harder (or a lot harder, depending on your javascript knowledge) to learn, especially if you don't have a good background knowledge with javascript or don't have a license for Sencha Touch designer tool. Go this road only if you have have enough time to learn something new. Sencha Touch version 2 has its own app wrapper so Phonegap is no longer needed.

If you want to find out more take a look at this ARTICLE that discuss the difference between jQuery Mobile and Sencha Touch.

Titanium Appcelerator (Medium difficulty)

Unlike previous two options, Titanium works a little bit different. Where jQM and Sencha are used to create a hybrid mobile app, Titanium appcelerator is used to create a native app from javascript code. Not too difficult to master, js code is pretty simple to be frank. While fast development tool it will be harder to properly style your native app (it's much easier process when building it native from scratch).

Inter App Framework / ex jqMoby (Low difficulty)

This framework is almost old as jQuery Mobile and now it is owned by Intel. Like Sencha Touch main goal of this framework is hybrid mobile app development and it works great. It is optimized for Android and iOS so expect faster execution then jQuery Mobile, also like Sencha Touch this framework has its own native app wrapper. Of course there are few bad sides of this framework like horrible documentation (at least during the point of writing this article). If you want to find more about this framework take a look at this ARTICLE.

Kendo UI (Low difficulty)

Excelent alternative to jQuery Mobile. Better, faster in any way. There's only one problem, it is a commercial product. It will cost you cca 200 USD.

Find more information here.

PhoneJS (Low difficulty)

Another excellent alternative to jQuery Mobile and Kendo UI. Much faster then jQuery Mobile, on the same level like Kendo UI. It has a great documentation, one of the best I so up to today.

Find more information here.

Read about it HERE.

Honorable mention

Goes to Rhomobile. Similar to Phonegap/Cordova but less used.

From the perspective of developing time it is faster to create a hybrid app then a native one. In your case, if you have a Java/Objective C knowlede stick with native app. No matter how much time you sink into hybrid app it will be good or fast enough.

EDIT :

Here's an Phonegap + jQuery Mobile example: http://therockncoder.blogspot.com/2012/07/jquery-mobile-phonegap-and-camera.html, there you will find a github link for Android and iOS implementation.

If you have never used jQuery then stick with Dawson Toth Titanium example. But if possible stick with jQuery Mobile.

UPDATE 1

You might also be interested in the open source PropertyCross project which demonstrates the same application implemented with a range of cross-platform frameworks (including Sencha, jQM and PhoneGap).

UPDATE 2

I have spent last few weeks review other HTML5 mobile frameworks. My comment can be found here and here.

Answer 2

Yes, you can do this in Titanium. A naive implementation is below, drafted and tested in 5 minutes.

To give you an idea what it could look like, refer to the following. Then look at TiDraggable, by Pedro Enrique, if you want to enhance it to let the user drag around text or images relative to each other: https://github.com/pec1985/TiDraggable

// This app consists of two visual parts: a canvas where the user does stuff,
// and a save button in the bottom right.
var win = Ti.UI.createWindow({
    backgroundColor: 'black'
});

// First, the canvas.
var canvas = Ti.UI.createView({
    bottom: 50,
    backgroundColor: 'white'
});
// It has a scroll view so the user can...
var scroll = Ti.UI.createScrollView({
    // ... zoom content in or out.
    maxZoomScale: 2, minZoomScale: 0.1,
    // .. and freely position the image.
    contentWidth: 1000, contentHeight: 1000
});
// Add the image to the middle of the scroll view.
scroll.add(Ti.UI.createImageView({
    image: 'http://appc.me/Content/kitten.jpg',
    width: 750, height: 426,
    hires: true
}));
canvas.add(scroll);
// Add some text.
canvas.add(Ti.UI.createLabel({
    text: 'Kittens are the best.', textAlign: 'center',
    font: { fontSize: 28 },
    color: '#000',
    bottom: 20
}));
// Add the canvas to the win.
win.add(canvas);

// Second, create the "save" button.
var save = Ti.UI.createButton({
    title: 'Save to Gallery',
    height: 30, width: Ti.UI.SIZE,
    bottom: 10, right: 10
});
save.addEventListener('click', function (evt) {
    // Turn our "canvas" view (and its children) in to an image,
    // and save it to the gallery.
    Ti.Media.saveToPhotoGallery(canvas.toImage(), {
        success: function () {
            alert('Saved!');
        },
        error: function () {
            alert('Oh no...');
        }
    });
});
// Add it to the win.
win.add(save);

win.open();