10 Web apps pushing HTML5 to the limit

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

1 2 3 Page 3
Page 3 of 3

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 Web apps pushing HTML5 to the limit" was originally published by InfoWorld.

Copyright © 2011 IDG Communications, Inc.

1 2 3 Page 3
Page 3 of 3
7 inconvenient truths about the hybrid work trend
Shop Tech Products at Amazon