Design – Distinction Between API and Frontend-Backend

Architecturedesignterminologyweb-development

I'm trying to write a "standard" business website. By "standard", I mean this site runs the usual HTML5, CSS and JavaScript for the front-end, a back-end (to process stuff), and runs MySQL for the database. It's a basic CRUD site: the front-end just makes pretty whatever the database has in store; the backend writes to the database whatever the user enters and does some processing. Just like most sites out there.

In creating my GitHub repositories to begin coding, I've realized I don't understand the distinction between the front-end back-end, and the API. Another way of phrasing my question is: where does the API come into this picture?

I'm going to list some more details and then questions I have – hopefully this gives you guys a better idea of what my actual question is because I'm so confused that I don't know the specific question to ask.

Some more details:

  • I'd like to try the Model-View-Controller pattern. I don't know if this changes the question/answer.
  • The API will be RESTful
  • I'd like my back-end to use my own API instead of allowing the back-end to cheat and call special queries. I think this style is more consistent.

My questions:

  • Does the front-end call the back-end which calls the API? Or does the front-end just call the API instead of calling the back-end?
  • Does the back-end just execute an API and the API returns control to the back-end (where the back-end acts as the ultimate controller, delegating tasks)?

Long and detailed answers explaining the role of the API alongside the front-end back-end are encouraged. If the answer depends on the model of programming (models other than the Model-View-Controller pattern), please describe these other ways of thinking of the API.

Best Answer

I think you're being confused by the way the term API is being misused and abused by many web developers.

  • API means Application Programming Interface, i.e. any officially specified interface between different systems (or parts of the same system).
  • Some time ago, it became a big thing for web startup to offer public access to some of their internal data through a web service API, typically using REST and JSON, thus allowing third-party developers to integrate with their systems. Web developers started using the term "API" to mean specifically (and only) "publically accessible web service", and misusing it to include the implementation thereof.
  • In terms of frontend and backend, this web service API (and its implementation) is the backend. Some parts of it may be publically accessible and others only to your frontend.
  • A different name for this is "service layer", i.e. code that
    • represents services which the frontend calls
    • contains no display logic (that's the job of the frontend, after all)
    • is more abstract and coarse grained than simple CRUD actions (one service call will often involve multiple CRUD actions and should be executed within a database transaction).
    • contains the business logic of the application