Beyond jQuery: JavaScript tools for the HTML5 generation

Today's JavaScript libraries are tuned for mobile devices, Canvas-based animation, HTML5 video, local databases, server interaction, and more

Over drinks, one person proclaimed, "No one programs in JavaScript, they just string together jQuery calls." This statement is certainly not true, but like a hand grenade, it gets close enough to make its point.

jQuery sure seems to be everywhere, and with good reason: Its creators took all of the neat ideas from libraries like Prototype, Dojo, and Yahoo's YUI, then turned them into something that was just a tad easier to use. When jQuery nurtured fertile plug-in culture, the library became irreplaceable. One seemingly random estimate claimed that at least 70 percent of JavaScript is jQuery. While there is probably no scientific way to make such a blanket statement, the fact that someone would try is good enough.

HTML5 Deep Dive
[ Also on InfoWorld: The great JavaScript debate: Improve it or kill it? | 13 essential programming tools for the mobile Web | JavaScript conquers the server | Get software development news and insights from InfoWorld's Developer World newsletter . ]

In the midst of all of this success, it's easy to forget that plenty of other JavaScript libraries are worth checking out. Some do much the same thing as jQuery, simplifying the basic chores of manipulating the DOM on all of the different browsers, while offering their own advantages. They may not be better, but they're different, and sometimes that's worth celebrating.

The Yahoo User Interface Library, for example, was one of the first big, cross-browser toolsets released as open source, and it remains one of the biggest and most fertile. Yahoo started version 3 in 2009, and both versions 2 and 3 continue to get better. The collection of charts, widgets, and other tools has more variety than almost any other JavaScript library. Yahoo has also devoted more attention to cosmetic issues than some of the others. Many of the features that drive Flickr and Yahoo Mail are here and waiting for your glue code.

Like jQuery and YUI, MooTools offers nice, browser-independent shorthand for manipulating arrays, divs, spans, and whatnot. My favorite part continues to be the custom library construction tool that lets you select the functions you want. Check some boxes and get an entirely optimized version of MooTools with just the functions you need and none of the bloat you don't. That's lightweight.

A number of other libraries offer newer features -- for animation or data visualization or server-side processing or other niches -- or different ways of thinking about life in the browser. To get a close look at some of these newer options, I unpacked a number of libraries, wrote a few lines of code, instantiated a few objects, and pushed some code through a few browsers.

Animation and HTML5 game engines

One of the stated goals of HTML5, at least for some groups, is to replace the Flash plug-in, the gold standard for making sprites and letters dance across the screen. This change is slowly coming as the game industry and the presentation industry start to duplicate some of the sophisticated tools available in the Flash universe.

Mashi is an impressive example of how the sprites can be set in motion. It offers more than several dozen standard easing functions for moving sprites along a timeline.

The list of game engines for the browser is long and growing longer now that the JavaScript canvas object is better established and relatively consistent. The results don't look as nice as Flash to my eyes, but I suspect that the gap will close dramatically.

If you like board games, you'll like the three-dimensional, orthographic views of game boards from pp3disco. It takes just a few lines of code to set them up. CasualJS was designed to be just like ActionScript for those with plenty of Flash experience. The authors at Crafty obviously spent a good amount of time on their collision detection. Fruit Ninja fans can play Crafty's Fruit Assassin in their browsers.

Video libraries

In theory, nothing could be easier than sticking a video tag into your HTML. In practice, the behavior of so many supposedly standard-compliant browsers is different enough that you'll be pulling out your hair if you try to support all of them. A number of good HTML5 libraries let you write standard HTML5 video tags that will be replaced with Flash or QuickTime if the browser isn't ready to handle your video.

The Video for Everybody project offers one of the better libraries, filled with features that operate in the background to smooth delivery on older browsers like IE8. And if Video for Everybody lacks the features you need, you can check out spinoffs like VideoJS and MediaElement.js, two projects that began with the Video for Everybody code before adding their own layer of events and controls.

VideoJS, for instance, makes it easy to change the appearance with a skinning layer. Some of the CSS files contain no images and, thus, minimize bandwidth costs, at least aside from the expense of delivering the video file. MediaElement.js offers a number of meta features, such as controlling captions and subtitles. One example illustrates how to let people choose the language in which the subtitles appear.

Big data visualization

If the pundits are correct, there are many, many terabytes of data just waiting for people to come along and try to make sense of the bits. The first generation of HTML5 libraries was more focused on building forms and generating tables. Now a number of libraries are zeroing in on building charts and drawing graphs on the <canvas> object.

You'll find plenty of great options for basic line graphs, bar graphs, and combinations. Flot, Flotr, Raphael, and JSCharts are just a few of the libraries that deliver solid renditions of the classics.

Some libraries go even further. The collection of demos for Protovis and its newer cousin D3 -- a name meant as shorthand for Data Driven Documents -- show how sophisticated constructions like Voronoi diagrams and network graphs can illustrate more than the up and down of some value. Simile Widgets offers a different collection of views that are more focused on maps and timelines.

These projects illustrate how we're just beginning to come up with good ways of turning data into pictures that can help us absorb large volumes of information quickly and efficiently.

One of the more interesting niches for visualizing data is drawing network graphs on the <canvas> tag, a feature that's useful for displaying social networks and flowcharts. Canviz is a collection of rendering algorithms that turn a network into a picture using a mixture of straight and curved lines.

Draw2D takes a different approach. It creates full Visio-like drawings that link together polygons to illustrate a workflow.


Most of us will continue to use the big mapping libraries for standard jobs like showing street addresses. But what if you want to do something a bit different, such as change the rendering or fiddle with the layers in ways that the big libraries don't allow?

Tile5 can pull the mapping tiles from such sources as GeoCommons, then lay them out so that the user can shove them around just like the maps from Google, Mapquest, or Yahoo. But there are other opportunities: The animation operation can change any of the parameters of the display. This is usually used for panning across the map and landing in one spot, not unlike the sequences in the Indiana Jones movies showing the plane flying over the map.

Pixel manipulation

If there's any indication that HTML5 is not focused on words and static images anymore, it's projects like Pixtastic, a JavaScript library that offers many of the basic features we've come to expect from Photoshop. Serious Photoshop users may be forgiven for rolling their eyes, because the more sophisticated features are nowhere to be seen. But there's enough to satisfy any casual editor of pixels.

There's a surprisingly large collection of pixel-level operations available, including the ability to tweak the colors and apply filters like the ones used to blur images or compute edges. The basic library is now several years old, but Jacob Seidelin continues to create examples of how it can be applied -- like this small Web application called Filterrific.

Mobile libraries and browser books

As the mobile browsers begin to dominate the Web, it becomes more and more important to package the information in a form that's easier to browse on smartphones and tablets. That's not so easy when the fingers are fat and the eyes can't focus on small fonts.

jQuery Mobile, Jo, and Sencha Touch are three libraries that offer touch-friendly menus that dig down into data structures and present the information for the small screen.

The iPad may be nice for reading, but its corporate masters demand a hefty percentage of the selling price for the privilege of being on the platform. A number of savvy programmers are writing text-reading tools that fit in the browser, allowing publishers to deliver directly to the iPad without paying the Apple tax or going through the Apple censorship gauntlet.

Treesaver creates magazine-like layouts that allow you to flip through pages of text and images the old fashioned way. The code is small -- just 25K -- and released under both the MIT and GPL license.

The Baker Framework is a similar project with a slightly different aesthetic approach. While Treesaver wants the text to flow into a convenient layout for the page, Baker assumes a constant width to make life easier for designers. Both of the tools make it possible to deliver booklike content directly from the Web.

Local databases

It's easy to forget that cookies can store 4,096 bytes of data. You would never want to store that much because each cookie is bundled together with subsequent trips to the server -- that's why local databases were invented. Taking advantage of them is getting easier as new libraries simplify the details of interacting with the API.

HTML5SQL, for instance, will feed relatively simple SQL statements to the database, allowing you to create tables, fill them with data, and then query them. You'll spend more time crafting your SQL than your JavaScript.

If you don't want to think in SQL while writing JavaScript, TaffyDB accomplishes much of the same tabular querying with JSON, and the queries and the updates can be chained together.

Server-side processing

The JavaScript libraries are traditionally aimed at the browser, but this is often just half of the problem. If you're going to write an AJAX call to the server, you need something at the server to field the request and compose a response. A number of libraries come with both client and server components that work in synchrony.

Both SAJAX and XAJAX are built for PHP. After you create a PHP function and register it on the server, the JavaScript code can call it and receive the results. It's an ideal way to add functionality without refreshing the entire page for each change.

Some of these libraries go a bit deeper. PHPLiveX, for instance, offers an integrated file uploading feature and some intelligent caching to improve performance. A number of libraries take this same approach, and of course some are more integrated with the standard libraries than others. jQuery-PHP is such an option for those who want a plug-in for jQuery.

There are good server-interaction libraries for almost every platform. Direct Web Remoting offers Java stack lovers the chance to call Java code on the server from the client with some security to prevent arbitrary calls. The code also includes a channel for the server to push some information to the clients that are logged in, a useful feature for broadcasting new information.

Many of these libraries offer a similar combination of code that lives on both ends of the connection, but nothing is as extreme as the Google Web Toolkit. All of the GWT code is written in Java and compiled into JavaScript to run in the browser. Pyjamas does something similar for Python programmers.

Debugging tools

One of the biggest challenges for JavaScript programmers is building larger applications, and bigger always means more debugging. While you can get by with embedding alert statements in smaller pages, larger ones require more structure for the debugging information.

Firebug, an extension for Firefox, offers an elaborate debugging platform, including conditional breakpoints and the ability to edit the state. The JavaScript can write directly to the console object with three levels of severity.

Blackbird is a stand-alone library that pops up a separate console window that looks quite elegant. You can set four levels of bugs and the user can turn the messages on or off. A profiler is ready to time the routines on the local browser.

Facing the future

The new features under the umbrella of HTML5 are both a blessing and a curse for any JavaScript programmer. They offer so many tantalizing new methods, but they're not all supported by all browsers.

Modernizr is mainly a collection of tests that checks to see what features are supported in the current browser. It's a simpler way to take advantage of the new while supporting the old. Most of the tests simply create a DOM object and see whether it accepts the commands.

1 2 Page 1