Frontend, Backend, Http REST Api, JSON - A Quick look

Fri, 28 Jun 2019

Most web and mobile software applications have a few high level components. Let me explain the concepts of Frontend, Backend, Http Rest Api and Json data.

Imagine yourself in a restaurant having a relaxing dinner. When you come in, you are greeted by the cheerful wait staff. You are seated at a table and given a menu card so that you can order your favorite food. You chose any item that you like. The wait staff takes your order and he writes it on an ordercard.

Now you are waiting. Wait staff takes your order to the chef in the kitchen. The chef prepares the food and it involves a lot of steps and skills. The food is ready in a while and the wait staff brings the food to you. You get your order and you enjoy it.

In this scenario,

  • Menucard is the Frontend
  • Chef and KitchenStaff is the Backend
  • WaitStaff is the Http Request and Responses
  • OrderCard and the Food is the Json data.

Basically, the FrontEnd communicates with the Backend through Http Request and Responses. Json data is the actual information that is sent back and forth through Http Request and Responses.

Let us look at another scenario. You are at home trying to find an item online at Amazon website. You type in the name of the item into the text box on the page on the browser. After a few seconds, you see that it is available. Now you order the item by clicking the “Buy” button. When you click the Buy button, the order information is sent to Amazon’s computers and database. After a few seconds, you see an OrderConfirmation and OrderNumber on the screen.

In this scenario,

  • The User Interace (UI) screens and pages that is displayed ..is the Frontend
  • Amazon’s computers and database is the Backend
  • The data is sent from the frontend to the backend using Http REST request/responses. If you open Chrome Developer tools, you can see these Http REST calls.
  • You can also the view the JSON data that is carried in those Http Requests and Responses.
Loading...