When we talk about computer programming, coding, or web development, we're not always quite familiar with the technical jargon. However, a few expressions pop up over and over, and "front end" and "back end" are two. We hear these two terms more and more but may not have a clue. The front and back of what, and why are they useful?
I've made it a habit to lay out these terms for my students from the first day they get into web development. Today, it's your turn! Let's review their role, features, and more.
Front-end and back-end technologies are everywhere
In the field of computer development, we develop "applications."
These applications can take the form of a website (example: Wild Code School’s website), a web application (Google Drive), a mobile application (Waze).
To function properly, a website or mobile application often needs what is called in the tech jargon "a back end" and "a front end." We can find out the obvious from different sources: "the front is what the end user (you) sees, and the back is what he/she doesn't see," but what does this mean?
Front end vs Back end: a simplified definition
To better understand these two concepts, let's step away from the technical terms for a moment and take an example from everyday life: postal services.
Let's imagine the following situation: I have to send a letter to a company, and this company will have to send me a letter in return to answer my request.
In this example, the letter I have to send represents my search for information on a website (or web application).
We'll now break down the different actions that follow from sending my letter and all the steps necessary from sending it to receiving the company's response to my request.
We'll need several actors throughout the process:
- the letter carrier
- the mailbox
- the sorting center
- the counter
- drawers in which mail is stored
- the mail
Now let's break down the process steps:
When I send my letter in the mail, all the physical interactions I'm going to have while the mail is in my hands represent the front end of the business.
On the other hand, all the routing and processing of my mail (in which I'm not directly involved) represents the back end of the company.
Now you should better understand the sentence we quoted above: the front is what you see, and the back is what you don't see. I see my mail at the counter, the mailbox, and the letter carrier; that represents the front-end development. But when my mail is sorted, stored, and transported, I don't see it, and that represents the back end of the organization.
Where to find the front end and back end on an application or website
The same concepts can be found in the life cycle of a website or an application:
Front-end development of a website
When we land on the page of a website and/or a web application, we can directly interact with what is called the "user interface"*: we can click on links, scroll up and down the page with our mouse, fill in forms, navigate between tabs... All these actions performed by the user represent a direct interaction between man and machine. And all these visual components are the front end.
According to Futura Sciences, the user interface represents all the mechanisms—hardware and software—that offer functionality and allow users to interact with a computer system.
Back-end development of a web site
Once users click somewhere, this "click" action is perceived as a request by the site or application, which will therefore work autonomously: the "request" sent by the user is received by the site or application, which will look for the requested information on the server and then send it back to the users. This is the back end.
For example, a user wants to subscribe to the newsletter of a site. To do so, he goes to the "Newsletter" tab and clicks on it. This "click" action will then submit the following request: "redirect the user to the site's newsletter page." Once received and analyzed by the site, it will send back to the user the expected answer, which is here: go to the newsletter page.
In short, the back end is the part that the user does not see, but which allows him/her to perform actions on a site or an application.
And once the back end has returned the information, I can view and interact with it again on the front end. If everything has gone well, I've had a successful user experience!
To learn more about user experience, web page design and the UX/UI work behind a website or web application, check out our article: The Beginner's Guide to UX vs UI.
We realize here that these two facets of a website or a mobile application are essential (just like the sorting center and the letter carrier in the postal services). One cannot go without the other and, as in the postal services, it is not the same person who delivers the mail and who sorts it.
In the same way, when we launch a project that requires the development of an application or a website, we need a "front" and a "back" developer, or a full-stack developer (a developer who has front-end and back-end skills, and who therefore has some expertise in the field of development).
To take our comparison even a step further...
If we wanted to go even further, we could talk about security or performance:
In the same way that the post office has different services to ensure delivery of your package (registered, priority, 24 hours, etc...) representing slightly different paths on the "back" part of the process, on my website, I can vary the performance and security of my actions via a slightly different programming of my back end.
In an application, for example, you often have the possibility to register on the site by entering an email address and a password, to then access a private and personalized space. On the one hand, filling in the form represents the front end: you see the action. On the other side, securing your account represents the back end: you cannot perceive, visually, that your account is protected, yet that is indeed the case. All this is handled on the back end.
We could make the same parallel with express shipments and a site's processing performance.
Front end, Back end: where do programming languages fall in all this?
The U.S. Postal Service allows you to send your mail, but in addition, you could choose another company (UPS, Fedex, etc...). Each one has its own services and its own front and back methods.
As far as development, it's the same! But let's call them languages. For example, to develop the back end, you can use PHP, Java, Ruby, etc. On the other hand, to develop the front end, we will mainly use JavaScript, HTML or CSS.
We'll stop there for today. Hopefully, you've picked up a lot.
I'll go into more detail about programming languages in my next article. 😉
See you again soon!
To learn more...
Did you like this article, and did it arouse your tech curiosity? We offer you free resources to fit your particular situation and background:
➡️ Feel like diving into the world of web development? Take our web developer prep course 100% online and free or attend our next Tech Workshop - Learn the basics of coding: HTML and CSS.
➡️ Wondering about the work done by a developer? Check out our web developer job description.
➡️ Want to find out what frameworks are? Go to our dedicated article: What is a framework?
➡️ Wondering what the difference is between Java and JavaScript? We've put together a dedicated article for you.
➡️ Want to join one of our web development courses?
