An API? What exactly is it?

An API? What exactly is it?

Hello there, welcome to my blog. Jenna and I were hungry one afternoon and decided to hit the restaurant to get some food before we get back to coding. As we entered the restaurant, the tables and chairs were set in an organized manner, the waiters all had a smile on their faces which was welcoming, we sat down and beckoned on a sweet looking waitress, she couldn't wait to handle us the order list. I picked so did Jenna too. In a few minutes, the order landed and we got started with the food. Just in the middle of the meal, I stopped and jumped with excitement, Jenna had to pull me down because I was attracting attention. "What?" She asked me. "I now understand fully how an API works on the web". I replied. " And am going to write it for the world to know". I added. Well, Jenna thought I was crazy, she didn't see any Javascript engine around. It was just food only, but she knows for sure, I have been trying hard to understand API enough to teach it, and that day was my lucky day. And here am I trying to write about it now.

If you can't explain it to a 6-year-old, you don't understand it yourself - Albert Einstein

For me, one of the misconceptions I had about APIs was that they were tough to understand and are for gurus alone, not until I started consuming them myself, and realized what it really means and what function it does on the web. You may be confused about API too or have a shallow understanding of it, this article is here to explain it to you using real-life scenarios. In this tutorial, I am going to break down the meaning of API. Do grab a popcorn.

What is an API?

API stands for application programming interface, I remember looking at those words and asking myself "What does that even mean?", but am not here to confuse you but to explain it to you like a 6-year-old.

How the web works

In the internet world, there is always a client and a server, this is mostly a browser or an app as the client and a remote or virtual server as the server. Webpages are stored in these servers and are given to the client upon request. When you type google.com in your browser, the request goes out to Google servers and the server returns the Google homepage back to the browser. But wait, what returned it? Remember the server is sitting somewhere, then what is moving from back and forth from the client to the server? Take a guess? Yes! an API!! That is the messenger. The internet is a place where thousands of servers are connected to each other and each of these servers has a messenger that does the walking around the internet world. These messengers are APIs, these APIs are part of the servers but not the server. Let take a look at some scenarios

Facebook scenario

When you open your Facebook app, that is the client and you click on the icon, the API moves fast to the server and requests for the homepage since that is the default page for any website. If you are logged in, your newsfeed gets displayed, if not, a login/registration page is given to you. You may not notice this, because all this happens at the speed of light, if your request is not found on the server, it returns an error(404 pages not found), I am sure most of you have seen such. Your app has interacted with the Facebook API and as long as you keep clicking on posts, comment, liking pictures, the API continues to move back and forth. Facebook login API is made public which has been used by many websites for social media login to save you the stress of typing passwords.

Google scenario

You want to make a cake but don't know-how, so you pull out your smartphone, open your Google app, and type "How to make a cake". Before you even blink your eyes, this is what happens: Google API which is sometimes called a web crawler, moves to thousands of servers on the internet requesting for every webpage with the words "How", "to", "make", "a", "cake", and returns all those requests which of course would be in millions if you care to count them. Now you choose the best tutorial and smile as you make your cake. Do keep some for me though. If your request is not found on any server the server tells the API "Yo, man I don't know what you are talking about" and the API returns a 404 error. From this illustration, you can see that an API is nothing to be scared of, just an internet messenger boy.

Barman scenario

While you are tired of trying to fix that React bug, you decide to hit the bar and get a pint of beer right? On getting there, you tell the barman "I want a pint of stout", the barman moves to the bar and returns with it, and there you go gulping all the beer. The bar is the server, the beer is the webpage or data, and the barman is an API, and you dear reader is the user of the app. You see how simple it is right? Let take it a bit further, then you decide to try out another beer, "Hey can I have a pint of porter?". The barman moves again but this time returns with a frown, "We currently don't have that now". That is a 404 error.

The restaurant scenario

This is me, after I screamed in this restaurant, embarrassing myself and my dear friend, I knew I had to write this. The restaurant is a website or app, the chairs, tables, and decorations, are the Frontend of the website which frontend developers build with HTML, CSS, and Javascript. The waiters are the APIs standing around waiting for your request, so they can process it at the speed of light. Then we have the chefs which are the backend developers who are in charge of the servers which is the kitchen where the foods are served from and the foods are data/webpages these APIs get upon request from users. That is the whole point of the internet, everything is well organized and ready for the users. So I requested Fried rice, chicken, a pack of juice to go down with, zoom the waiters(API) when to the kitchen(server) managed by the chefs, and got the food back to me which I consumed with my whole heart. Now that how an API works and that is exactly what it is.

Other APIs you don't know

Do you know your CSS classes are APIs? Bet you don't know, well they are some kind of API called a browser API, when you add a class name to your CSS, your browser makes a request to the class and the CSS class goes to the CSS stylesheet where the styles of the class have been declared and render the results to your browser. That is it. Some other APIs include:

  • FetchAPI in Javascript
  • StorageAPI in Javascript
  • Queryselectors for getting element of the DOM
  • GeolocationAPI and many more others

See an API as a humble errand boy, and that is what it is.

In the end...

You have reached the end of this amazing article. I finished my popcorn, what about you?. Now you have seen the true meaning of an API, I wished there was someone who explained it like this to me, I wouldn't have spent so much time running away from it, because I had the misconception that it was hard.

Hope you learned something useful? If you did, like, share, comment, just do anything to make it go viral.

I would be posting more articles, so be sure to follow me to get notified when I post them. In my next article, I will explain the FetchAPI in Javascript and how to use it, so follow me so you don't miss out.

If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter. Till next time, see ya. Thank you.