How the Frontend and Backend relationship works.

With all these new fangled terms you see on a lot of social medias ( MERN, MEAN, MEVN, Headless CMS, JAM Stack, Server-less ), beginners tend to get overwhelmed with all these things. If you are overwhelmed, it’s a good thing to know how everything generally fits in. Here’s a diagram that tells you straight:

A diagram that shows how front-end and back-end works.

From the diagram above we can see that their are two ways in making a full stack application, either we host two different applications and communicate through an API or the API itself is the one serving HTML.

We can also see that the backend has two parts, the database and the API. The database itself is just that, a database, it’s only the cargo or payload. To be able to utilize the database, we need an API that will handle CRUD operations (Creating, Removing, Updating, and Deleting) as well as other things such as security and querying the database.

Separating Front-end and Back-end

This is the most common way to make a full stack application. By separating the two we essentially make it more organized and much more easier to handle, especially in large applications. For example, we’ll have React as our front-end and Express as our API with MongoDB as our database on the back-end. Boom! That’s the MERN Stack (The N is Nodejs which the back-end runs on). That’s what stacks really are, just popular frameworks and tools stacked together to make full-stack applications.

API Serves HTML instead

Another way of doing things, is serving HTML, CSS, and JS in our API. This is fairly okay with simple/small applications so that you don’t have to make a whole other application for the front-end. Of course, the obvious downside is that your back-end and front-end logic is bundled into one application, so in larger applications it gets hectic.

What about CMS?

Now that you know the two traditional methods of doing things, a CMS (Content Management System) in a nutshell, is a service that handles the front-end and back-end for you. So all you have to do now is customize them to your liking. That’s why WordPress is as large as it is because it’s very fast to just start with and you don’t have to “maintain” the back-end.

Another term you might have heard of is headless CMS, this just means that the service only handles the back-end for you. This is sometimes better than a full CMS if you want more control and customization on your front-end.

Where does everything fit?

Alright, now to help you sort most of these technologies and let you know where they usually belong we can separate these into four categories:

  • Front-end Frameworks: everything from CSS to JS (React, Bootstrap, etc.)
  • Back-end Frameworks: like Express w/ Node or others like PHP
  • Databases: SQL, No-SQL, all that jazz.
  • Content Management Systems: WordPress, sanity.io, Shopify

If you see a new term or framework that you’ve never heard of, it probably fit into one of these categories. Of course not all of those terms are frameworks or tools, for example SSR means Server-side rendering which is a concept.

Alright! I hope you understand the whole relationship more, the first time I got hit by these terms, it really did overwhelm me to the point of where I considered quitting learning web development. Remember, you don’t need to know everything.

I make simple yet exhaustive content on web development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store