We believe that everyone at INTURN is both a student and a teacher. We have a monthly program called the “#WeLearn Series” where two members of a team teach the rest of the company about something that they do at INTURN. It allows everyone to learn something new and take a different perspective on our product. We want to share our tech team’s “Front-End vs. Back-End Development” sesson.

Because not all of us are engineers and speak that “language”, our two engineers used a restaurant as metaphor to help explain how front-end differs from back-end…Let’s take a look:

The front-end is what the user sees and interacts with on their screen (whether it’s a computer, phone, tablet, etc). In this case, front-end engineering was compared to the experience of going to a restaurant. The user sits at the table, reads the menu, orders food, and the server brings their order into the kitchen. All of the front-end software is run on a client’s computer inside of their internet browser (Chrome, Internet Explorer, etc.).

Back-end, on the other hand, is anything done on the server (the network’s file storage system) that deals with the data the user will be using. This is comparative to what’s happening in the kitchen. The restaurant server puts the order in, and then the chefs begin to prepare the food. In the kitchen, the refrigerator and freezer are used to store everything (aka where the data/ingredients are stored). The raw bits of ingredients are pieced together and taken from station to station to be made into a meal. Just like in the restaurant, back-end engineering pieces together bits of data from the database, which is then brought to the front-end by the server. Exactly like when the waiter brings the food dish to the customer.

Great metaphor, don’t you think? Now let’s dive more into the moving parts for the two components.

The front-end parts are HTML and CSS. HTML is a text document that describes which elements are on the page and where those elements are located: inside, beside, or outside of the page. CSS, on the other hand, is how the HTML parts are displayed on the screen for the users, such as color, borders, etc. Anytime you have a page open in Chrome, Firefox, etc, it’s reading an HTML document, and then applying CSS styles to it. These two parts are essential to a front-end engineer.

With back-end, the database can be thought of as an Excel spreadsheet, where each page is called a table. Applying the restaurant metaphor, you can look at the back-end system as a freezer. The chef enters the freezer, identifies a specific shelf, and grabs the food items he needs. He then prepares these items to make sure it is edible for the customer. In tech, the back-end holds the data that is then selected from the table and check to be sure it is in a format that can be read by the front-end.

The entire back-end to front-end process, while complex it concept, is only 3 simple steps:

1. Pull information from the database
2. Prepare the data to be “consumed” by the front-end
3. Send this prepared data to the front-end, where the front-end engineer applies HTML and CSS coding to let the end user view and interact with it.

So, do you feel like an engineer yet?