Differencebetween Bower and Npm

What is the difference between Bower and npm?

All package managers have many downsides. You just have to pick which you can live with.

History

npm started out managing node.js modules (that's why packages go into node_modules by default), but it works for the front-end too when combined with Browserify or webpack.

Bower is created solely for the front-end and is optimized with that in mind.

Size of repo

npm is much, much larger than bower, including general purpose JavaScript (like country-data for country information or sorts for sorting functions that is usable on the front end or the back end).

Bower has a much smaller amount of packages.

Handling of styles etc

Bower includes styles etc.

npm is focused on JavaScript. Styles are either downloaded separately or required by something like npm-sass or sass-npm.

Dependency handling

The biggest difference is that npm does nested dependencies (but is flat by default) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).

A nested dependency tree means that your dependencies can have their own dependencies which can have their own, and so on. This allows for two modules to require different versions of the same dependency and still work. Note since npm v3, the dependency tree will be flat by default (saving space) and only nest where needed, e.g., if two dependencies need their own version of Underscore.

Some projects use both: they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp, JSHint, CoffeeScript, etc.

Resources

Nested Dependencies - Insight into why node_modules works the way it does

Difference between NPM, Composer and Bower in Laravel?

First of all a short explanation about the three dependency managers.

Composer

Composer is a tool to manage PHP dependencies. It uses Packagist to get information on dependencies and install them properly for you.

NPM

NPM is part of the Node ecosystem and was primarily built to manage the dependencies for Node.js applications. However, as Node became more popular people started using NPM not just for Node.js modules. It is now the quasi-standard to manage your JavaScript dependencies.

Bower

Similar to NPM, Bower manages JavaScript dependencies. However, Bower was created to separate packages for frontend development (such as Bootstrap, jQuery,...) from the whole Node module ecosystem and also offer a package manager for CSS, too. It offers / offered some features that NPM does not or didn't provide.

To summarize: Composer is for PHP packages, NPM and Bower for JavaScript packages.
I'm pretty sure that there are no packages that are available for both Composer and NPM as they focus on two very different programming languages. However, Bower can be replaced by NPM and the other way round. From my point of view Bower is kind of deprecated as there are some other tools that are far more advanced and most projects just use NPM for dependency management.

Let us continue with your questions.

how does app.js know I'm refering to folders in the node_modules folder and how does app.css know I'm refering to Bootstrap just by using a ~?

It's not the file itself that knows the tilde (~) is a synonym for the node_modules directory. It is the compiler[1] that knows it should look up the package in the directory wherever the tilde is mentioned.

Please notice that the tilde > node_modules synonym is a concept for CSS development, not for JavaScript.

Why don't I have to specify the absolute paths?

You could. You can also use relative paths. Or the tilde. In fact, it does not make any difference. It just depends on the compiler you are using.

is the general rule of thumb that JavaScript related items usually come from npm and PHP dependencies come from composer?

Not a rule of thumb, it's a must-do. You won't find PHP modules via NPM and vice versa.

My confusion comes because I was looking at a package called Laravel Full Calendar and it's styling and JS code seem to be pulled via npm but its PHP dependant parts are pulled from Composer?

Absolutely reasonable. If you have a Laravel package that adds support for Fullcalendar to your app, I would create a PHP package that is independent from an NPM package. The PHP package builds the HTML while the NPM package just serves the CSS and JavaScript.

I wouldn't call this a normal behavior but as I said, totally reasonable.

I hope I answered your questions in a way you understand the matter. And I agree that this whole concept of dependency management and the differences it not that easy to understand. If you have any other questions just leave a comment.

[1] Compiler > Could be any module that converts app.scss into app.css. Example is node-sass.

JavaScript dependency management: npm vs. bower vs. volo

A description that best describes the difference between npm and bower is: npm manages JavaScript modules called packages and Bower manages front-end components (i.e. css, html, and JavaScript) called components. npm is also used to install bower. Here is an expansive article on npm and bower (does not cover volo) it goes into plenty of detail.

Difference between Grunt, NPM and Bower ( package.json vs bower.json )

Update for mid 2016:

The things are changing so fast that if it's late 2017 this answer might not be up to date anymore!

Beginners can quickly get lost in choice of build tools and workflows, but what's most up to date in 2016 is not using Bower, Grunt or Gulp at all! With help of Webpack you can do everything directly in NPM!

Google "npm as build tool" result:
https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa
Webpack: https://webpack.github.io/docs/installation.html

Don't get me wrong people use other workflows and I still use GULP in my legacy project(but slowly moving out of it), but this is how it's done in the best companies and developers working in this workflow make a LOT of money!

Look at this template it's a very up-to-date setup consisting of a mixture of the best and the latest technologies:
https://github.com/coryhouse/react-slingshot

Webpack
NPM as a build tool (no Gulp, Grunt or Bower)
React with Redux
ESLint
the list is long. Go and explore!

