What is “frontend”, “backend”, and “full stack”?

I have a lot of friends ask me what I specifically do for my work, and I can see their eyes glaze over halfway through my third sentence. It’s not on them of course, because it’s a lot of information to handle, especially if their technical expertise caps out at signing into Instagram or making a spreadsheet with Excel. For those of you who don’t know already, I am a “full stack” (fullstack, full-stack, fül-stakk, it’s quite the debate on proper spelling) developer. You might be wondering what “full stack” means in terms of web development, and the answer is pretty simple. When talking about web development (a preface here to deter any angry programmers on Reddit who want to argue) “full stack” refers to someone does both “frontend” and “backend”. Simple enough, right?

But wait! What is “frontend” and “backend”? Well, frontend (FE) and backend (BE) are the client-facing side and information-handling side of the application, respectively. Woah! New terms. What do those mean? I think it’s time that we split up the explanations for FE and BE.

Frontend (FE)

I’m sure all of us have visited a website once or twice recently. In fact, if you haven’t and you are somehow reading this, please tell me how you did it as I’m sure we could make a profitable startup from it. I’m going to use Youtube as an example to explain what FE is, as some visuals will surely help with the explanation.

Looking at the picture above, you can see a couple of things: the Youtube icon in the top-left which will take you back to the main page, a sign-in button in the top-right to make more personalized videos show up for you (a sneak peak of what BE does), some buttons on the left for history and categories, and obviously the list of videos in the center of the screen. If you were to go to Youtube right now, can you see anything that your page and mine have in common? I’d bet quite a bit of bitcoin that if you were to go to Youtube on a laptop right now, you would also see the Youtube icon in the top-left, a sign-in (or profile) button in the top right, the same buttons on the side for history and categories, and lists of videos in the middle.

But what do you notice is different? The color might be different, as I am a die-hard dark theme enthusiast (thanks FE), but what about the videos? The videos are most likely different, but how can they be in the same format as mine? Well, you can thank the frontend for that! The FE is the code that the client (i.e. you) sees and interacts with when they go to a website. If you go to YouTube, do you see something similar to the picture above? That’s FE. If you go to Facebook, do you see a screen asking you to login or another home-screen with more buttons to press? That’s FE. If you go to any website, do you see what is presented for you to click, type in, or interact with? That’s FE. FE is the point of contact between you and an application. The design for the frontend stays the same, while the specifics change depending on who is looking at it.

If that isn’t clear enough, here is an analogy we can use. If you walk up to a person and talk to them, what you can see is the human equivalent of FE. Their hair, their voice, everything about them that you can physically interact with (emphasis on CAN, don’t go poking random people) is their frontend. As people often tend to do, businesses like to make their FE as attractive and enticing as possible in an attempt to get the client (i.e. you) to engage with them so that you have a higher chance of using whatever product they are trying to sell you on. Think of a high-profile businessperson attempting to make a deal. What do they look like in your mind? They are probably wearing business clothes, are well-kept, and smile. The answer to why they do that may be obvious, but I will continue to belabor the point. They are trying to sell you something, and as humans naturally take looks into account, they want to come across a specific way to promote a certain image and grab your attention. This is the same with websites. They look sleek, have cool animations, and do other nifty things specifically because they know that you will go “oh that’s a cool website, I want to see what they are offering”. So where does the backend (BE) fit in with all of this? Keep reading!

Backend (BE)

Congrats on making it this far! We are now heading to the backend (BE) portion of this post, which is my personal favorite. So as we’ve just talked about FE, the concept of what it does should (hopefully) be clear: it is the part of the application that the client (i.e. you) interacts with. Again taking Youtube as an example, we see that the format and all the buttons are the same for you and me, and that the list of videos is different. How does Youtube know the difference between you and me and know which videos to send to whom? Drum roll please….. the backend (BE)! The backend is where the server (the place with access to all the information and ability to do stuff with it), the database (where we store information) and API’s (the rules of talking to it, more below) are stored.

Let’s suppose I am watching lofi hip hop radio – beats to relax/study to (if you haven’t visited this channel, please check it out). I am brand new to Youtube and just signed in, and I have decided that I do in fact like beats that I can relax/study to, especially if it is a lofi hip hop radio. I click the “like” button, and the thumbs-up turns a different color (thanks FE!). But what does that do besides add a little more color to my screen? Also, how does Youtube know that it has 2.2 million likes already when I’m the only one looking at my screen? That’s the BE coming into play!

The backend is basically the brain and nerves of an application, not doing anything to change the FE, but passing information back and forth so that the FE can make its own changes. Every FE has buttons that do specific things, such as login, like, and share (Youtube, Instagram, Facebook, Twitter, you name it!). All buttons are programmed to do very specific things, and in the cases I just mentioned, they make network calls to things called Application Programming Interfaces, or API’s. API’s are great because they say “if you send me information in the way that I expect, you can expect a specific thing to happen”.

You can think of using API’s like delivery trucks moving from a warehouse to a store, and vice versa. If moving from a warehouse to a store, the store (hopefully) knows what to expect from the delivery truck and is able to display it accordingly. If it is an electronics store, the store already has plans for where to put the phones, laptops, etc., and it is waiting for the delivery truck to unload the cargo so it can display it to client (see where I am going here?). If it is the other way round, and the store is sending cargo to the warehouse, then the warehouse has specific places where it knows specific cargo will be delivered. The place where it expects phones to be delivered will be different than the place it expects laptops to be delivered. So what would happen if the warehouse was expecting laptops, but the store sent phones? Or what would happen if the warehouse sent the cargo to the store, but it was missing laptops? You would either get a response from the warehouse saying that you messed up, you would get some funky displays at the electronics store, or everything would catch on fire.

Going back to the person analogy I used in the FE portion, the backend is the brain and nerves of the person. The brain is the database (or warehouse) that stores information, and the nerves are the API’s that respond in expected ways given an expected input. When you were a kid, you probably did something painful that taught you not to do it again, such as touching a hot stove. The process of your skin touching the hot surface is an example of the human FE interacting with a client, which in this case is heat. The body, interacting with the client, causes your nerves to send the feeling of pain to your brain and waits for a response on what to do next. The nerves are the API, which take an expected input from the client (the feeling of pain) and send it to the database (the brain). The brain then looks up what it should do when it is presented with pain, which is obviously “stop doing whatever is causing you pain”. Your brain, having come up with a response, sends “stop doing whatever is causing you pain” back through your nerves to your FE. This results in you taking your hand off of the stove. During this process, not only has your body told you to take your hand off the stove, you have also learned that you should not touch hot things as the same thing will happen again.

If you need another analogy, let’s go back to the businessperson. Do you think that their conversations are the same with every person they interact with, or do you think that they change their tactics depending on what they know about a person? If the businessperson learns of their potential client’s likes and dislikes, do you think they would stick to the same routine or format what they are saying to give the best opportunity at securing the client? They would obviously bring up the client’s interests, as well as remove anything that wouldn’t help in the conversation. This is the same process as what happens when you like, dislike, repost, or look at something on a website. The FE “sees” what you are interested in, sends that information to the BE where that information is stored, and finds data that it thinks you might be interested in based on how you’ve reacted with other information before.

Conclusion

Thanks for making it all the way to the end! This was my first real post, so there is a lot I can do to refine this process, but I hope that some of you gained insight into how the frontend (FE) and backend (BE) works and how they interact with each other. This was a very high-level explanation of how these work, so if you see anywhere I can add more information or be more clear, or if you have any questions, please feel free to Get In Touch with me. If you liked this Plain English explanation and want to know more, please subscribe to get updated when I write more posts on other concepts! Thank you.