What does building an HTML5 web application entails?   Leave a comment

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.


Posted July 1, 2011 by Ohad Kravchick (myok12) in HTML5 Development

Tagged with , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: