JS-151-API
  • JavaScript Library
  • 02-DOM-Manipulation
    • Overview
    • DOM Explained
    • Example Setup
    • Selecting Elements
    • Events
    • Complete Example
  • 03-API Fundamentals
    • 0-Getting Started
      • Welcome
    • 1-Intro-To-APIs
      • Intro
      • Client
      • Requests
      • JSON
      • API Endpoints
      • Server
      • Response
      • Statelessness
      • REST
    • 2-Asynchronous-Programming
      • Intro
      • Callbacks
      • Promises
      • Promises Continued
      • Chaining Promises
    • 3-Fetch
      • Fetch Intro
      • Star Wars
        • Star Wars API
        • Star Wars Setup
        • Star Wars JS
      • Random Photo
        • Unsplash
        • Unsplash Setup
        • Unsplash JS
    • 4-Apps
      • 01-New York Times
        • 00-App Intro
        • 01-HTML/CSS/API Key
        • 02-Variables
        • 03-Event Listeners
        • 04-fetchResults
          • 01-fetchResults()
          • 02-preventDefault()
          • 03-fetch() method
          • 04-Dates
        • 05-displayResults
          • 01-Logging JSON
          • 02-Working with JSON
          • 03-Link Display
          • 04-Results Navigation
          • 05-Results Update
          • 06-Keywords
          • 07-Images
        • 06-Pagination
          • 01-Pagination Intro
          • 02-Pagination Functions
        • 07-Next Steps
      • 02-YouTube
        • html
        • youtube.css
        • youtube.js
      • 03-GoogleMaps
        • Setup
        • HTML and CSS files
        • API Key
        • JS Setup
        • Adding Your Location
        • Listeners
        • Custom Options
Powered by GitBook
On this page
  • High Level Diagram
  • What is an API?
  1. 03-API Fundamentals
  2. 1-Intro-To-APIs

Intro

Previous1-Intro-To-APIsNextClient

Last updated 7 years ago

API, HTTP, JSON, REST. You have probably seen and/or heard of these acronyms. That's because they are extremely important and foundational to becoming a modern software developer. Our aim in this program, in fact, by the end of this book, is to help you gain familiarity on a theoretical and practical level with these items. Our hope is that by the end of this book, you'll be comfortable with using APIs, and understand JSON and HTTP better.

High Level Diagram

Let's study the whole 'full stack' process at a high level with an initial diagram. We'll be using this diagram to explain how HTTP, JSON, and APIs work. Take a look:

Let's start by looking at APIs. We'll take it from a theoretical perspective for a little while here, so there is some reading ahead.

What is an API?

API stands for Application Programming Interface. Essentially, they function as a junction between the client-side and server-side. Think of APIs as an electrical outlet: The power cord from your computer is the client, while the electrical grid behind the wall is the server. APIs allow the client to access all of the hard work done in the server without having to know what exactly the server is doing. So, in our example, the power cord doesn't need to know all of the electrical grid information, it just needs to know where to connect to get the electricity it needs.

In addition, many applications utilize more than one language to function. For instance, an application might have a client written in React or Angular with a server that is written in Java, C#, or Node.js. The API can function as a bridge between those languages.

The API provides information from the server to the client that is requesting it. We'll dive deeper into how this works.

API