What is an API?

An introduction to APIs in web development

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Lesson Transcript

  • [00:00 - 00:07] Okay, so what is an API? API stands for Application Programming Interface.

  • [00:08 - 00:19] And basically, it's a set of rules that allow one piece of software to talk to another. It's kind of like a contract that defines how a consumer is going to make requests and then what they're going to receive in return.

  • [00:20 - 00:33] APIs also make our lives easier by abstracting away complex code and replacing it with simpler, more straightforward code. So for example, think about what happens when you open the Spotify app and play a song.

  • [00:34 - 00:52] There's probably some code that runs when you click play that looks something like this. So here, this play function is an API method that abstracts away things like the code needed to retrieve the audio file from the internet or your device, or the code needed to send audio data to your device.

  • [00:53 - 01:01] And as developers, we don't really need to know or care about the lower level code that gets executed when we call the play method . And that's totally fine.

  • [01:02 - 01:08] APIs are here to make our lives easier. So how do APIs work?

  • [01:09 - 01:20] In client side JavaScript, APIs are usually based on objects. In the pseudocode example that we saw with the play function, the media player object was the entry point for that API.

  • [01:21 - 01:26] And we can assume that the media player object also exposes other API methods. For example, maybe a pause method.

  • [01:27 - 01:41] So let's take a look at a more practical example that you've probably encountered before. So if you've ever written JavaScript that looks a little bit like this with a document.querySelector method, then you've used an API.

  • [01:42 - 01:55] You've used the DOM API or document object model API. So in this code snippet, the document object is being used as the entry point for the DOM API and the querySelector is the method.

  • [01:56 - 02:13] It's important to note that these APIs aren't a part of the JavaScript language , but rather they're built on top of JavaScript to give developers a convenient set of tools out of the box. So in the web development world, APIs generally fall into two categories.

  • [02:14 - 02:28] Browser APIs and third party APIs. So browser APIs are built into your web browser, like Chrome or Safari, and they expose data from the browser and surrounding computer environment that developers can easily leverage.

  • [02:29 - 02:36] The most common browser API is the DOM API, which we mentioned before. It lets you manipulate HTML and CSS.

  • [02:37 - 02:45] It lets you create, remove, and change HTML. And you can do cool things like dynamically apply styles or animate elements on the page.

  • [02:46 - 03:00] And there's a huge list of other browser APIs, but another notable one is the web audio API. And you can probably guess that this API lets you manipulate audio in your browser.

  • [03:01 - 03:14] You can do really interesting things like alter the volume of a track, apply different effects to it, etc. And this API abstracts away all of the complex, lower level code that you can imagine is doing the actual audio processing.

  • [03:15 - 03:27] So you can focus on building something cool. On the other hand, third party APIs are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the internet.

  • [03:28 - 03:49] For example, the Twitter API allows you to do things like display your latest tweets or retrieve other people's tweets. And similarly, the Spotify API allows you to do things like display your top artists and tracks of all time, or view your different playlists or their tracks.

  • [03:50 - 04:00] We'll be diving into this soon. If you'd like to further solidify your knowledge of web and browser APIs, I would highly recommend you reading the MDN documentation.

  • [04:01 - 04:06] In the next module, we're going to learn a little bit about REST APIs and REST principles.

  • [00:00 - 00:07] Okay, so what is an API? API stands for Application Programming Interface.

    [00:08 - 00:19] And basically, it's a set of rules that allow one piece of software to talk to another. It's kind of like a contract that defines how a consumer is going to make requests and then what they're going to receive in return.

    [00:20 - 00:33] APIs also make our lives easier by abstracting away complex code and replacing it with simpler, more straightforward code. So for example, think about what happens when you open the Spotify app and play a song.

    [00:34 - 00:52] There's probably some code that runs when you click play that looks something like this. So here, this play function is an API method that abstracts away things like the code needed to retrieve the audio file from the internet or your device, or the code needed to send audio data to your device.

    [00:53 - 01:01] And as developers, we don't really need to know or care about the lower level code that gets executed when we call the play method . And that's totally fine.

    [01:02 - 01:08] APIs are here to make our lives easier. So how do APIs work?

    [01:09 - 01:20] In client side JavaScript, APIs are usually based on objects. In the pseudocode example that we saw with the play function, the media player object was the entry point for that API.

    [01:21 - 01:26] And we can assume that the media player object also exposes other API methods. For example, maybe a pause method.

    [01:27 - 01:41] So let's take a look at a more practical example that you've probably encountered before. So if you've ever written JavaScript that looks a little bit like this with a document.querySelector method, then you've used an API.

    [01:42 - 01:55] You've used the DOM API or document object model API. So in this code snippet, the document object is being used as the entry point for the DOM API and the querySelector is the method.

    [01:56 - 02:13] It's important to note that these APIs aren't a part of the JavaScript language , but rather they're built on top of JavaScript to give developers a convenient set of tools out of the box. So in the web development world, APIs generally fall into two categories.

    [02:14 - 02:28] Browser APIs and third party APIs. So browser APIs are built into your web browser, like Chrome or Safari, and they expose data from the browser and surrounding computer environment that developers can easily leverage.

    [02:29 - 02:36] The most common browser API is the DOM API, which we mentioned before. It lets you manipulate HTML and CSS.

    [02:37 - 02:45] It lets you create, remove, and change HTML. And you can do cool things like dynamically apply styles or animate elements on the page.

    [02:46 - 03:00] And there's a huge list of other browser APIs, but another notable one is the web audio API. And you can probably guess that this API lets you manipulate audio in your browser.

    [03:01 - 03:14] You can do really interesting things like alter the volume of a track, apply different effects to it, etc. And this API abstracts away all of the complex, lower level code that you can imagine is doing the actual audio processing.

    [03:15 - 03:27] So you can focus on building something cool. On the other hand, third party APIs are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the internet.

    [03:28 - 03:49] For example, the Twitter API allows you to do things like display your latest tweets or retrieve other people's tweets. And similarly, the Spotify API allows you to do things like display your top artists and tracks of all time, or view your different playlists or their tracks.

    [03:50 - 04:00] We'll be diving into this soon. If you'd like to further solidify your knowledge of web and browser APIs, I would highly recommend you reading the MDN documentation.

    [04:01 - 04:06] In the next module, we're going to learn a little bit about REST APIs and REST principles.