ما الفرق بين Bower و npm لإدارة التبعيات في JavaScript؟

مرحباً بالجميع! أنا مبتدئ في JavaScript وأحاول فهم مديري الحزم. بدأت بتعلم React وفي أحد الدروس قالوا بتثبيت التبعيات عبر npm، وفي آخر عبر Bower. أنا مرتبك تماماً. جربت كلا الخيارين على مشروع بسيط. هكذا قمت بتثبيت jQuery عبر npm:

npm install jquery --save

ثم عبر Bower:

bower install jquery --save

يبدو أن كلاهما قام بتنزيل jQuery في المجلدات `node_modules` و `bower_components` على التوالي. لكن لماذا إذن أداتان مختلفتان؟ ما الفرق الجوهري بينهما؟ ولماذا الآن الجميع يستخدم npm بشكل أساسي، ولا يكاد يُذكر Bower؟ ما يربكني بشكل خاص هو أن التبعيات في npm تُضاف إلى `package.json`، بينما في Bower تُضاف إلى `bower.json`. وأيضاً سمعت أن Bower يعمل بهيكل تبعيات "مسطح"، بينما npm يعمل بهيكل "متدرج". ماذا يعني هذا عملياً؟ هل يجب أن أستخدم كلا الأداتين لمهام مختلفة؟ سأكون ممتناً لشرح واضح.