Your questions:

When I want to add a package (and check in the dependency into git),
where does it belong - into package.json or into bower.json

Everything belongs in package.json now
Dependencies required for build are in "devDependencies" i.e. npm install require-dir --save-dev (--save-dev updates your package.json by adding an entry to devDependencies)
Dependencies required for your application during runtime are in "dependencies" i.e. npm install lodash --save (--save updates your package.json by adding an entry to dependencies)

If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?

Always. Just because of comfort. When you add a flag (--save-dev or --save) the file that manages deps (package.json) gets updated automatically. Don't waste time by editing dependencies in it manually. Shortcut for npm install --save-dev package-name is npm i -D package-name and shortcut for npm install --save package-name is npm i -S package-name

What is the difference between yarn, grunt, npm, bower and nuget package manager?

npm is node package manager.Basically it is used to install dependencies.In your case you will need this for reactJs.

Yarn package manager is also used for to install dependencies i.e to install javascript packages.

difference between npm and yarn is

Yarn
To install packages time requires 10-12sec.

Yarn install all dependencies parallel.

To install dependency we always does not require internet connection

Npm

To install packages time requires 20-25sec

NPM always install each dependency one after other which might end up with lot of time

Installing dependencies always requires an internet connection.

NPM/Bower/Composer - differences?

[update, four years later]

bower is deprecated, and should not be used anymore for new projects. To a large extent, it has been subsumed into node dependency management (from their website: "While Bower is maintained, we recommend using Yarn and Webpack or Parcel for front-end projects").
yarn came out of the wood as a better npm (fixing several of npm flaws), and this is really what you should use now, as it is the new de-facto standard if you are doing front-end or node development. It does consume the same package.json as npm, and is almost entirely compatible with it.
I wouldn't use composer at this point (because I wouldn't use php), although it seems to still be alive and popular

[original answer]

npm is nodejs package manager. It therefore targets nodejs environments, which usually means server-side nodejs projects or command-line projects (bower itself is a npm package). If you are going to do anything with nodejs, then you are going to use npm.

bower is a package manager that aims at (front-end) web projects. You need npm and nodejs to install bower and to execute it, though bower packages are not meant specifically for nodejs, but rather for the "browser" environment.

composer is a dependency manager that targets php projects. If you are doing something with symfony (or plain old php), this is likely the way to go

Summing it up:

doing node? you do npm
doing php? try composer
front-end javascript? try bower

And yes, the "json" files describe basic package information and dependencies. And yes, they are needed.

Now, what about the READMEs? :-)

https://github.com/bower/bower
https://www.npmjs.org/doc/cli/npm.html
https://getcomposer.org/doc/00-intro.md

What are npm, bower, gulp, Yeoman, and grunt good for?

You are close!
Welcome to JavaScript :)

Let me give you a short description and one feature that most developers spend some time with.

bower
Focuses on packages that are used in the browser. Each bower install <packagename> points to exactly one file to be included for (more can be downloaded). Due to the success of webpack, browserify and babel it's mostly obsolete as a first class dependency manager.

2018 Update: bower is mostly deprecated in favour of NPM

npm
Historically focuses on NodeJS code but has overthrown bower for browser modules. Don't let anyone fool you: NPM is huge. NPM also loads MANY files into your project and a fresh npm install is always a good reason to brew a new cup of coffee. NPM is easy to use but can break your app when changing environments due to the loose way of referencing versions and the arbitrariness of module publishing. Research Shrink Wrap and npm install --save-exact

2018 Update: NPM grew up! Lot's of improvements regarding safety and reproducibility have been implemented.

grunt
Facilitates task automation. Gulps older and somewhat more sluggish brother. The JavaScript community used to hang out with him in 2014 a lot. Grunt is already considered legacy in some places but there is still a great amount of really powerful automation to be found. Configuration can be a nightmare for larger use-cases. There is a grunt module for that though.

2018 Update: grunt is mostly obsolete. Easy to write webpack configurations have killed it.

gulp
Does the same thing as grunt but is faster.

npm run-script
You might not need task runners at all. NodeJS scripts are really easy to write so most use-cases allow for customizedtask-automation workflow. Run scripts from the context of your package.json file using npm run-script

webpack
Don't miss out on webpack. Especially if you feel lost on the many ways of writing JavaScript into coherent modular code. Webpack packages .js files into modules and does so splendidly. Webpack is highly extensible and offers a good development environment too: webpack-dev-server
Use in conjunction with babel for the best possible JavaScript experience to date.

Yeoman
Scaffolding. Extremly valuable for teams with different backgrounds as it provides a controllable common ground for your projects architecture. There even is a scaffolding for scaffolds.

What is the difference between using bower and npm for adding angular module?

bower is load the modules in browser end this bower modules will use only in front end you cant use it in backend.
npm is load the modules in backend as well you can us it in back end and front end by using require or import