At the start of your web development journey, you will often hear about the front-end and the back-end parts of a website (aka. Web Application). But what do these terms mean exactly?
What is Front-end?
The front-end is everything a user sees and interacts with your website. It is the client-side part of a web application.
For example, take this article. There is a WordPress post, and you are now reading through the text. At the top of the page, you can also see Closrr’s logo, etc.
This represents the front-end of the web page you’re viewing.
What parts of a Web Application are considered Front-end?
The front-end is anything and everything visual that a user comes in contact with.
It’s all the parts with which they directly interact.
It’s all the content and styles.
It’s the buttons and the different hover effects before a user clicks on a link.
It’s the contact forms with various input fields, the search boxes and the dropdown menus.
The layouts, text, and colors.
It’s the images and videos.
However, it is not just the styles.
It is also how fast the website loads, how easy it is to navigate through it, and how accessible it is to people with disabilities.
It’s how usable and responsive it is on a variety of different devices and browsers.
Essentially, the front-end is all the parts of a web application that create the look and feel of it.
What is Back-end?
The back-end deals with the technologies responsible for storing and securely manipulating user data. It is the part associated with all the hidden logic that powers the websites users interact with.
The back-end is considered the server-side part of a web application.
The back-end is all the hidden inner workings and the behind-the-scenes processes in a web application.
It refers to everything going on underneath the hood, and all the necessary components that make the front-end function properly and smoothly.
It makes sure everything is working optimally.
Essentially, the back-end is what the end-users (website visitors) don’t have direct access to, or don’t directly interact with, and are most likely unaware of when using an application.
An overview of how Back-end works for beginners
The back-end is responsible for receiving requests from a client (meaning, a request made by a user). It processes the incoming requests, and makes sure it fetches the appropriate data associated with the correct user.
Then, it sends a response back to the client. The necessary user data is presented nicely visually, with front-end code created by the website’s engine, to the right user who has access to it.
The back-end consists of:
- The server, which is a program that waits and listens for incoming requests from the client. It communicates with the database by submitting database queries. When the database responds with information, the server fetches the correct necessary data.
It achieves this thanks to an application running on the server that contains the necessary logic that gathers the requested information, and resources for the right user. Back-end server-side scripts, written in a backend scripting programming language, are responsible for processing the requests.
- In the case of WordPress, the website’s information is managed in the /wp-admin section of the website. That is: example.com/wp-admin/
Lastly, the server sends a response back to the client.
- The database, which is like the ‘brain’ of an application. Databases are programs used to organize and store all of an application’s assets, content, and information in a way that can be easily accessed and retrieved, managed, and updated.
Examples of Back-end functionality
Let’s take a real-world example to illustrate the different back-end functionalities available on modern web applications. Say that you are a member of a paid workout subscription platform.
To login:
- You would need to enter your email address and password in a user input field.
- There would be basic validation checks that would need to pass. Validations ensure that the required input fields are not empty, and the email address has the correct format.
- Then, there are checks to see if you exist as a user in the database by submitting database queries, to see if your email address and password are correct.
There would also be checks to see whether the email address and password you provided match the email and password combination stored in the database when you created your account. - If the email and password are incorrect, you would see an error message saying that the combination doesn’t exist.
- If everything is correct, you would be directed to your Home page, with a visual cue indicating your login. It could be a ‘Welcome’ message that includes your name or username.
To pick a workout:
- The database stores all your raw data.
Workouts already completed are stored in the database. The same goes with any saved in a playlist you created or marked as favorites that you would like to revisit. - You can also view all the available workouts and filter through them to only show a particular category. For example, you could type a keyword in the search box such as abs, arms, lower body, or upper body.
Another way could be to pick from one of the available categories on the site, such as yoga, stretch, HIIT, or strength. The database will go through every workout stored there, but you will view only the filtered results of the particular category you specified in your search.
To pay for the subscription:
- The application would be able to accept credit card information or other payment options and send that information securely to the bank.
- It would also update the payment at the right time. Depending on the subscription, there would be a reoccurring monthly or yearly update, making sure each time it withdraws the right amount of money from your card.
All this is handled by the back-end of a web application.