1

I am getting to grips with vanilla JS and am trying to expand my horizons using some browser API's to make some more interesting applications. I am running Webpack, Babel and Jest on most of my packages. I am trying to establish the differences between browser API's and NPM packages.

I understand what they are individually but am unsure how they interact with each other. From my understanding :

API's of the browser are ready available for us to use which are often objects we have to instantiate to use their pre-written methods in our javascript code, they are not javascript objects but are available for us to use and like anything that is global is attached to the window object.

Third Party API's are accessible via endpoints. e.g. we can make a request to a weather API by our use typing in a city and we can use this as an argument to our asychronus request to the weather API to return some JSON to us.

I understand NPM packages like jest or webpack which are written in javascript. This allow us to install other javascript files which we can import or can be run as a standalone package in the terminal instead of having to make this functionality ourselves. There are no browser API's which allow us to do this so we call upon an NPM package. They have a purpose.

What I cant understand is packages like Axios. Does Axios build on the browser fetch API and just rename itself Axios ? Or the Payments Request NPM package? Why do we need that if we have a browser API called Payments Request ? There are even packages called Console and DOM. Why are these repeated as npm packages when we can access them anyway through the Browser ? Third Party API's I can access also all seem to have NPM packages ! What is the point of these if I can directly access the API anyway through a fetch or axios request?

On the whole I guess my question is, why are there so many NPM packages for things we can already access via a browser or third party API ? Confused.

James Hibbard
  • 16,490
  • 14
  • 62
  • 74
Kevin Greetham
  • 81
  • 8
  • 1
    Basically, because they think they can do things better than the browser version. Better could just mean "easier to use". And keep in mind that some of these libraries were written a while ago, and so maybe they were better at that point, but the browser has now caught up. Eg, Axios was great before fetch existed, but may not be as important any more. – Nicholas Tower Apr 04 '22 at 17:21
  • Thanks for answering Nicholas. So fetch came before Axios? Im confused again. I thought Axios used Fetch to achieve its functionality but just configured to handle errors better and doesn't have to call the asynchronous .json method on the response object ? Do NPM packages use browser API's and alter the functionality ? Eg does Axios use XMLHttpRequest or Fetch in its functionality ? Another example- the DOM .NPM is written in javascript right ? So how on earth would it access the DOM as an npm package? Surely the code to access the DOM is written at a lower level language? – Kevin Greetham Apr 04 '22 at 17:30
  • XHR's came first, but they're a pain to use directly. So Axios and libraries like it were written to make XHR's easier to work with. Axios uses XHRs under the hood, but provides a more convenient promise-based api. It was a hit, so eventually Fetch got added to the browser to have a similar level of convenience as Axios. I'm not familiar with the dom package – Nicholas Tower Apr 04 '22 at 17:46
  • thanks again Nicholas, you've been a great help. Am I right in saying that all npm packages are written in javascript ? Therefore if thats the case the NPM dom package as you said in your original explanation must just be an easier to use syntax but under the hood works with the Browser DOM just like under the hood Axios uses XHR's but via an easier syntax ? – Kevin Greetham Apr 04 '22 at 17:51
  • `Am I right in saying that all npm packages are written in javascript` That's certainly the most common, but it's not a requirement. npm just requires that the package needs to be compatible with the npm command-line client. `the NPM dom package ... must just be an easier to use syntax but under the hood works with the Browser DOM` That would be my guess, yes – Nicholas Tower Apr 04 '22 at 18:00
  • Nicholas , your a superstar, I cant mark up just a comment can I ? Maybe put something in as an answer and ill accept it. I'm obliged!! – Kevin Greetham Apr 04 '22 at 18:36

0 Answers0