11 must-have JavaScript tools for Web developers

From Web app frameworks to data visualization in real time, these tools have your next Web project covered

11 essential JavaScript tools for Web developers
Piotr Zajc

11 essential JavaScript tools for Web developers

JavaScript’s plan to take over the World (Wide Web) is well underway. But the explosion of tools leveraging JavaScript’s ascendancy make choosing the right one for the job challenging, to say the least.

Here are 11 emerging tools for using JavaScript (in concert with other languages) to create modern websites with all the features users have come to demand. They offer clean design and simple interfaces that can be deceptive because the tools are often quite powerful, too. All of the years of evolution and redesign are paying off with tools that do more of what we want with fewer configuration hassles.

Meteor

Meteor

The seven principles underlying the Meteor Web app framework provide a solid foundation for modern software development. Some are practical, like embracing the open source community to facilitate plug-in contributions. Meteor does that. There are plenty of great plug-ins already. 

Other principles are technical: Design a simple API, send only the data over the wire, and use the same language everywhere. And by same language, the founders mean for coding (JavaScript) and database access (MongoDB), something they’ve facilitated by building a local emulator for the client. The image shows some simple code creating a local Collection, a data structure that emulates MongoDB to store data locally. The same code can store data locally or in the back-end MongoDB server.

Epoch

Epoch

Data visualization is all the rage on the Web. While there are many tools for creatively displaying data in eye-catching ways, few compare with D3.js. Now, the folks who created Epoch have gone one step further. They’ve taken the basic D3 libraries and added enough piping to make them run smoothly and continuously in real time. You can now add clean, clear charts for your users that update as they watch. Dashboards have never been easier. The image shows a real-time bar chart that scrolls to the left as new data arrives.

Web Starter Kit

Web Starter Kit

Building a Web app that works on one device is hard enough. Enter Google’s Web Starter Kit, a project aimed at aiding developers in supporting multiple devices. That means synchronizing clicks, reloading when necessary, and keeping everything as lean as possible to keep the screens in sync. If one user is on an old iPad and another is on a new Android phone, the code adapts. You sketch out the look, and the build tool and the framework handle the details of making it look good on each screen. The image shows just one of many design suggestions that come with the project -- design suggestions that the team admits are “opinionated.”

Reveal.js

Reveal.js

Reveal.js is a slick HTML5-based replacement for PowerPoint. Click the buttons, and sophisticated animations flip between bits of information just like PowerPoint. But the real power is how it can be leveraged within your Web strategy; if your website has a story to tell, Reveal can be just the right tool. Load up what you want your visitors to know, and Reveal will display your message in style. 

The framework comes with a bonus: If you need to present the website at a talk, you’ve got your slides done. The image shows one slide from a presentation on the transitions in Reveal.js.

RxJS

RxJS

The days of the static Web page are long gone, and now even basic dynamic Web pages are starting to look boring. One new trend is to make websites more “reactive” so they begin to respond before the user clicks. The simplest examples are auto-fill boxes that offer suggestions as the user types. Why wait for the user to finish and click “search”? RxJS is a framework for adding smooth, reactive, and asynchronous responses to the stream of events generated by the mouse and keyboard. The image shows code for binding a search of Wikipedia to an event.

NodeBB

NodeBB

Opening your website or app to the contentious, combative vitriol of the Internet at large by hosting a forum isn’t always rewarding, but it’s certainly gotten easier thanks to NodeBB. The Node-based evolution of the bulletin board metaphor is responsive and customizable, offering real-time streaming of conversations. The developers of NodeBB have added modern themes and support for smaller screens on phones and tablets. They have also tossed in the latest interface touches, such as infinite scrolling. The image shows a NodeBB community devoted to building plug-ins for NodeBB.

GulpJS

GulpJS

A long time ago, people wrote HTML, CSS, and JavaScript from scratch. How 20th century. JavaScript is now often compiled or built from shorthand syntaxes such as CoffeeScript. The CSS is built from a set of rules. If you’ve often wished that there was a simple way to automate all of the processing that happens after you write your code, GulpJS is here to organize it all. You write a bit of JavaScript to specify the paths, and then Gulp does the rest. It’s like Ant or Maven for Java, but this time they used the native language (JavaScript) to specify the work instead of XML. The image shows a snippet of code for minifying and cleaning up some JavaScript.

AngularJS

AngularJS

Google built AngularJS to offer a smooth, lightweight framework for presenting information in the browser. It collects data from the server and then compiles the templates locally for presentation. In other words, it’s a Model-View-Controller framework built out of HTML, JavaScript, and CSS to run in the browser. The server code handles data storage, and the AngularJS code is responsible for presentation. It’s compatible with desktop browsers, tablets, and phones. The image shows a snippet from an Angular template that mixes Angular code in curly brackets with raw HTML.

Odyssey

Odyssey

Adding maps to a website has never been easier thanks to the full APIs offered by the competing companies. Telling a story just requires some words. What if you want to mix the two? That’s the objective of CartoDB's Odyssey, a tool for mixing story and maps with features like “slipping map interactions” that are bound to parts of the text. The image shows a sandbox for building stories that interact with maps.

PlayCanvas

PlayCanvas

In theory, games are something separate that only gamers build. They’re completely different from Web apps and other things that serious people do with their serious time. In reality, all of the tools from the game world can be useful for adding slick interfaces to websites. PlayCanvas is a game engine built around WebGL. It combines physics, lighting, shadows, audio, and more into a coherent tool for creating a world filled with things. The image shows an online development tool for the framework.

Deb.js

Deb.js

We all make mistakes. The way we fix them, though, makes all of the difference. Deb.js is a small file -- about 1.5KB -- but it cleans up the console window so it’s easier to debug JavaScript. It’s the next necessary thing after FireBug and the built-in debuggers in Chrome, Opera, and Safari. The image shows a stack trace.