Why npm, bower, and broccoli?


I’m quite new to front-end frameworks and Ember. I’ve been learning how to build web apps with ember and ember-cli. Now, I’m in the “why?” stage. I want to know:

What are the general differences between npm, bower, and broccoli? Specifically, what are the differences in the context of Ember/Ember CLI?

I’m hoping these answers will help me understand why all three have been used with Ember.


npm is the package manager for node.

Bower is package manager for building web apps (it has npm as a requirement).

Broccoli is a build manager (it has npm as a requirement).


More specifically, NPM handles all the different node.js packages that make things run.

Bower, when used right, is where you get a lot of your frontend libraries (think bootstrap, Foundation, jQuery, etc). The big difference between NPM and Bower is that Bower has a flat dependency tree. For example: you wont have three different packages and each with their own copy of jQuery.

Broccoli is a build too originally built specifically for Ember, but it usable in non ember projects. It tackles the issues of watching files, reprocessing them when changed, and serving them to the browser. Its does many of the same things that Grunt and Glup do, but different. Its currently very new and under-documented (in some ways), but its really epic when you start to get the hang of things.