What does building an HTML5 web application entails?

Difficulty: easy moderate challenging

We all understand what HTML is, but how is an HTML5 app different? Before we go into the different components we use in an HTML5 app, let’s try to comprehend the major difference between a web site and a web app. While web sites can only be used when the user is online, web apps can be used when offline as well. To do just that – to allow a web app to work offline, you have to use either HTML5′s Offline Web Applications feature or a mobile application framework, such as PhoneGap.

But that’s just the beginning. This small-looking difference actually changes a lot. First, as your app is available offline, it cannot always access your servers and hence if it displays information, it has to retrieve and store data when online and load it again when offline. This also means that data cannot be embedded into the HTML as in normal sites, but rather has to be retrieved separately using JavaScript. This is done using AJAX calls to some server, usually a web service one, and retrieving the data in a special format — JSON. Then this data has to be stored. HTML5 provides a couple of options here: cookies, local storage, Web SQL, IndexDB, and even Files API, providing for different storage requirements.

Now, because the data is stored and accessed using JavaScript, you can no longer build web pages using just HTML. Instead, you need to build your UI as template and populate the data in it, all using JavaScript. Here CSS and opting for the jQuery framework will become extremely useful. And as you would probably want your app to look like any other native mobile application, you should consider using a Mobile UI Framework, for instance, Sencha Touch or jQuery Mobile. It will save you the hassle of building iPhone-like buttons, list boxes, checkboxes, date pickers, dialog boxes, and other UI components.

Lastly, if your application needs to access hardware, e.g. camera, GPS, accelerometer, compass, battery information, etc., you can either implement this code using the latest HTML5 features, which are still not fully supported on all mobile devices, or you can use a mobile application framework, PhoneGap for example, and make use of their hardware capabilities exported into JavaScript.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.