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
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.
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.
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
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:
- 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.