So, answering the question straight away: front-end refers to the client-side and back-end to server-side in the web industry. The client-side is what the user sees and the server-side is all the business logic behind it. However, sometimes the line between these two is not as simple as it looks and there will be an overlap in development, requiring the need to understand a few things from each side.
But this guide is not meant to confuse you. I will provide
simple guidelines to help you understand the difference between front &
back-end, or at least, to be able to recognize what are the main technologies
required to become a developer in each area.
Back(end) to basics
A back-end developer is the unsung hero of web development. The
largest part of most applications is hidden since it’s usual to have more
non-user interface code in applications than code which output will be directly
visible by the user. If you imagine web development as an iceberg, the tip
(visible) is the front-end and all the rest will be back-end.
Back-end development is any kind of development that doesn’t involve creating code that produces a user interface. On the other hand, the back-end has to handle all the logic in the background and make the system work, with the user barely noticing what was being done behind the scenes: data needed to be stored/loaded, servers getting connected, algorithms processed and solutions computed. Back-end developers’ concern is about structure, content, and security through a focus in databases, microservices, and architecture of websites and not in how the information is displayed.
There are countless possible languages to work within back-end development, so let’s try to break the most popular ones down:
Python
Python is one of the most demanded and widely popular programming languages nowadays. It is used to develop web applications, network servers, applications and plays a very important part in new emerging trends that are Artificial Intelligence, Machine Learning, Robotics, and Big Data. Python is also one of the simplest programming languages to start learning, being very high level and easy to understand, thus making it an excellent choice for beginners.
JavaScript (Node.js)
JavaScript is the programming language if you want to become a front-end developer. But it can also be used for back-end development, using the Node.js framework. The biggest advantage of using JavaScript in back-end development is that it allows you to create an application fully written in the same programming language.
PHP
PHP is a programming language made for the web, used mostly server-side and it’s quite useful to serve web pages written in HTML. PHP is declining, but it’s still being used almost everywhere. It’s an open-source language that is easy to use, which makes it very suitable for beginners.
C# / Java
C# and Java are similar languages in a way that they are both strongly-typed object-oriented programming languages, designed for runtime compilation. They are both descended from the C programming language, and they are syntactically similar in lots of areas. But this is where the similarities end, and there is a world of differences in these two languages, especially regarding frameworks and development environments. Both are relatively simple to grasp and massively popular.
You can’t go wrong with any of these languages: they may be considered the core of back-end development and every developer should know at least one of these. But there are a lot of other languages worth giving a look, such as Ruby, Go or Rust. Just find what it suits you better and practice it until you’re comfortable with it.
It’s time to talk about databases
Anytime you make a request from your website, the information you input or require needs to be stored and/or easily accessed somewhere. This is also the responsibility of a back-end developer, to create a connection between the website and the desired data. For that, the information has to be available in a collection of data, or databases.
In databases, information is stored, organized and processed in order to make it available for the user to fetch the required data and returning it to the website. Databases can also accept new data and alter their information when there’s a significant interaction between a user and a website/application.
There are two main different types of databases:
- Relational databases (SQL) – A relational database is a rigid, structured way of storing data, through the organization of data fields into defined rows and columns.
- Non-relational databases (NoSQL) – A non-relational database does not follow the table model and is used to handle information when the data requirements are unclear or just doesn’t fit into rows and columns. This more unstructured data can include videos, maps, links or location, and the way the data can be stored is more document-oriented, like a single document file containing related information.
The more popular and recommended databases to learn are PostgreSQL or MySQL for relational databases and MongoDB for non-relational databases.
Back-end frameworks are your friends
“Server-side web frameworks (a.k.a. “web application frameworks”) are software frameworks that make it easier to write, maintain and scale web applications. They provide tools and libraries that simplify common web development tasks, including routing URLs to appropriate handlers, interacting with databases, supporting sessions and user authorization, formatting output (e.g. HTML, JSON, XML), and improving security against web attacks.”
MDN Web Docs
Frameworks are a major part present either in front-end or
back-end development currently, as just by using a framework saves the
developer a lot of time and also guarantees consistency in their code.
Depending on the project and language, there might be a need to use a framework
to make it easier and faster to develop your application. For each of the
languages listed before, there is at least one corresponding framework, such as
Express (Node.js), Django or Flask (Python), Laravel
(PHP), Spring MVC (Java) and .NET MVC (C#).
Developing the front
So, with the back-end developer taking care of all the business logic of the application, it’s up to the front-end developer to take care of the most complicated part: please the user. User experience is a big part of an application/website, and usually, people don’t care how well structured is the architecture implemented by the back-end, but mostly with what they can experience.
Everything a user sees clicks or uses is the work of the front-end developers, which are responsible for designing and implementing the code necessary to bring the application to life, in a functional, intuitive and appealing way.
The bread and butter of a front-end developer, i.e. the core
elements, are:
· HTML – Responsible for the site organization and content.
It organizes and displays the information and media as the front-end developer
wants, providing meaning to our web content.
· CSS – Responsible for the graphic elements of the website, like colors, margins or fonts. It’s basically the make-up that enhances your website look.
· JavaScript – A Scripting language that allows us to completely transform a website and make it functional. It enables us to dynamically update the content, control the display, the navigation, animations and much more. Basically, every web page that does more than statically display information, it surely needs to have JavaScript as well.
We saw before that JavaScript can be powerfully used with Node.js running in the back-end, and this is due especially since it allows us to create a coherent application with both client-side and server-side developed with the same programming language.
Frameworks: front-end edition
As in back-end, front-end developers also have available several
frameworks and libraries to develop their websites in a faster, easier and
optimized way. These frameworks for front-end development allow building
powerful single-page applications with well-structured and interactive UI.
There are three main competitors:
· React
Most popular, relatively easy to learn. React is a JavaScript component-based library with its own syntax (JSX). Created and maintained by Facebook, it has a really big community and frequent updates. It is very highly performant, especially due to its Virtual DOM (Document Object Model), in which a virtual representation of the user interface is kept in memory until it’s synced with the “real” DOM whenever it matches the desired UI state.
· Vue.js
The biggest growth in popularity, the easiest to learn. Vue.js
is a component-based and the smallest from these three mentioned, not being
backed up by a large company like Google or Facebook. Nevertheless, the Vue
community is rapidly growing in popularity due to its simplicity, flexibility
and high performance. Vue is very beginner-friendly and significantly smaller
than React or Angular, making it outstanding for people starting out with small
personal projects.
· Angular
Used more in big projects and enterprises, harder to learn. Angular is also a component-based framework, evolving from the earlier version of AngularJS. Angular was created and maintained by Google, which similarly to React, has a really big community and guarantees safety in terms of technological updates. Instead of JavaScript, Angular uses TypeScript, which is a superset of JavaScript, meaning it as all the functionalities and characteristics of JavaScript but also extends it even further beyond.
It’s important to point the fact that the front-end world is
exponentially growing and constantly changing, and maybe from the time this
article was written to the day you’re reading it, these technologies are
already a thing of the past. A good front-end developer has to keep current
with all the different technology that pops up every day, while a back-end
developer has a more stable environment with fewer changes over time with their
technology.
Although the necessary technology stack to know in order to become a front-end developer may be considerably smaller than a back-end developer, and therefore simpler one might think. The truth is that sometimes front-end development can be quite more complex than back-end development. While back-end development as to keep in mind the structure in an almost constant methodical way, front-end developers require the creativity necessary to bring to life applications, which can be quite challenging sometimes, especially taking into account the necessity to master state management, understand lifecycles, implement routers, create stylings and keep in touch with all the frameworks that are constantly changing. All of this while having to worry about providing an impactful and positive experience on the user. Doesn’t seem so easy anymore, does it?
Why not both?
I pointed out at the beginning of this article that sometimes, developers need to understand the full scope of web development: know and work with front-end as much as back-end. This type of developer is called full-stack developers, who can create and deploy an application/website from scratch. The biggest advantage of a full stack developer is that it has none or very little dependencies on other developers to create a final product, due to the complete understanding of the technology stack involved. Full-stack developers are perfect for small companies or freelancing positions since it’s a cheaper and more flexible role, in which one can determine from start to finish what he really wants to do.
So, full-stack developer sounds great, so why even bother making a distinction between back & front-end developers rather than everyone just becoming full-stack? Well, simply put, due to the popular expression “jack of all trades, master of none”. It is really hard to become an expert in all the technologies involved in client-side and server-side programming to be acknowledged as a real full-stack developer. Usually, for bigger companies, it can be a better option to hire two expert front & back-end developers instead of a full-stack with experience in both. And also, if you’re a really good full stack developer, who do you think every other developer will rely on and bother with questions?
Hopefully, you can now easily identify the difference between back-end and front-end, with some knowledge on the main technologies needed from each role. If you want to start practicing your web development skills, I wish this article has been of any help in guiding you to your most suitable web development path. Now it’s your turn to start diving into web development and just code as much as you can!
Efficient collaboration between our profiles is the cornerstone of our Digital Studio methodology. Have a look at how we ensure smooth collaboration between front-end developers and UI designers in our next article on development!
