At the start of your web development journey, you will often hear about the frontend and the backend parts of an application.
But what do these terms mean exactly?
In this article, you will learn about the differences between the two by examining the frontend and backend separately.
Here is what we will cover:
What is Frontend?
The frontend is everything a user sees and interacts with when they click on a link or type in a web address. The web address is also known as at URL, or Uniform Resource Locator, and it tells what webpage should load and appear in your browser.
It is the client-side part of a web application.
For example, take this article. There is an associated cover picture, and you are now reading through the text.
At the top of the page, you can also see freeCodeCamp’s logo. There is a navigation bar with a link to freeCodeCamp’s forum and a button to donate.
There is also a search box. You can enter a keyword to search for an article on a topic that interests you.
There is a link to click, which will take you to lessons and certifications that will help you learn to code for free.
All the above represent the frontend of the web page you’re viewing.
What Parts of a Web Application are Considered Frontend?
The frontend 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 frontend is all the parts of a web application that create the look and feel of it.
Why Frontend is Important
The frontend represents someone’s (or a team’s) idea, vision, and a dream come to life, available for the world to see and witness.
The idea needs to be represented in the right way and be visually appealing. It will be the determining factor of how others will perceive it.
A company or organization with a site that is difficult to use and navigate through, which doesn’t look good, and does not present its services nicely, will lose customers and clients.
Users will become frustrated due to the lack of usability, the unpleasant user experience, and the lack of good design. They will end up searching elsewhere for what they were looking for and will most likely not return to that site again.
What Are Some of a Frontend Developer’s Tasks?
The tasks a frontend developer completes and works on day-to-day will vary. They will heavily depend on the company they work for and the role.
As a frontend dev, you may do a lot of design work.
That could be creating a style guide to create consistent styles and the brand’s identity and overall look and image.
It includes the typography (fonts) used for all text, the color scheme, the company’s logo, and layouts, to name a few.
You may work on building User Interfaces using design tools to make sure the website has all the necessary visual elements it needs, displayed and organized pleasantly.
On the other hand, frontend developers may not do any design work.
Instead, you could collaborate with program managers, graphic designers, and UX/UI designers to solve problems.
You could take the created visuals, graphics, and findings from the conducted user research.
You would already know the target audience and demographic, common customer problems, and information on how usable the site is for users.
Then, your job as a frontend developer would be to translate the prototypes and static visual designs to something tangible, to a real-world, pixel-perfect, and functional website that users can easily interact with.
Using frontend technologies, you would implement the layouts already designed and build all the visual elements.
A big part of a frontend developer’s job is to create responsive websites.
You need to make sure websites look good, are optimally displayed, and are usable on a variety of devices and screen widths.
Nowadays, users don’t use only desktop computers, but they instead view websites mostly from mobile and tablet devices.
In addition, frontend developers design and develop with many of the most popular and most used browsers in mind.
Websites need to look good and need to function optimally on all browsers.
Here is where knowing your target audience and demographic comes to play and is vital information.
Depending on your service/product and your users/customers, you may need to develop with older or more modern browsers in mind.
Another big part of a frontend developer’s job is to make sure websites are accessible to all users. This entails creating web accessibility functions that would make browsing the web a pleasant experience for everyone.
Important accessibility features a frontend developer can implement are:
- text-to-speech
- keyboard-only navigation
- accessible color combinations with sufficient contrast
- large buttons
Frontend developers also work on improving the site’s performance and load time.
The majority of users become impatient and click off if a website takes too long to load its content and images.
Improving the time it takes to load the website, even by a few seconds, makes a big difference and will most likely retain users.
Another part of a frontend developer’s role is to design and create usable web forms.
Web forms bridge the communication gap between the company/organization and users. They are an easy way for users to make inquiries, contact customer service, submit data, and create accounts.
An Overview of Frontend Tools and Technologies
As a frontend developer, you will constantly learn new technologies, depending on what is popular at the time. Technologies change fast.
However, the most fundamental frontend technologies are HTML, CSS, and JavaScript.
They run in the user’s browser and are the building block of all websites on the World-Wide Web.
Let’s talk a bit more about these technologies:
- HTML stands for HyperText Markup Language. You create all the content and structure of a webpage using semantic HTML.
- CSS stands for Cascading Style Sheets. CSS styles the HTML elements. It adds colors, fonts, it determines the size of text and the layouts of web pages.
- Vanilla JavaScript is how you add functionality and interactivity to elements. It’s how you make web pages have dynamic behavior.
Besides those three, there are many frontend libraries and frameworks.
These help ensure consistency across each webpage in a website and provide out of the box functionalities for repetitive tasks.
Some of the most popular ones are:
- React
- Redux
- Vue
- Angular
Depending on the role and job description, you may need design skills.
Some commonly used tools used for design work are:
- Figma
- Sketch
- Adobe XD
- and Photoshop for image processing
Is Frontend Development Right for You?
Frontend development is a creative and artistic endeavor.
There is a blend of both visual art and programming.
A way to decide whether frontend development is for you is to consider whether you enjoy seeing the visual results of your hard work.
It is possible to see the results of your creation instantly on the screen of your computer.
Another thing to consider is whether you care deeply about users having the best possible user experience when browsing the web.
User experience and creating usable websites are a big part of the job.
The only way to find out if frontend development is right path for you is to give it a go.
A great place to start your learning is with freeCodeCamp’s Responsive Web Design Certification, where you will learn by building 20 projects and earn a certification at the end.
You will learn HTML and modern CSS techniques alongside the best accessibility practices. You will also learn to create responsive web pages that accommodate each screen size.
Following the Responsive Web Design Certification, learn the JavaScript programming language with the JavaScript Algorithms and Data Structures Certification, where you will learn how to make web pages interactive.
You will start from the basics, learning the syntax and necessary fundamental building blocks that will allow you to progress to more advanced topics such as Object-Oriented Programming.
What is Backend?
Backend development 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 applications users interact with.
Backend is considered the server-side part of an application.
Backend 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 backend is what the users 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 Backend Works for Beginners
The back-end is responsible for receiving requests from a client.
It processes the incoming request 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 frontend code created by a frontend developer, to the right user that has access to it.
The backend 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 with the help of an application running on the server that contains the necessary logic that gathers the requested information and resources for the right user. Backend server-side scripts, written in a backend scripting programming language, are responsible for processing the requests.
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 Backend Functionality
Let’s take a real-world example to illustrate the different backend 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 sumbmitting 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 store that information securely in the database.
- 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 an application.
What Are Some of a Backend Developer’s Tasks?
It’s safe to say that the role of a backend developer varies from company to company and from job to job.
The main focus of a backend developer’s work is to create and maintain services and programs that help the front end function.
In general, here are some things a backend developer would work on:
- Creating, managing, and maintaining the type of database the product/service uses.
- Building, interacting with, and maintaining servers.
- Building internal or external functionalities and server-side software using server-side technologies and web frameworks to provide solutions to problems.
- Working with APIs (Application Programming Interface). Designing, developing, implementing, maintaining, and managing APIs that support CRUD (Create Read Update Delete) operations.
- Performing data validation to ensure data has the correct format before being stored in the database.
- Users need to interact safely with their accounts. Backend developers create systems that secure every user’s data – especially when dealing with payment processing systems.
- Dealing with third-party services such as authentication and external payment services, to name a few.
- Organizing system logic.
- Developing site architecture.
An Overview of Backend Tools and Technologies
There are different tools and technologies backend developers use on a day-to-day basis to implement logic into web applications.
A key component of backend programming is using a server-side scripting programming language.
Some of the most frequently used ones are:
- PHP
- Ruby
- Python
- Java
- JavaScript. Yes, JavaScript is used widely in frontend development, but in recent years is used for backend development too. Node.js (a JavaScript runtime) makes that possible by providing backend functionality.
Besides backend programming languages, backend frameworks and libraries are used to provide extra functionality to create web applications.
Some of the most popular ones are:
- Ruby on Rails
- Django
- Flask
- Express
When developers are part of a team, they use Git – a version control system that tracks changes across different project files.
It’s an open-source collaboration tool for programmers.
Interacting with databases is a big part of a backend developer’s job, so knowledge of databases is paramount.
Databases fall into two categories, relational and non-relational.
Some of the most oftenly used ones are:
- MySQL
- PostgreSQL
- MongoDB
- Oracle
When working with relational databases (such as MySQL, PostgreSQL, and Oracle), you will use SQL.
SQL stands for Structured Query Language. It is used for performing database queries. SQL communicates with relational databases to manipulate data.
You can learn more about SQL from this helpful list of resources.
Is Backend Development Right for You?
Backend developers are in charge of the logic behind web applications and making the frontend function optimally.
If you enjoy solving problems by breaking them down into smaller pieces, implementing algorithms, and finding an optimal and most effective solution, maybe backend development is for you.
If you consider yourself an analytical and methodical person, backend development involves working with, analyzing, and organizing large amounts of data. It requires performing manipulations and calculations with that data.
Lastly, if you don’t consider yourself a particularly artistic person and are more concerned with the logic side of things and what goes on underneath the hood, maybe you are more suited to backend development.
That said, folks may start with the frontend and then transition to the backend side of things. This way, they can figure out which they prefer working with the most.
If you want to start learning backend development, learn with freeCodeCamp’s Relational Database Course.
You will learn about relational databases using SQL and PostgreSQL, the Git version control system, to name a few. These will get you off to a great start in your backend journey.
Then, you can progress to the Back End Development and APIs Certification.
Here, you will learn Node.js and build web applications using the Express framework.
Conclusion
Hopefully, now you have more insight into what frontend and backend development entails and can tell the differences between the two.
To summarize, the frontend involves all the parts a user interacts with, whereas the backend is the logic that powers the frontend interactions.
From: https://www.freecodecamp.org/
