Qual é a diferença entre Bower e npm para gerenciamento de dependências em JavaScript?

Olá a todos! Sou novo em JavaScript e estou tentando entender os gerenciadores de pacotes. Comecei a estudar React e em um tutorial disseram para instalar as dependências via npm, e em outro, via Bower. Fiquei completamente confuso. Tentei ambas as opções em um projeto simples. Aqui está como instalei jQuery via npm:

npm install jquery --save

E depois via Bower:

bower install jquery --save

Ambos baixaram jQuery nas pastas `node_modules` e `bower_components`, respectivamente. Mas para que servem duas ferramentas diferentes? Qual é a diferença fundamental entre elas? E por que hoje em dia a maioria usa npm, e quase não se fala mais em Bower? O que me confunde especialmente é que no npm as dependências vão para `package.json`, e no Bower, para `bower.json`. Além disso, ouvi dizer que o Bower trabalha com uma estrutura de dependências "plana", enquanto o npm usa uma estrutura "aninhada". O que isso significa na prática? Será que preciso usar ambas as ferramentas para tarefas diferentes? Agradeço por uma explicação clara.