Web development consists of two major categories: frontend, and backend, In this post we’ll review the difference between frontend and backend development.
The internet in a nutshell.
Let’s start with “How the web works” before explaining the difference between frontend and backend development.
The internet is a network of computers – better known as servers – connected with each other.
By accessing a website you connect to the server which hosts the website and downloads its files to your browser.
Backend web development is server-side development which occurs at the server level.
Front end development is client-side development that occurs on your computer.
Let me explain:
Web development.
As mentioned above, a website is a set of files that are hosted on a server.
These files might just be a set of static files that get loaded in your browser when you view the website or execute complicated tasks.
The most simple example, a basic informational website, could simply be a set of files for the homepage, about page and services page.
These pages would be static – meaning that whatever you see was custom coded into the files.
A more complex website, for example, an eCommerce website or custom web-app will have complex scripts to manage products, add them to the database, create orders, send emails, manage users, calculate statistics and much more.
Most of these tasks can be done in both frontend and backend web development.
Here’s how:
Backend web development.
Let’s take the function of adding a user as an example.
On the website or web-app, there is a page with a simple form: email address and password.
To add a new user we will have to check if:
- Both fields are entered
- If the field value is correct (email should be an existing email address)
- Check for a duplicate user with the same email address
- Add the new user to the database
- Return success or error messages to the screen according to the form input.
By doing this in the backend we send the form information to the server and the server-side backend program will generate a new page.
If everything was correct it will generate a page with a success message else it will generate a new page with an error message.
Frontend web development.
When doing the same with frontend web development we also submit the form data to the server and get a success/error response. However, it works differently.
With frontend web development we don’t submit the whole page to get a whole new page returned.
Instead, most of the work is done in your browser. We check the form data and give you error messages if anything is wrong with the input.
If your input is good we send a small request to the server containing the form data which looks something like this:
{
email: "test@test.com",
password: "Pass123"
}The server will now check if there is already a user with the given email address in the database and return a small string like:
{
type: "error",
Message: "There is already an account with this email addres, do you want to login?"
}The client-side mini software will now review what the server returned and just add this message to our existing web page above the new user form.
The difference between frontend and backend development: Speed.
The first and foremost recognizable difference between frontend and backend based web apps is speed.
As you might have noticed, in order to interact with a backend based web app you reload the whole page.
Web apps built with frontend frameworks load the whole software on the first page load.
When you are interacting with the web app you won’t have to load much from the server except database information.
The development process.
Building websites and web apps with frontend based frameworks involve a lot of work.
Therefore, small websites and web applications are usually built with backend-only languages and frameworks.
Frontend based software is most used when it comes to large scale web applications.
Recap.
To sum it up, a website is a mini software that is stored on a server.
The business logic can either be managed in the backend – server-side of the website or the frontend – client-side of the website.
The entire page has to be reloaded when done in the backend, while only small bits and pieces have to be loaded from the server in frontend based web applications.
Frontend based web apps are faster but involve more to develop.
Thus making it the best option for large scale web apps while small projects are better off just using backend software.