JavaScript
Article

Essential Tools & Libraries for Modern JavaScript Developers

By Ivaylo Gerchev

Learning JavaScript is a great journey, but knowing the language and its syntax is only the beginning. Once the novice becomes a journeyman, they are confronted with a seemingly endless number of tools and libraries which are used to create, manage and maintain modern JavaScript code. Invariably, confusion strikes!

As in a real journey, you need some sort of guidance or a map by which to orientate yourself. So, this is the aim of this article — to give you a structured overview of the available possibilities and to light the way for those wishing to learn more. If you’ve ever wondered what the tools of the trade are — those which most of the modern developers use in their workflow — here is the answer.

1. Code Versioning — Git, Subversion

The first thing you should consider when your program code exceeds 100 lines is to implement some sort of version control system, such as Git or Subversion. This will allow you to have multiple versions of your code (which means that you can easily revert to previous versions when something goes wrong) and create branches of the source code to implement different features without breaking the existing codebase. You can also use services such as GitHub or Beanstalk to keep your code backed up in the cloud.

See here for more information about version control systems.

2. Code Documentation — JSDoc, YUIDoc

Documenting your code is extremely important, both for you and for the people trying to understand the purpose of the program you have written. Using a documentation generator such as JSDoc or YUIDoc to describe your functions will assure that any developer can understand their purpose without the need to examine them. Both these tools allow you to use comment blocks to automatically generate a complete HTML documentation website for your project. As long as you keep the comments up to date, the documentation will follow.

See here for more information on creating great documentation.

3. Code Analysis — JSLint, JSHint

To check your code for known coding pitfalls and potential errors (such as missing braces or semicolons, referencing undeclared variables, and so on) you should regularly run a static code analysis tool, such as JSLint or JSHint, against your code. Correcting any issues the tool flags will improve your code quality and will save you from needless debugging. A good linting tool can also help make sure a project adheres to a coding standard.

See here for a comprehensive overview of code analysis tools.

4. Build and Automation Tools — Grunt, Gulp, Brunch

Tools such as Grunt, Gulp or Brunch can automate a variety of web development tasks. For example: creating documentation, running code analysis, doing preprocessing, running tests, carrying out code concatenation, code minification, and image optimization. Remember: these aren’t nice-to-haves, they’re pretty essential parts of website development these days.

Many of the tools and libraries explored in this article have associated Grunt, Gulp, or Brunch plugins available to help you speed up and improve your workflow without any unnecessary effort on your part.

See here for an introduction to Grunt.
See here for an introduction to Gulp.

5. Testing — QUnit, Jasmine, Mocha; Browser Stack, Sauce Labs

With the increasing complexity of your program, writing tests for your functions becomes more and more important. To make sure that your code will behave as intended, you should write unit tests using a framework, such as QUnit, Jasmine or Mocha. Unit tests ensure that for any function and given a set of inputs, the proper values are returned.

The next step is to run these tests in multiple browsers across multiple operating systems by using a service such as BrowserStack or Sauce Labs. Both (paid) services allow your unit tests to be run automatically across a number of browsers simultaneously. They also allow you to test your sites interactively, or through the use of Selenium.

See here for an introduction to testing with QUnit.
See here for an introduction to testing with Jasmine.
See here for a guide to testing in the cloud using SauceLabs.

6. Measuring — Istanbul, Plato

Another important point in JavaScript development is measuring your code. A code coverage tool, such as Istanbul measures the percentage of your code that is being tested. High code coverage means lower chances for your program to contains bugs.

Another measurement you can perform is against the complexity of your functions. Simpler functions are easier to understand and maintain, and thus less error prone. The command-line tool Plato can help you with this job by visualizing your JavaScript source code complexity.

See here for an article on code metrics.

7. Modules & Dependency Management — RequireJS, Browserify, Webpack

In larger JavaScript applications, the number of files can grow significantly. To manage this deluge of files, their dependencies, and the way they are loaded into a page you need a tool, such as RequireJS, Browserify or Webpack. These tools can aid a modular programming style, whereby large applications are broken apart into smaller blocks of manageable code.

See here for a primer on module management.
See here for an introduction to Browserify.

8. Packaging — Bower, Component, npm, jspm.io

In your project, you’ll often need a third-party library which you can fetch and install in a matter of seconds by using a package management tool, such as Bower, Component, npm or jspm.io. A package manager will also manage versions for you by making sure that your project uses the right version of a required library and its dependencies.

Of the package managers listed, the two most common are arguably npm and Bower. Npm deals mainly in node-compatible JavaScript modules, whilst Bower focuses on the entire web platform. It’s not uncommon to use npm to manage server-side packages and bower to manage client-side packages.

It is also worth mentioning that with all of these tools you can create and publish your own packages, too.

See here for a guide to Bower.
See here for a guide to npm.

9. Server Side JavaScript — Node.js, io.js

Today you are not restricted to using a language such as PHP for server-side operations. With a framework, such as Node.js or io.js you can use only JavaScript, both on the client and on the server. There are many benefits to this, ranging from increased productivity (no context switch) to developer happiness (cuz who doesn’t love JavaScript, right?).

See here for an introduction to Node.js
See here for a comparison of Node.js and PHP

10. Real-time Applications — Meteor, SocketStream, Socket.io

