A List of Foundational JavaScript Tools

In collaboration with Sarah Fischer and Kalina Wu

In Code Fellows development accelerators, students are introduced to several tools and libraries to expand the abilities of their code. Kalina, one of our current JavaScript students, compiled a list of these tools and wanted to share it with other Code Fellows.

Ivan Storck, our Full-Stack JavaScript Development Accelerator instructor, used Kalina’s list to draft up this helpful mind map:

General

Scaffolding Tools (for starting projects)

• Yeoman - Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications.

Build Tools (automation)

• Grunt.js - The Grunt ecosystem is huge and it’s growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort.
  • Pint.js (Grunt helper) - Pint is a small, asynchronous, dependency-aware wrapper around Grunt, attempting to solve some of the problems that accompany a build process at scale.
• Gulp.js - Gulp’s use of streams and code-over-configuration makes for a simpler and more intuitive build.
• Browserify.js (for browser) - Browserify is a development tool that allows us to write node.js-style modules that compile for use in the browser. Just like node, we write our modules in separate files, exporting external methods and properties using the module.exports and exports variables.
• Uglify.js - Uglify.js is a JavaScript parser / mangler / compressor / beautifier library for NodeJS.

Package Management Tools

• Homebrew (Mac OS) - Homebrew installs the stuff you need that Apple didn’t.
• Apt (Ubuntu) - The apt-get command is a powerful command-line tool, which works with Ubuntu’s Advanced Packaging Tool (APT) performing such functions as installation of new software packages, upgrade of existing software packages, updating of the package list index, and even upgrading the entire Ubuntu system.
• NPM - npm is the official package manager for Node.js.
• Bower - Bower is a package manager for the web.

Front End

MVC Frameworks

• Backbone.js - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, and views with declarative event handling. It connects it all to your existing API over a RESTful JSON interface.
• Ember.js - Ember makes Handlebars templates even better by ensuring your HTML stays up-to-date when the underlying model changes. To get started, you don’t even need to write any JavaScript.
• Angular.js - AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Templates

• Handlebars.js - Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.
• Mustache.js (less built-out than Handlebars) - Mustache is a simple web template system with implementations available for ActionScript, C++, Clojure, CoffeeScript, ColdFusion, D, Erlang, Fantom, Go, Java, JavaScript, Lua, .NET, Objective-C, Pharo, Perl, PHP, Python, Ruby, Scala and XQuery.
• Jade - Jade is a node template engine designed primarily for server-side templating in node.js.
• Haml-js - Haml-js allows the Haml syntax to be used in a JavaScript project. It has most of the same functionality as the original Haml.
• Eco - Eco lets you embed CoffeeScript logic in your markup.

Testing

• Casper.js - CasperJS is a navigation scripting and testing utility for PhantomJS and SlimerJS written in Javascript.
• Zombie.js - Zombie.js is a lightweight framework for testing client-side JavaScript code in a simulated environment. No browser required.

Back End

Servers

• Express - Express is a web application framework for Node.
• Node - Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

Databases

• MongoDB - MongoDB is an open-source document database, and the leading NoSQL database.
• Postgresql - PostgreSQL is a powerful, open source, object-relational database system.
• SQL - SQL is used to communicate with a database. According to the American National Standards Institute, it is the standard language for relational database management systems.

Architectural Style

• RESTful - Representational State Transfer is an architectural style consisting of a coordinated set of architectural constraints applied to components, connectors, and data elements, within a distributed hypermedia system.

Testing

• Cucumber.js - Cucumber.js takes the popular behavior-driven development tool and applies it to your JavaScript stack.
• Jasmine - Jasmine is a behavior-driven development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it’s suited for websites, Node.js projects, or anywhere that JavaScript can run.
• Mocha - Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun.
• Q-Unit - Q-Unit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code.

Assertion Libraries

• Chai - Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

Functional Programming Tools

• Underscore.js - Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.
• Lo-Dash - Lo-Dash is a utility library delivering consistency, customization, and performance.

Have a tool you think should be on the list? Check out this article and the associated MindNode mind map (OPML) on Github. Submit a pull request and send us your suggestions to add new and popular tools!