In-Depth
HTML5 Reality Check: Tools and Strategies You Can Use Today
Let the pundits debate Flash versus Silverlight versus HTML5. You need to develop software and want the real story. HTML5 offers many benefits to developers that are usable today with the right tooling and adoption strategies.
There's little doubt by now that HTML5 is a disruptive technology. It’s portrayed as a hit man targeting popular plug-ins Flash and Silverlight. It’s used as a rocket for launching rich mobile experiences. It has even made unlikely bedfellows out of fiercely competitive tech heavyweights--Google, Apple and Microsoft.
HTML5 has arrived with promises of a utopian future for software development; and warnings that the technology is unable to meet such lofty expectations. It’s time for an HTML5 reality check.
Let the pundits debate Flash versus Silverlight versus HTML5. You need to develop software and want the real story. HTML5 offers many benefits to developers today with the right tooling and adoption strategies.
HTML5 Today The HTML5 specification, which is guided by the World Wide Web Consortium (W3C), is still in the
W3C Working Draft stage. It is described as "the vocabulary and APIs associated with HTML and XHTML." The
Web Hypertext Application Technology Working Group (WHATWG) originally started work on the specification and agreed to work with W3C, although the specs from each group are not identical.
HTML5 is packed with new APIs and features that offer benefits for dynamic applications far beyond static Web pages. Finding these elements in the HTML5 technology stack simply requires an understanding of what’s usable for applications today, and which features need more time in the standards oven.
HTML5 features that are broadly deployed across modern browsers are generally considered usable today. While not formally classified, there is a crop of HTML5 features that are more stable (as a standard definition) and ready to use than others. This group today includes Canvas (2D), local storage, video H.264, microdata, Cascading Style Sheet 3 (CSS3) selectors, and even geolocation. Of course, usable can mean different things to different applications; adoption strategies have a direct impact on how much of the HTML5 technology is applicable today.
Features defined by HTML5 that do not make the "stable" cut are riskier to use. These features tend to represent elements based on rapidly evolving specs that are in a constant state of flux. Some browsers support these "beta" HTML5 features, even though the technology may change significantly in the future. Features in this category include WebSockets for bi-directional communication, WebGL for 3D graphics, IndexDB for storing data in the browser, HTML5 Forms, File API and the essential Offline API.
Usable today or usable tomorrow, HTML5 technologies are unlocking software possibilities in an unprecedented way. Capabilities usually found in "native" apps are now exposed to truly "universal" apps that can target virtually every platform and device. Achieving true universal support, however, requires a little additional plumbing.
Adoption StrategiesHTML5 is not a singular thing. While everyone likes to refer to "HTML5," the term itself does not describe a monolithic technology, or even a technology standard. Rather, HTML5 is a convenient umbrella term for a number of things that are evolving at different rates, and converging to create a richer, standards-based Web platform. Adopting HTML5, therefore, is not an exercise in looking for "finished" HTML5 implementations, but instead for uniformly evolved features across the HTML5 runtimes (also known as browsers).
But HTML5 has not uniformly evolved, and as a result more strategy is needed to successfully adopt the technology. Four common strategies offer ways to adopt more of HTML5 today, depending on your willingness to mix technical "band-aids" with smart design decisions.
Lowest common denominator: Perhaps the simplest strategy, this approach dictates that only features supported by all target browsers are used. While this is the best way to guarantee all browsers have an equal experience, the impact is usually equally poor, leaving modern browsers largely under-utilized.
Polyfill enriched: Polyfill is a new HTML5 vocabulary word that describes JavaScript "hacks" used to give older browsers the appearance of supporting HTML5. Done correctly, a polyfill allows code written to target a modern HTML5 browser to run on older browsers with no modifications. It’s a transparent solution that helps equalize browsers.
This is a useful strategy to broaden the scope of HTML5 features that can be deployed while still maintaining a consistent user experience across old and modern browsers. For example, using polyfills can enable HTML5 semantic tags and canvas elements to work in old browsers like Internet Explorer 6 (IE6).
Alternate experiences: Sometimes an HTML5 feature just can’t be recreated with a polyfill (or shouldn’t be due to performance considerations). In those cases, the HTML5 feature can still be adopted if alternate experiences are designed for browsers lacking support. There are two ways to create alternate experiences:
- Graceful degradation: Also called "down-level" experiences, this approach starts by designing for the best case HTML5 feature set, and then provides stripped-down experiences for browsers that lack support.
- Progressive enhancement: This is the flip side of the same design coin. In this case, HTML5 apps are designed for a core experience that works on all browsers, and then richness is added as features are available.
Vertical target: In this final strategy, specific “vertical slices” of HTML5 functionality are targeted. Rather than focusing on experiences tailored to any HTML5 browser, this strategy targets specific products (such as Chrome or IE9) or a class of browsers, such as mobile.
This strategy is difficult to use for Websites that target the public Internet, but it is useful for targeting mobile devices. HTML5 support is more uniform on mobile than on the desktop because there are far fewer legacy browsers to contend with and HTML5 can be more aggressively adopted.
Checking for HTML5Regardless of the HTML5 adoption strategy chosen, all adoption paths generally require some level of feature checking. Before writing code that depends on a specific HTML5 element, the best practice is to verify that the feature is available in the current HTML5 runtime. Two common ways to do this today are by hand and with compatibility libraries.
Just like it sounds, checking for HTML5 features by hand requires manual JavaScript code that looks for the presence of specific HTML5 JavaScript APIs or element behaviors. For example, checking for canvas support by hand might require JavaScript code like this:
return !!document.createElement('canvas').getContext; It’s simple, but each feature check requires a slightly different technique. Mercifully, there is an alternative.
The most popular HTML5 compatibility library today is Modernizr. Open source, Modernizr provides a single, consistent API for checking HTML5 and CSS3 features, eliminating the need to do all checks by hand. The same check for canvas with Modernizr would look like this:
return Modernizr.canvas;
Real HTML5 ToolingHTML is not a new technology. In fact, it’s one of the oldest Web technologies, introduced roughly 20 years ago by Internet godfather Tim Berners Lee. As a result, hundreds of tools today can help you author HTML productively. Many tools, including Visual Studio, have already been updated to provide HTML5 awareness.
When it comes to HTML5 tooling, it’s not the HTML that’s hard. It’s the two tightly related technologies: JavaScript and CSS.
Unlike previous versions of HTML, HTML5 is evolving with direct dependencies on new JavaScript APIs. These programming interfaces are used to draw on the canvas, to control video playback, and to make things like geolocation work. Exploring and understanding these APIs requires a new class of tools. Two kinds of tools support this new generation of HTML development-- browser developer tools and traditional IDEs.
Every modern Web browser ships with a collection of built-in developer tools. On most browsers, these tools are an F12 keystroke away. The tools provide powerful solutions for inspecting and editing HTML, debugging JavaScript and analyzing CSS styles.
Unfortunately, browser tools are more suited for debugging and improving existing HTML5 code rather than originating HTML5 code. Still, they are the ideal "native" tools for prodding the capabilities of modern browsers.
For lack of better solutions today, traditional HTML IDEs remain the best tools for originating HTML5 code. Tools like Visual Studio are starting to ship regular Web Standards Updates that keep the tooling’s IntelliSense and schema validation in-sync with the latest standards evolutions. Adobe has embraced HTML5 with the CS5 release wave, adding support to tools like Dreamweaver and, yes, Flash. And a new crop of IDEs focused on HTML5, some of which run directly in the browser on HTML5, are starting to pop-up, embracing the idea of cloud-based software and really putting their money where their mouth is, like Cloud9 IDE.
There's no doubt HTML5 tooling will improve, and improve quickly moving forward. HTML/CSS and JavaScript are the true universal languages; they cross-cut development communities more than any other language. Virtually all development camps, including Microsoft, Adobe, Google, Apple, Ruby and PHP are involved with HTML5, which means there is a lot of incentive to build great tools for HTML5 development and a lot of attention on the problem.
Reality CheckedHTML5 has arrived and it has momentum. From Microsoft’s recent move to back HTML5 in a major way in the upcoming Windows 8 release to Google’s HTML5-charged Chrome OS, HTML5 conversation and hype are in full swing.
Don’t get lost in the fluff. HTML5 can be used universally with the right adoption strategies, and the tooling support is rapidly improving. HTML5 is disruptive, but it is full of opportunity and delivers real benefits to applications today.