Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript

By Scott Clark

The rise in the use of mobile devices has led many a developer to throw up their hands in frustration. Should a business require both a website and a mobile application? This report discusses why the future may be lie in HTML 5, CSS and JavaScript applications that work equally well on all mobile platforms.

Many developers have come to the conclusion that they need to focus on a particular mobile platform, such as the iPhone, Windows 7 or Android. Others have begun to realize that there are already many development tools which allow them to take advantage of their current skillsets, whether it is HTML, CSS and JavaScript, or actual programming languages such as C or C++. These mobile application tools, as we discussed in our Special iPhone Report for Developers, are used to create native applications which can utilize the majority of the native features of mobile devices, such as the GPS, camera, contacts, accelerometer, etc.

Mobile Web App Development Tools

PhoneGap is an open source development framework for building cross-platform mobile apps using HTML, CSS and JavaScript. It enables developers to utilize the core features of the iPhone, Android, Palm, Symbian and Blackberry smartphones, including geolocation, accelerometer, contacts, sound and vibration. PhoneGap is free, however it requires additional software specific to the platform that is being developed, such as the iPhone SDK for the iPhone, Android SDK for Android, etc. The use of PhoneGap is only a bit better than creating an app for each platform, as you will still need to compile each app for each specific platform, even if the basic code is the same.

Some, such as Rhodes, allow developers to create native apps for almost all mobile platforms, including the iPhone, Windows Mobile, BlackBerry, Symbian and Android. Similar to PhoneGap, you will have to compile the code for each platform separately. It also supports the native features of most smartphones, including geolocation, contacts, and camera image capture. Rhodes is free under the MIT License. A cloud computing service called RhoHub enables developers to develop applications online using the Rhodes framework, with no need for them to have the latest SDK for each platform on their computer. Apps are created using HTML and Ruby, and are actually built in the cloud.

What About Truly Portable HTML 5 Web Apps?

Recently developers have been excited by the prospect of application development using technologies that work across all platforms. One such tool, iUI, the iPhone User Interface Framework, uses JavaScript, HTML and CSS, and is utilized to create web applications that work on any browser with HTML 5 support. Although it was designed to create apps with the look and feel of a native application built with the iPhone SDK, web apps created using iUI will work on almost all smartphones that include a standards-compliant web browser. iUI is still relatively new, and doesn't have a User Interface, so it does require some patience and skill to use. Other, similar frameworks include iWebKit and JQTouch.

Another mobile development tool is Sencha Touch, an HTML5 Mobile App Framework. Like iUI, Sencha Touch is powered by HTML5, CSS3, and JavaScript, and works on the Android, iPhone and iPad platforms, as well as other HTML 5-compliant web browsers. It supports touch events, such as pinching and stretching, and can be web-based or wrapped in an Objective-C layer for distribution on mobile app stores. Sencha Touch is open source software, so if you are developing an open source application with a license compatible with the GNU GPL license v3, it is free to use. Sencha even has a Getting Started with Sencha Touch tutorial which features geolocation, uses the Sencha Touch API and Google Maps to display a map of the user's location.

Chrome App Store: HTML 5 Apps on Stage

In May of 2010, Google announced the creation of its Chrome Web Store, a marketplace for web applications that are built with standard web technologies (HTML 5, CSS and JavaScript) that can be accessed and used by anyone using a web browser that supports these web technologies (such as Chrome, Safari, Opera or MSIE9). When users "install" a web application from the Chrome Web Store, a shortcut is added for which allows them to access the app, which opens in the web browser. Google hasn't given a date when the store will officially open, but once it is open, there will be no approval process for developers to wade through, and no fee is required in order to submit an application.

Will Web Apps Eventually Become the Standard?

The World Wide Web Consortium (W3C) recently returned to work on the HTML 5 specification after years of absence. Their return has produced tensions with the Web Hypertext Application Working Group (WHATWG), a group of browser makers (including Opera Software, Mozilla, and Apple) who began work on the standard in June 2004. Ian Hickson, who is the editor of the HTML5 specification, expects the specification to reach the Candidate Recommendation stage during 2012, but doesn't expect it to become an official W3C Recommendation until the year 2022 or later--that's right, over 12 years from now. And now for the good news...

All the major mobile platforms, including Apple's iOS, Google's Android and Palm's WebOS, use similar WebKit-based browsers, so technologies like HTML5 and CSS 3 will continue to be improved and supported. Even Microsoft is coming to the plate with support for HTML 5 forthcoming in MSIE 9. Though it may not become an official standard for a decade, it is increasingly being supported by the major browser vendors, and more sites and services, such as YouTube Mobile, Google Gmail, Scribd, and Apple's iPhone and iPad are using HTML 5 instead of plugins such as Adobe's Flash. HTML 5 is here to stay.

There will always be businesses who feel that they must have a native mobile application for each major platform, however many are starting to be more inclined to work smarter, not harder. The emerging web standards can be used to create compelling applications, as demos from Apple, Google and Sencha show. In the future, a web application should work for the majority of mobile platforms, if not all of them, and it should work on any HTML 5-compliant web browser, whether that browser is on a mobile device or a desktop PC.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •