10 apps pushing HTML5 to the limit

HTML5 is breathing new life into Web applications, hinting at major shifts in programming to come

The basic Web application paradigm hasn't changed in almost two decades. Even the latest, slickest HTML5 websites resemble those of the early days of the Web, at least at their core. A developer wraps tags around data and writes a bit of JavaScript to make the sites somewhat more interactive. So what's all the big fuss over HTML5 being a game changer for apps on the Web?

First off, while the model hasn't varied, the feel of the sites deploying the latest HTML5 features is dramatically more interactive and dynamic. Whereas yesterday's Web offered essentially static displays of data, HTML5 forerunners are serving up dynamic presentations through which the data moves and flows quickly. Relatively small enhancements such as these make all of the difference in speed and sophistication.

[ Find out how to hack your browser in 7 easy steps | Also on InfoWorld: "HTML5 in the browser: Canvas, video, audio, and graphics" | "HTML5 in the browser: Local data storage | "HTML5 in the browser: HTML5 data communications" | "HTML5 in the browser: HTML5 forms" | "HTML in the browser: Geolocation, JavaScript, and HTML5 extras" ]

HTML5 Deep Dive

The emerging HTML5 model for Web apps differs in four major areas. The most visible may be the relative standardization of the canvas object, an improvement that makes it easier to write Flash-like animations with JavaScript. The results are often just as, well, flashy as the ones that come from Flash for anyone who's able to put in the time. Casual game developers who used to write for Flash are producing slick games that run in JavaScript alone.

Developers continue to report that the tools and libraries for Flash code are substantially better than those for HTML5, but this is changing. The gap will probably narrow, given the major push by the browser makers to cut Adobe out of the loop, but it may be difficult to unseat Adobe, considering the depth and quality of its tools.

The other major differences lie below the surface. The latest browsers offer Web developers a local database for caching several megabytes of material. Most users won't even notice this reliance on the browser for data caching; they'll just feel that some data-centric apps are livelier. The lag from waiting for the Internet is disappearing.

There are many other HTML5 features that make it easier for Web developers to build applications that offer responsiveness on a par with that of native applications. Improved forms, more sophisticated layouts, and richer background work all offer smooth performance that may not be as immediately apparent as dancing sprites on a canvas object but still add up to more usable tools.

Smart designers see HTML5 as a way to create a single design out of basic tags and CSS directives that works well on many different machines and on many different screen real estates. It's never perfect, of course, but it's easier than writing Java for the Android phone, Objective-C for iOS, and an entirely different Objective-C for Mac desktops.

Can HTML5 help the Web supplant native code? Only time will tell, but for now here are 10 Web apps that highlight the best that HTML5 can deliver.

HTML5-optimized app No. 1: TweetDeck

In the beginning, TweetDeck was just a native application. Then the company recognized that Web apps were becoming more common and powerful, and it wanted TweetDeck to remain a leader.

James Whittaker, an architect who helped craft the user experience of the Web version of the product, said that while he knew that moving the application to the Web would be a challenge, the extra features made it possible to design a sophisticated version of the application.

"The beauty about working in HTML and JavaScript is that you can accomplish almost anything," he said. Then he preceded to grouse about the cross-domain security limitations of HTML5 that restrict an application to calling only its home server. His group worked around these limitations with proxies and by embracing the HTML5 notification API, which TweetDeck used to avoid endless server polling.

Local storage was among the most valuable additions to HTML5 as far as TweetDeck was concerned. This new feature allows TweetDeck to cache data used for autocompleting forms and account details. This data has traditionally been kept on the server, forcing the user to wait seconds for the latest tweets to kick in.

Whittaker also praised many granular enhancements to CSS and HTML, such as gradients that improve the look and feel. HTML5's audio tag has also given TweetDeck "the ability to play the famous TweetDeck chirp when you get updates."

HTML5-optimized app No. 2: Pirates Love Daisies

Grant Skinner is CEO and chief architect of a design firm that once specialized in Flash games. Then Microsoft asked his outfit to create something to show off the promise of HTML5 and the power of Internet Explorer 9. The casual game called Pirates Love Daisies was the result. "Microsoft is really focused on graphics performance. One of our big goals was to build a game that showed off what IE could do," he explained.

The game comes with a button that can turn on and off dust storms, shadows, and "a lot of visual extras that you don't get on other browsers." IE9's tight integration with the graphics card allows it to draw more details on the canvas object at a faster frame rate. It still can't approach a native game, but there's a big increase in visual complexity after pushing the button.

While he praised the performance and the new opportunities, Skinner said his firm had to build a number of tools and libraries that they take for granted when creating Flash games. He also said there were plenty of glitches and the technology was "still maturing."

The audio tag, for example, behaves differently in many browsers, requiring plenty of code to smooth over the inconsistencies. On iOS, with the Safari engine, "you can have one active audio tag. And you can only play it on touch event." Getting the page to make a noise to accompany another event, such as the arrival of new data, is not possible.

HTML5-optimized app No. 3: NakshArt

If you look up in the night sky to see stars, identifying the major constellations is simple with NakshArt. The HTML5-savvy site collects your location and time from the browser, then uses this data to compute what the night sky should look like. NakshArt also stores the information about the night sky in a local database to make the site more responsive on repeat visits.

While all of these features make it much easier to display the stars in the right location, Premkumar Seshadri, president at HCL Technologies, says that HTML5 still feels unfinished. "Canvas elements lag lots of visual features, like 2D line effects," he said. "There is no straightforward way to create dotted lines."

Seshadri says he's built a number of sophisticated libraries on top of the line-drawing primitives. "Once canvas matures like today's Flash, you'll get to see a lot many sophisticated applications," he predicted.

HTML5-optimized app No. 4: Aviary

Does Photoshop still cost hundreds if not thousands of dollars? There are fewer and fewer reasons to buy it because of the burgeoning world of HTML5-based image editors that are following quickly on the heels of the Flash-based tools. If you want to diddle with the pixels and build up images from layers, these HTML5 image editors are hard to distinguish from Photoshop.

A true professional will find that many of the features aren't as powerful or as sophisticated as the high-end product from Adobe, but most of us aren't professionals who watch the pixels so closely. Aviary is just one of several great tools for editing images in an HTML5 canvas object. It's like Photoshop without the price or the installation hassles. It may not have as many features as Photoshop, but it comes with many of the most important ones to suit your needs.

HTML5-optimized app No. 5: Scribd

A document storage site, Scribd now sends out HTML5 versions of documents that don't require Flash. The company started out with Flash because its font support was much better than raw HTML. Now that HTML5 supports many fonts, documents are more likely to look correct. Is it perfect? It looks pretty good, but fonts are one of the hardest elements to get correct.

The look isn't the only advantage. Scribd's HTML5-rendered documents behave more like regular HTML -- because they are HTML. It's possible to cut and paste the letters even if they're plopped at strange angles in weird parts of the canvas object. They're not a drawing or a PDF; they're just letters that react to the mouse. Scribd uses the tagline, "All the world's documents, living online as part of the fabric of the Web."

HTML5-optimized app No. 6: Basecamp Mobile

37Signals is known for building good Web applications that help people organize their work. When the smartphone market came along, the company invested in native applications because it knew people would want to check off tasks with their phone. After hiring a native developer for the iPhone, the company watched Android bloom. Then the team started wondering about the BlackBerry and other phones.

"Eventually we came to the conclusion that we should stick with what we're good at: Web apps," said Jason Fried. "We know the technologies well, we have a great development environment and workflow, we can control the release cycle, and everyone at 37signals can do the work."

As a result, the company's mobile version targets WebKit browsers and delivers most of the slick HTML5 features that the desktop version does in a package that's tuned to the small screen size of smartphones.

HTML5-optimized app No. 7: PhobosLab

The road for most HTML5 applications usually goes through the browser, and PhobosLab took the standard path when creating games like Biolab Disaster and Drop JS. But when PhobosLab ported the Web-based games to the iPhone using UIWebView, performance wasn't as good as it expected. UIWebView, the standard module for displaying full HTML, JavaScript, and CSS in native iPhone apps, wasn't as nimble as PhobosLab wanted for its games.

The trouble was PhobosLab didn't want to rewrite the game because the company wanted to reach people in browsers everywhere too. It dug a bit deeper and excised the unnecessary parts of the equation by linking the Core JavaScript engine with the OpenGL engine. All of the HTML rendering and CSS decoding is cut out of the loop. Now you can play the company's games in two ways: as a native app that interprets JavaScript or as a Web application. Both run the same code base.

"I only used a very small subset of the Canvas API, most important drawImage(), which works almost the same everywhere as far as I can tell," said Dominic Szablewski. "For 2D games there's not much else you need."

Along the way, PhobosLab also fixed a few other issues with the performance of the audio and the way that multitouch events are handled. The company found, for example, that the linkage between the audio and other parts of the program, such as the animation, wasn't consistent across platforms. Szablewski reports that the behavior of audio tags across the various browsers makes it difficult to synchronize sound with events -- an important element when writing games with bouncing balls. He's able to work with single platforms like the iPhone, but he's still not able to count on consistent performance in the wide range of browsers.

"I hope that this solution of reimplementing canvas and audio won't be needed anymore in a year or two, when the iPhone's browser has fixed all these issues," said Szablewski.

HTML5-optimized app No. 8: Walking Man

If you thought CSS files were just for choosing the size of fonts or the color of the background, take a look at Andrew Hoyer's Walking Man. The HTML is just a collection of DIVs that old pictures of the torso, arms, and legs. The CSS file changes the position of the DIVs, dynamically making the picture walk like a human. This wouldn't be amazing if it were done with JavaScript, but it's an eye-opening way to see the power of the WebKit animations in CSS that most of us never use.

HTML5-optimized apps No. 9 and 10: Google and Yahoo

If this were a truly fair list of extreme HTML5 projects, it's possible that Google and Yahoo would take up 70 to 90 percent of the entries.

From pathbreaking products like Gmail to the Java-to-JavaScript compiler known as Google Web Toolkit to the incomparable Google Maps, Google continues to push the edge of what the browser can do. And it's worth remembering that Yahoo was driving HTML5-like applications while Google was just a search company. Yahoo's User Interface libraries are still great, and there are many people who like Yahoo Mail much more than anything Google delivers.

Both Yahoo and Google engineers are major contributors to the HTML5 committees, and both companies continue to develop tools that help drive the standards. An open, capable Web browser helps both companies, and they devote the resources to nurturing it. This slick presentation from Google is just one example of its plans for expanding the power of the browser to drill down into the file system and work with individual bits. Will anyone dream of programming in C after seeing it? I'm not so sure.

This story, "10 apps pushing HTML5 to the limit" was originally published by InfoWorld.

Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.

Copyright © 2011 IDG Communications, Inc.

IT Salary Survey 2021: The results are in