Thursday, February 24, 2011
How HTML5 Is Aiding in Cross-Platform Development
Do you like this story?
The Mobile App Trends Series is sponsored by Sourcebits, a leading product developer for mobile platforms. Sourcebits offers design and development services for iOS, Android, Mobile and Web platforms. Follow Sourcebits on Twitter for recent news and updates.
As the mobile application space continues to explode, developers are increasingly using HTML5, JavaScript and CSS3 to aid in the creation of web apps and native mobile apps. This process is especially useful when dealing with cross-platform development or when working with content that already exists in some form on the web.
We’re going to take a look at how some of the best HTML5-centric, cross-platform mobile frameworks are being used to help developers deliver native app experiences on a variety of devices.
Why HTML5
Given the hype and buzz surrounding HTML5, it would be easy to believe that it is a technology that will do your laundry, mow the lawn and make you dinner. In truth, HTML5 isn’t the second coming, and it isn’t an officially ratified standard — yet. The spec continues to edge closer to completion, however, and when combined with JavaScript and CSS3, HTML5 can do some really incredible things.
This is particularly true for mobile devices. A de facto requirement for any modern mobile operating system is the inclusion of a modern HTML5-compliant web browser. The leading modern mobile platforms — iOS and Android — both use WebKit as their bases. Likewise, BlackBerry and HP/Palm are also using WebKit and Microsoft is going to release a mobile version of Internet Explorer 9 for Windows Phone 7.
What this means is that out of the box, modern smartphones and tablets support the bells and whistles that make HTML5 so special. It also means that developers can feel free to use those technologies when creating their applications and not have to worry that the device itself won’t support a particular function.
It also means that developers that choose to create HTML5 web apps for the desktop — like for the Google Chrome Web Store — can often use the same code when crafting an app for the iPad or for other tablets.
Earlier this month, leading iOS developer ScrollMotion released its first simultaneous e-book for the iPad and Chrome Web Store.
Because ScrollMotion has built its underlying app platform in HTML5, porting the content to a non-iOS device, like the Chrome browser, required very little work.
Platforms
Choosing what mobile platforms to support continues to be a vexing problem for developers both big and small. Supporting one platform can be difficult enough, but now developers not only have multiple operating systems to consider, but multiple device types as well. iPhone and iPad apps can be packaged together, but both require separate experiences and views.
Likewise, Android developers that want to target the upcoming wave of Honeycomb tablets will need to create variations of their apps for the different device types. Add in the BlackBerry PlayBook, HP’s TouchPad and the future devices from Nokia and Microsoft, and it’s not difficult for even a large development team to become overwhelmed.
Fortunately, this problem has created a microcosm of cross-platform mobile development tools. We’ve covered a number of these platforms and frameworks in the past, but we want to highlight a few that specifically target HTML5 and JavaScript.
Appcelerator Titanium
Appcelerator’s Titanium platform was designed from the offset to help web developers create mobile and tablet applications with ease. Over the last year, the platform has seen tremendous growth, and new features and devices are added at a fast pace.
Appcelerator recently acquired Aptana, which should ensure that the tools for building its apps continue to improve and evolve over time.
Some of the apps that have been built with Appcelerator include GetGlue for iPhone, iPad and Android and ScoutMob’s excellent iPhone app.
PhoneGap
PhoneGap is an HTML5 app platform that lets developers build native apps using HTML5, CSS3 and JavaScript. What really sets PhoneGap apart is that it lets developers create a full-functioning mobile web app but place that app in a native wrapper, so that it can use native device APIs and get submitted to the App Store or Android Market.
In essence, it enables mobile developers to create an app just as if they were targeting the mobile browser but with the benefit of being able to get into the App Store.
PhoneGap Build is a new service (still in beta) that lets developers quickly and easily create app-store ready versions of their apps for various platforms. It does all the work of compiling the code for various platforms and gives the developer a final build suitable for submission to the app market of their choice.
Ars Technica used PhoneGap to build its iPad app. This is a great example of using web standards to deliver an app that presents existing content in a customized view and experience. Clint Ecker’s post about how the app was built is worth a read.
Rhodes
Rhodes is a Ruby-based framework designed to help developers create native apps for a wide range of devices and platforms. The reason we included Rhodes in this roundup — despite being a Ruby tool — is that it uses HTML, CSS and JavaScript in its views. That means that HTML can be used for the interface aspect of the app — even if Ruby is what is powering the work on the backend.
The Unify Project is a set of tools designed to make it easier for developers to create smartphone apps using HTML5, CSS3 and JavaScript. Sponsored by Deutsche Telekom, Unify is published under a dual open source license (MIT and Apache version 2.0) and it uses PhoneGap, Adobe Air, Sass and the quooxdoo JavaScript framework.
Additional Tools
Using various mobile web frameworks alongside an HTML5 platform is a common approach to mobile app development.
Developer Pete Freitag recently gave a presentation on building mobile apps using jQuery Mobile and PhoneGap. Freitag made the slides available on his website and the presentation offers a nice overview of how to use two emerging web frameworks together.
Feitag’s tracking and reimbursement app Mileage Pad was built using PhoneGap and jQuery Mobile.
Other web frameworks that can be used alongside PhoneGap or Rhodes include Sencha Touch and SproutCore.
Or Just Make an HTML5 App
Of course, an increasingly viable option for mobile developers is to just use HTML5 to create a mobile web app.
As HTML5 gets better and browser support of HTML5 improves, the differences between running an HTML5 app in a native wrapper, a la PhoneGap, and accessing an HTML5 web app from an app shortcut on your home screen is going to continue to disappear.
Lots of companies — including Facebook — are looking at HTML5 as the future platform for their apps that target next generation devices.
Earlier this month, 37signals decided to forego building a platform-specific mobile app for its Basecamp product and instead created Basecamp Mobile. This decision initially drew some criticism, with members of the developer community questioning the company’s decision to just use HTML5.
With the recent Readability kerfuffle, it’s possible that more developers will start considering a mobile web approach for their applications. Readability’s Rich Ziade and Dan Benjamin discuss the issue in length, including what it means for mobile developers, on “The Daily Edition.”
The Future is Bright
Whether it’s through a framework, via an application wrapper or as the basis for a mobile web app, HTML5 is going to continue to be an important driving force for mobile application development.
In fact, as the technology evolves, we wouldn’t be surprised to see more HTML5 elements popping up in native desktop applications as well.
Are you using HTML5 when building mobile apps? Let us know.
This post was written by: a2TECH
a2TECH are a group of a professional bloggers, website designers and front end website developers. Follow on Twitter
Subscribe to:
Post Comments (Atom)
0 Responses to “How HTML5 Is Aiding in Cross-Platform Development”
Post a Comment