Quelle est la différence entre Bower et npm pour la gestion des dépendances en JavaScript ?

Bonjour à tous ! Je suis nouveau en JavaScript et j'essaie de comprendre les gestionnaires de packages. J'ai commencé à étudier React et dans un tutoriel, on m'a dit d'installer les dépendances via npm, et dans un autre, via Bower. Je suis complètement perdu. J'ai essayé les deux options sur un projet simple. Voici comment j'ai installé jQuery via npm :

npm install jquery --save

Et ensuite via Bower :

bower install jquery --save

Apparemment, les deux ont téléchargé jQuery dans les dossiers `node_modules` et `bower_components` respectivement. Mais pourquoi deux outils différents ? Quelle est leur différence fondamentale ? Et pourquoi maintenant tout le monde utilise principalement npm, alors qu'on parle presque plus de Bower ? Ce qui me trouble particulièrement, c'est qu'avec npm les dépendances vont dans `package.json`, et avec Bower dans `bower.json`. Et j'ai aussi entendu dire que Bower fonctionne avec une structure de dépendances "plate", tandis que npm utilise une structure "imbriquée". Qu'est-ce que cela signifie en pratique ? Peut-être que je dois utiliser les deux outils pour différentes tâches ? Je vous serais reconnaissant pour une explication claire.