17 JavaScript tools for the HTML5 generation
Look beyond jQuery and you'll find a wealth of JavaScript libraries tuned for mobile devices, Canvas-based animation, HTML5 video, local databases, and more
Beyond jQuery: 17 JavaScript tools for the HTML5 generation
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 easier to use. When jQuery nurtured a fertile plug-in culture, the library became irreplaceable.
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, while offering their own advantages. A number of other libraries offer newer features -- for animation, data visualization, or other niches -- or different ways of thinking about life in the browser. Here are 17-plus JavaScript libraries worth adding to your toolset.
[8 reasons to gear up for HTML5 now and New HTML5 control blends Web with native mobile apps]
YUI (Yahoo User Inferface)
The Yahoo User Interface Library 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.
Mashi
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.
MooTools
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.
pp3Dico
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 pp3Diso. It takes just a few lines of code to set them up.
VideoForEverybody
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.
Raphaël
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. Raphaël is a small JavaScript library that should simplify your work with vector graphics on the Web.
JSCharts
Also among the libraries aimed at chart building is JSCharts, which allows you to easily create charts in different templates like bar charts, pie charts, or simple line graphs.
Flot
Flot for its part produces graphical plots of arbitrary datasets on-the-fly client-side, and it includes interactive features like zooming and mouse tracking.
Protovis
Some libraries go even further for data visualization. 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
Simile Widgets offers a different collection of views for data visualization that are more focused on maps and timelines. Each of these data visualization 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.
Tile5
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 different, like change the rendering or fiddle with layers in ways 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.
jQuery Mobile
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.
HTML5SQL
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.
TaffyDB
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.
Firebug
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
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.
Gameboy
This collection of JavaScript libraries only scratches the surface because a wide collection of translators and emulators makes it possible to run practically any language in your browser. Pyjamas is a rich development platform built around a Python-to-JavaScript compiler. The Google Web Toolkit converts Java into JavaScript, and RubyJS converts Ruby. The list of languages that can be emulated is long, and practically nothing is out of reach. Rather than continue to list them, I'll just link to a Gameboy emulator to prove the point.
Originally published on InfoWorld| Click here to read the original story.
