offline HTML5 or native SDK for cross-platform app

Question

I am planning to build an app for selecting things from a menu and manipulating with it. I was earlier thinking of learning java and build on android, but then I came across HTML5 and JQuery mobile.

Can anybody guide me what should I start learning? I am planning to build a simple app. I just want a good GUI and want to write once. That's why I thought I'll work on HTML5 and then store it locally and open it in webview component of different platforms. So I will write once and use it on all platforms.

Am I going in the right direction?
Also tell me the difference between HTML5, JQuery and Phonegap

Answer 1

Html5 is the raw information. Jquery (a part of Javascript) codes the interactive elements. CSS is the design. Keep them all separate, web standards etc.

These technologies work for web-browsers, but non web-browsers cant read this code, like app stores etc. Phonegap packages this code so can be read on other platforms. So rather than redoing the code many times - write once publish everywhere, or somethign like that. It can be seen in this picture:

Answer 2

Phonegap is a framework which allows you to develop your application using HTML5, CSS and JavaScript and package it as a native app for each of the major mobile platforms. In theory you could write the application once and target the browser as well as the major mobile platforms (using Phonegap) with the same core codebase.

jQuery Mobile is a mobile development framework, built on HTML5, CSS and JavaScript which can be used in conjunction with Phonegap to build mobile apps. It provides a customisable, mobile-optimised user interface (think pages, headers, list items, form components) and a system for navigating between the pages of your application.

jQuery Mobile is dependant on the jQuery library which aims to make client-side scripting easier by papering over many of the browser inconsistencies which can make writing JavaScript difficult. It's particularly useful for selecting HTML elements and traversing the DOM, and is in use on 50% of all websites according to this survey.

Based on your description of the application and your stated desire to write code once which will run on various platforms, I would say that you are definitely on the right track.

Since it is built on these technologies, I would suggest you begin by trying to get a solid grounding in HTML, CSS and jQuery before looking at jQuery Mobile. I think you can probably ignore Phonegap for now safe in the knowledge that when you've built your application using the above technologies, you will be able to use the framework to package your application for the platforms you plan to target.

Answer 3

I'll go through each of them in plain English.

Phonegap is a set of API's to do things such as take a photo using the phones camera, use the devices accelerometer, geolocation etc..

Basically, it is a way of communicating (through javascript) between your application and the device. For example, to take a photo (open the camera) using Phonegap you would do something like:

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

This is in essence no more difficult than opening the camera in a native device language (ie: Objective C for iOS), but the beauty is that this piece of code would work on multiple device platforms (there are one or two little tweaks you have to do per device, but it is basically write once and use multi platform). So that's what Phonegap is. It is a bunch of API's to communicate with multiple device platforms using the same code.

jQuery, and more specifically in your case, jQuery mobile is a javascript library used mostly in user interface design (as well as Ajax). It makes it easier to perform animations (things like an image fading in, or moving across the screen), event handling (what happens when a user clicks, hovers, focuses on, an image or button or any element). For example, look at the following piece of code:

$('.mybutton').click(function(){
    $('#myelement').fadeOut(500);
});

Those 3 lines of code fade out a specific image when a user clicks on a specific button in 500 miliseconds. Short and sweet. So that's exactly what jQuery is, a library that makes creating a nice UI easier.

jQuery mobile is (as the name suggests) aimed at mobile platform development. So besides the animations and events of jQuery, it includes functionality for touch and gestures (swipes etc..), as well as a great framework for handling pages and navigation within a mobile application.

HTML5 is the latest generation of HTML which is designed to provide a comprehensive application development platform for web based content that eliminates the need for 3rd party plugins like flash or java. Audio visual playback, drag and drop, local file storage with webSQL, and of course the canvas element for advanced drawing and animation.

Basically it's just the new version of HTML which allows a lot more modern functionality.

Are you heading in the right direction? Yes, you definitely are. While learning a mobile platforms native language has its perks and is well worthwhile, a lot of developers are turning to more universal platforms such as Phonegap.

A great place to start is right here (StackOverflow), and I would definitely suggest having a good read through the documentation for Phonegap and jQuery Mobile and playing around with some of the demos.

Here are a few useful links on the subject:

• Questions and Myths About PhoneGap
• Intro to Phonegap
• jQuery Mobile: What Can It Do for You?
• What is HTML5? (video)

Good luck and have fun