Node’s non-blocking, event-driven I/O mechanism means that it really shines at real-time web applications. Consequently, there are a number of Node-based frameworks and libraries (such as Meteor, Socket.io, or SocketStream) which have been designed with this in mind. So, if you’re planning to venture into the world of real-time communication (maybe to create an online game or chat app), one of these may well be the tool you are looking for.

See here for a series on building a Node.js-powered chatroom app.
See here for a course on building your first Meteor app (paid).

11. Single-Page Apps — AngularJS, Backbone, Ember, React, KnockoutJS

One of the booms in today’s JavaScript world has been the emergence of single-page applications (SPAs). In contrast to a regular website where a user navigates between a collection of HTML documents, an SPA is a web site that fits on a single web page. SPAs are fully interactive and provide a more fluid user experience, akin to that of a desktop application.

Here are the most popular frameworks you may want to look into, if you are interested in SPA development: AngularJS, Backbone, Ember, React, KnockoutJS.

See here for more Angular content.
See here for more Ember content.
See here for more React content.

12. Templating — Handlebars, Mustache, Jade

Nowadays, when the use of JavaScript for rendering content on the front-end is a common scenario, dealing with a templating language, such as Handlebars or Mustache or Jade is very likely.

Templates are a great way to separate markup and logic in views, and to maximize code reusability and maintainability. They consist of HTML markup, peppered with tags into which the templating language will output your data. Templating languages also support basic logical structures, such as conditionals and loops.

See here for a beginners guide to Handlebars.
See here for an introduction to Mustache.

13. Functional JavaScript — UnderscoreJS, Lodash

Functional programming is a style of programming that avoids both changing state, as well as mutable data. Due to its flexible nature, JavaScript can accommodate a functional programming style quite nicely and a number of libraries have sprung up around this concept.

Two of the main contenders are Underscore and Lodash (a fork of Underscore). They provide a vast array of useful functional programming helpers to perform common operations on objects, arrays, strings, and so on.

See here for an introduction to functional programming in JavaScript (part one of a mini-series).

14. Utilities — UglifyJS, YUI Compressor, Accounting.js, Moment.js

A utility is a specific code library which can make your life easier. For example, by using UglifyJS or YUI Compressor you can minify your code, fully reducing your JavaScript’s file(s) size and thus increasing performance.

As a JavaScript developer you should already know that dealing with floating point numbers produces small errors which can be dangerous, especially if you work with currency. In such a case you may consider using Accounting.js.

Another painful task in JavaScript is working with dates. Fortunately, there is a simple solution for this scenario too. Just grab Moment.js and you’ll be able to create, manipulate and format dates like never before.

See here for an article on managing dates and times with Moment.js.

15. JavaScript Compilers/Transpilers — CoffeeScript, LiveScript, TypeScript, Babel, es6-transpiler

The desire of web developers to iron out some of JavaScript’s quirks, led to the creation of many languages which compile to JavaScript. These languages make certain tasks, such as creating classes, much easier. Three of the most popular choices are CoffeeScript, LiveScript, and TypeScript.

The new ES6 standard borrows many concepts from these languages and now we can see them implemented in JavaScript itself. You can’t quite start using ES6 right now, because the browsers still don’t fully support it, but you can use it indirectly by employing a transpiler, such as Babel or the es6-transpiler.

See here for an introduction to CoffeeScript.
See here for an article on working with Babel.

Summary

So there you have it — the main tools and libraries that you, as a JavaScript developer, should know about. It’s not necessary to use all of them, but if you are a serious JavaScript developer, it’s very likely that you’ll meet many of them along the way. Unfortunately, I can’t tell you which ones are the best choices, because every library/tool has its own advantages and drawbacks. So, the best way to see which ones are best for you is to go ahead and try them out.

Did I leave any tools or libraries out? Let me know in the comments.

  • Max1128

    For documentation, I would also include Hugo Giraudel’s SassDoc package that creates a static HTML documentation of your Sass based on comments. It’s been incredibly useful for me.

    Otherwise this is amazing list, and has given me plenty to investigate and add into my workflow in the coming days (or weeks, haha). Thanks so much for writing it!

  • http://www.web-solutions.sk Julius Koronci

    Very nice sum up thanks :)

  • Rocha D’ Souza

    A truly useful article. Congratulations!

  • Angel calderaro pacciotta

    ramdajs for functional javaScript

    • http://careersreport.com leah Budde

      I will guide you to this %excellent internet job opportunity… 3-5 hours of work daily… Payment at the end of every week… Bonus opportunities…Payscale of six to nine thousand dollars /a month… Only few h of free time, any kind of computer, most elementary understanding of Internet and dependable connection needed…Get more info on my disqus*page

  • Relert

    That’s a wonderful article! I beg your pardon, Ivaylo. Small typo: 13. … Due to its (instead of it’s) flexible nature…

    • James Hibbard

      Fixed. Thanks!

  • jazdw

    There’s a glaring omission.. jQuery. Is it just that ubiquitous that its not worth mentioning? Still the #1 handiest library even in modern times…

    • Kenneth Davila

      There are a lot of jQuery haters out there….

  • ntdat3011

    Great article, thank you so much

  • Leonidas Savvides

    Dart by Google… in TypeScript category

  • http://gsivaprabu.blogspot.in/ Sivaprabu Ganesan

    Add JavaScript supported editors and packages and plugins, My suggestion #SublimeText3

  • Adesh M

    Really… interesting and useful sum up!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.