Explain Full Stack to Me Like I’m in 5th Grade

Introduction

We hear the term Full Stack Developer thrown around all the time; we see it in articles, job descriptions, tutorials, and hear it from developers, recruiters, and news stories about coding bootcamps. But for those of us interested in learning how to program, Full Stack is just one more vague term in an ocean of new, technical verbiage that we don’t fully understand. In this article, we will attempt to blow away the fog that tends to accompany the term, Full Stack.

The Front End

What is Front End?

A Full Stack web application consists of multiple parts (the front end, back end, and database are the main, high level components). The piece we are all most familiar with, whether we know it or not, as users of websites and applications, is the Front End.

What Do We See on the Front End?

This is what we see and interact with, the user interface; when we go to Facebook, eBay, Amazon, or whatever site we are using, what we are looking at is the Front End of a web application.

How is Data Displayed?

The Front End is all about displaying data in a way that makes sense to us, the users, and allowing us to interact with that data. What type of data does that entail? It could be anything, depending on the app.

What Technologies Are Used for the Front End?

Some of the most common technologies/programming languages used in creating the Front End are HTML, JavaScript, and CSS. HTML provides the structure and layout of a web application. CSS is in charge of adding style to the application and making it look appealing. JavaScript is the programming language used to add functionality to the application.

The Back End

What Does the Back End Do?

As we mentioned before, the Front End displays everything to the user and makes things pretty, but it doesn’t store all the data to display (because it runs on the user’s computer), the data has to come from a computer, or server, that lives somewhere else and is owned, or rented, by the business that owns the application.

How Does the Back End Work?

The Back End application is responsible for handling requests that come from the Front End, interacting with a database (which will be discussed later), performing some processing of data, and returning that data to the Front End to then be displayed.

Why Do We Need the Back End?

One important reason we have this middle man instead of just having the Front End call the database directly is so that we don’t have to duplicate all the code that interacts with the database if we want to add an additional Front End. If we add a new client, we can make the same calls to the Back End that already has everything coded and working to interact with the database. It also adds a layer of protection around the integrity of the database’s data if we make sure it’s the only way data gets in and out.

The Database

What Does the Database Do?

The role of the database is to store all the data. We all know that data is important, but have you ever thought of what an application would be like without the ability to store data?

Types of Databases

The most common types of databases are Relational Databases and Document Databases. Relational databases store data in tables, where rows in different tables can be related to each other based on keys and IDs. Document databases store data in collections instead of tables.

The Full Stack Restaurant

Putting It All Together

Now that we have an understanding of the Front End, Back End, and Database, let’s put it all together by looking at our favorite Full Stack metaphor – The Restaurant.

How Does the Metaphor Work?

In this metaphor, you are the user of an application. The menu and the waitress make up the front end. When you say what you want to eat, that is like clicking a button on the user interface (the Front End). The waitress writes down what you want to eat and sends it to the chef; this is just like the Front End sending a request to the Back End, the chef is the Back End. The chef then goes to the pantry and fridge, which represent the database, where she grabs the necessary components to complete your order (the data), cooks and prepares it (processes the data), and gives it back to the waitress, which is like the response the Back End replies to the request received from the Front End with. The waitress then returns the food to you and places it in a presentable manner, just like when you see the newly loaded data from your computer.

Conclusion

If we remember this metaphor, we will retain a solid understanding of what Full Stack means and what some of the different, major components that make up a Full Stack application are.

Stay tuned for more

Hopefully, you enjoyed this article and learned something from it! If so, then stay tuned, because over the next few weeks we will be writing additional articles that break down some of the technologies mentioned here to help you gain a better understanding of each specific technology, what their roles are, and how they’re used!

Start Your Journey Today

Interested in changing careers and becoming a software developer? Learn more about Promineo Tech’s programs and how we help students make this transition through affordable, low-risk technology education: Start Your Journey: Exploring Promineo Tech’s Coding Programs for Career Transition