Follow Us

We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message

Javascript tools for the HTML5 generation

Programming tools for mobile, animation, video and more

Article comments

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 plugin 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.

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 optimised 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 visualisation 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 plugin, 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 behaviour of so many supposedly standards-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 minimise 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 visualisation

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 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 visualising data is drawing network graphs on the 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.


Share:

More from Techworld

More relevant IT news

Comments



Send to a friend

Email this article to a friend or colleague:

PLEASE NOTE: Your name is used only to let the recipient know who sent the story, and in case of transmission error. Both your name and the recipient's name and address will not be used for any other purpose.

Techworld White Papers

Choose – and Choose Wisely – the Right MSP for Your SMB

End users need a technology partner that provides transparency, enables productivity, delivers...

Download Whitepaper

10 Effective Habits of Indispensable IT Departments

It’s no secret that responsibilities are growing while budgets continue to shrink. Download this...

Download Whitepaper

Gartner Magic Quadrant for Enterprise Information Archiving

Enterprise information archiving is contributing to organisational needs for e-discovery and...

Download Whitepaper

Advancing the state of virtualised backups

Dell Software’s vRanger is a veteran of the virtualisation specific backup market. It was the...

Download Whitepaper

Techworld UK - Technology - Business

Innovation, productivity, agility and profit

Watch this on demand webinar which explores IT innovation, managed print services and business agility.

Techworld Mobile Site

Access Techworld's content on the move

Get the latest news, product reviews and downloads on your mobile device with Techworld's mobile site.

Find out more...

From Wow to How : Making mobile and cloud work for you

On demand Biztech Briefing - Learn how to effectively deliver mobile work styles and cloud services together.

Watch now...

Site Map

* *