HTML5: A Powerful Tool for Mobile Application Development
An increasing number of people are seeing the Web on a mobile screen. Soon, they will outnumber desktop users. This has led to a need for better apps that are platform and device independent. HTML5 technology fits admirably into the scheme of things for c
Android and iOS have been dominating the mobile app-making business, while other native appbuilding operating systems such as Windows and BlackBerry are trying hard to catch up. The question that always arises is whether a business requires both a website and a mobile application. Meanwhile, there have been innovations in the new methodologies that will take over the present market. HTML5 is one such powerful and feature-rich tool to develop Web as well as mobile applications. It also reduces the functionality gap between mobile sites and applications. Many organisations, faced with deploying mobile apps across multiple platforms, are turning to HTML5 mobile application development to streamline the implementation of apps, and reduce costs and complexity.
HTML5 is the main domain for most of the cross- platform application development tools such as Apache Cordova, Rhodes and many others. These tools can be used to create applications which use native features such as GPS, camera, locations, contacts, etc. It also gives flexibility to the developer in developing a UX, using scripts and much more. Besides, these apps can be easily deployed using open source JavaScript tools. In May 2010, Google announced the creation of its Chrome Web Store, a marketplace for Web applications that are built with standard Web technologies (HTML5, CSS and JavaScript), and can be accessed and used by anyone using a Web browser that supports these technologies.
What is an HTML5 application?
HTML5 is not only used in mobile websites but also in mobile apps on mobile OSs (Ubuntu Touch, Firefox OS,
Tizen, etc). An HTML5 mobile app is a Web application developed with that version of the Web content standard and designed for smartphones, tablets and other handheld devices. The earlier versions couldn’t support the complex functionalities required for developing mobile applications. HTML5 makes it effortless to create a fully featured Web application that can be updated remotely with new functionality. As these applications are run from the Web rather than stored locally, the user is not required to download updates to view or use the app. With the rise in mobile device usage and mobile technologies, it has become a herculean task for developers to focus on one particular platform such as Android, iPhone or Windows. HTML5 apps eradicate this problem as they are examples of cross-platform development. HTML5 can create apps that are compatible not only with mobile devices but also desktop and notebook browsers, for an unvarying experience across all user devices.
Key features of mobile devices
Offline support: Offline support includes application cache, Web storage and indexed database APIs that store HTML, JavaScript, CSS and media resources, locally. Cache is used to create Web based applications that work even if the user is not connected to the Internet — for example, JavaScript calculator, Canvas based games, etc. To provide this support, a manifest file should be created which specifies the application’s resources. CACHE MANIFEST # Version 0.1 offline.html /iui/iui.js /iui/iui.css /iui/loading.gif /iui/toolbar.png /iui/Button1.png /images/books.jpg /images/author.png /images/bookcover.jpg The ‘manifest’ attribute should specify the URL of the manifest file, as follows: <html manifest="path/filename">
Multimedia: HTML5 apps have advanced capabilities for streaming video and audio data, handling graphics and animation. They also add semantic elements, form controls and multimedia components. To support multimedia, HTML5 has two tags, audio and video. A simple video tag is shown below: <video src=”myvideo.mp4” controls /> And to support different browsers: <video poster=”myvideo.jpg” controls> <source src=”myvideo.m4v” type=”video/mp4” /> <source src=”myvideo.ogg” type=”video/ogg” /> <embed src=”/to/my/video/player”></embed> </video>
Geolocation API: The geolocation API helps users to share their location with the websites. This is not actually a part of HTML5, but is implemented in JavaScript. It makes use of the available information of the longitude and latitude on the JavaScript page and sends it to the remote server.
A simple example is as follows: <script> var z = document.getElementById(“example”); function getLocation() {
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { z.innerHTML = “Geolocation is not supported by this browser.”; } } function showPosition(position) { z.innerHTML = “Latitude: “+ position.coords.latitude + “<br>Longitude: “+ position.coords.longitude; } </script>
Canvas: Canvas is particularly interesting since it facilitates the use of graphics without the need for any plugins or other technologies, other than JavaScript and CSS. It can be used to make interesting charts, graphs, images, arcs, etc. Transformations can also be performed on it.
Example: You can set up a canvas measuring the same size as the screen, as follows: canvas = document.getElementById(‘mycanvas’); // Set canvas dimensions canvas.width = window.innerWidth; canvas.height = window.innerHeight;
Frameworks for application development
There are umpteen frameworks for HTML5 application development. Here are a few of them.
JQuery Mobile: This is a unified user interface system across all popular mobile device platforms and is built on jQuery and jQuery UI.
Sencha Touch: This is used to create mobile apps for several platforms including iOS, BlackBerry and Android. It is one of the first HTML5 frameworks for mobile devices. It provides a native look and feel across platforms, with a comprehensive UI widget library and touch event management with CSS transitions.
SproutCore: This is an original JavaScript MVC library, which is built on top of JavaScript. It can also be used in native apps, which run on Android, BlackBerry or iOS by using PhoneGap (an open source mobile app development framework for hybrid apps).
JQT (JQTouch): This is a JQuery plugin, which consists of animation, automatic navigation and different themes for WebKit browsers. It uses HTML, CSS and JavaScript to give the experience of a native app.
Viziapps: Viziapps makes it easy to develop an application with the drag-and-drop feature. It is an online application platform. A user can also access backend data. One need not be a coder to use Viziapps.
HTML5 vs native applications
As we know, native apps are based on the native language; hence, each platform would have its own app. And some platforms would support different versions of the app. Whereas, once HTML5 apps are developed, they can run on many platforms and it is easier to maintain a single code base. This makes these apps less expensive than native apps. They can deliver bug fixes and updates without much trouble as they avoid distribution. They also perform live testing.
In spite of all these advantages, HTML5 in mobile devices has its shortcomings. The implementation varies from browser to browser and from one mobile platform to another. The animation, graphics, etc, do not perform as well as native apps under certain conditions. HTML5 apps often work erratically in the absence of a data connection. They do not have a secure storage and do not support background processing. HTML apps cannot compete with native apps when it comes to multi-touch gestures, GPS, etc.
But these aren’t the only choices we have. We have hybrid apps, which have all aspects of native code and reusable HTML5 runs on top of them. These apps emulate and have the look and feel of a native app. One of the most frequently used frameworks for hybrid app development is PhoneGap. It enables wrapping up of CSS, HTML and JavaScript code, depending upon the platform of the device.
The road ahead
Both native and HTML5 apps have their own pros and cons. Presently, the market for native apps is larger than the market for HTML5 apps. The impact made by the introduction of HTML5 apps has been revolutionary. Now, what will persist in the future depends on business requirements, developer preferences and technological advances. Hybrid apps have a top-notch future. As the browsers move towards extending support to HTML5, the future of these apps looks very bright.