Javascript Tooling Explained

May 20, 2018

There is no escaping Javascript these days.

As a developer, at some point, you will come into contact with the Javascript ecosystem.

It looks like a confusing place to be even for people who do Javascript full time.

So you may find yourself with questions as you come into contact with this ecosystem. Questions like “What is Browserify?” or “What is Flux?”.

This post aims to answer those questions.

I provide no answers myself, just aggregate the answers on the official websites of these technologies. And maybe a line or two from a blog post or Stack Overflow answer for good measure.

What is Node (Node.js)?

  • Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
  • Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

What is npm?

  • npm is Node.js’ package ecosystem
  • npm is the package manager for JavaScript
  • discover packages of reusable code — and assemble them in powerful new ways.

What is Bower?

  • A package manager for the web
  • Bower manages: frameworks, libraries, assets, and utilities.
  • Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files.
  • Bower doesn’t concatenate or minify code or do anything else it just installs the right versions of the packages you need and their dependencies.
  • Bower is in maintenance mode: “while Bower is maintained, we recommend yarn and webpack for new front-end projects”

What is Yarn?

  • Fast, reliable, and secure dependency management for JavaScript.
  • Yarn caches every package it downloads so it never needs to download it again.

What is webpack?

  • webpack is a module bundler for modern JavaScript applications.
  • webpack recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles — often only one — to be loaded by the browser.

What is gulp?

  • gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
  • gulp gives you fast builds that don’t write intermediary files to disk.

What is grunt?

  • the JavaScript Task Runner
  • in one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.
  • after you’ve configured it through a Gruntfile, a task runner can do most of that mundane work for you

What is React?

  • a JavaScript library for building user interfaces
  • design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
  • declarative views make your code more predictable and easier to debug.

What is Ember?

  • A framework for creating ambitious web applications.

What is Babel?

  • Babel is a JavaScript compiler.
  • Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

What is a Polyfill?

  • A polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers, e.g., to support canvas (an HTML5 feature) in older browsers.
  • A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. (Source).

What is Browserify?

  • Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.
  • Browsers don’t have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.
  • Use many of the tens of thousands of modules on NPM in the browser

What is Flux?

  • an Application Architecture for React
  • a data flow architecture that works well with React
  • Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated.
  • we found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction. (Source)


  • Redux is a predictable state container for JavaScript apps.
  • It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
  • You can use Redux together with React, or with any other view library.
  • see also Dan Abramov’s post “You might not need redux”.

End of File

There are more Javascript tools and frameworks, but I think the above list covers the ones you are most likely to run into or hear about.