What is Front-end and Back-end? What are the Differences?

In this article, I'll explain everything about what front-end and back-end mean, their differences in programming, and why developers are positioned in these two categories.

Generally speaking, website and app development takes place in two layers: The layer that can be seen by the user (Front-end). And the layer that cannot be seen by the user (Back-end). Programming languages and developers can also be classified according to these layers.

There are also developers who work on both the front-end and back-end. These developers are called Full Stack developers.

Usually, web developers tend to specialize either in front-end or back-end. The difference between these two layers is in the technology in which the developer must deepen, because although the two areas are a part of the same whole, they use different tools and technologies. In addition to a totally different way of thinking.

Front-end

Everything you see on your screen, on this website, is considered front-end. It's what the user can see when visiting a page or opening a mobile app. This layer can also be called the "Client-side".

Imagine a wall clock, where you have the hands, the time numbers, the artwork of the clock background, the frame, etc. All this would represent the front-end of the clock. The gears, the springs, the battery, and all the internal mechanism we can't see would be the back-end.

Bringing this same reasoning to software development, all the visible part or all that affects the visible part of an application is part of the front-end. For example: Menus, Buttons, Images, Fonts and Forms, all this is part of the layer that can be seen, therefore the front-end.

A website can be built using only the front-end. Sites like this are also called static websites. If you only need to display the content, without any kind of dynamic interaction, like a query to a database, you can achieve that by only using the front-end layer.

Front-end developers and technologies

He who works with the front-end development of a piece of software can be called a front-end developer or programmer.

In general, three fundamental languages are used in front-end web development:

• HTML;
• CSS;
• JavaScript.

Each of these languages is run on the client's own computer, so they are also called "client-side" languages.

The HTML language is the most basic and fundamental of all, and serves to structure everything you see on the screen. It's used to define what is a menu, what is a paragraph, what is a button, etc. All the websites in the world use HTML.

The CSS complements HTML, and serves to stylize everything you see, give colors to elements, change sizes, fonts, create animations, etc. Almost all websites in the world use CSS, because without it, websites would have the appearance of a text document.

And finally, JavaScript is used to create advanced interactions in the components of a website.

In recent years, the front-end field has expanded dramatically thanks to market demand for increasingly interactive and intelligent websites, integrating chats, real-time feedback, games, etc. And this has greatly increased the complexity of the field beyond these 3 languages.

Relationship with design and user experience

The visual part is not just about putting things in a way that works, but in a way that works, is useful, and is still visually pleasing.

It's a known fact that the design of a website can cause attraction or repulsion to its users, so front-end developers can also play the role of visually planning each element of the website, more like a design professional.

The field of designing visual elements is called UI (User Interface) designing. The field of designing how to arrange the elements in a useful and effective way is called UX (User Experience) designing. Often these fields are complementary, and the same developer needs to understand both.

Back-end

You may have not realized, but in order for this page to be visible in the way it is, some interactions took place on the back-end of this website for the information to be consulted and then delivered to you.

Some websites have control panels for publishing articles, designing pages, user management, etc. and some people often call this control panel "back-end", because it cannot be seen by the average user. But it's not right to call it "back-end", because the panel is still something that can be seen, and in fact, it's not the back-end layer of a website.

The back-end is something much more abstract. It's a layer that cannot be seen, but it can interact with the user, presenting something that can be seen. That's literally what happened on this website when I opened this article.

Imagine an ATM system, you insert your debit card and then your password. The interface where you enter your password is the front-end and it's being served by the ATM computer (it's the client-side part). So far so good. But after you press confirm, can you imagine how the ATM checks if your password is correct?

For security reasons, it wouldn't be smart to store all passwords on the ATM itself, nor in your debit card. And imagine if someone decides to change their password, all the ATMs would have to update at the same time. So there is what we call a server, which is nothing more than a computer, or a network of computers that "serve" certain information to a client computer. Hence comes the term server-side, representing the server side.

That's where the back-end layer comes in, which we don't see. Once you enter your password in an ATM, the ATM computer will send your password to a server that will process your data, check if your password matches your bank registration, and return a success or error message, allowing or not access to your bank account.

Back-end developers and technologies

All the mechanism that happens in the back-end can be developed using a language that can be also called back-end language, sometimes in a more complex system, it may be necessary to use several languages. Some examples are:

• PHP
• Ruby
• Node.js
• Python
• Java

These server-side languages essentially do the same thing. They can be part of different technologies, but in the end, you can replace PHP with Ruby for example, different from HTML and CSS which are two different languages and cannot be replaced. These languages can be considered concurrent and are used by both small websites like this, and giant websites like Facebook, Instagram, Youtube, and Google.

As in the ATM example, the back-end layer often works together with a database to store and query information. To work with these databases, a database language is used, this database language is also a back-end language. The most common database language today is SQL.

Relationship with infrastructure and security

Since the back-end programming languages are run by the server, they need to be hosted on this server in order to remain available for service.

If you have access to this article, it's because there is a server somewhere in the world hosting this website, with its database, its back-end language and the whole mechanism ready to be delivered in the format you are consuming.

Configuring a computer to host and serve a web system can be part of the daily life of a back-end developer, or at least the programmer needs to be familiar with this subject to do his job well.

The next thing that ends up being part of the back-end layer, and that's part of the back-end developer's responsibility, is to ensure system security. For example: a user cannot have access to another user's restricted information, nor be able to change information without permission. All that is defined when the website or application is coded, so the back-end developer must know how to assure the security of a whole software application.

Back-end or Front-end? As a developer, which one to choose?

As you can see, although the two fields cooperate with each other, one is very different from the other and each has a very wide range of options in which you can specialize.

There is no more difficult or easier area. In the old days, software was much simpler and you could do well as front-end just by knowing HTML, CSS and JavaScript. But a lot has changed since then, and to be considered a front-end developer, you need much more than that.

In fact, on both sides you need to know more than the basics. In the back-end you'll need to have a good sense of infrastructure and understand security to not have the system easily hacked or leak personal information. On the front-end, you will be a mediocre professional if you don't master some framework and don't have a good sense of UI and UX.

The best thing is when you are also at least somewhat full stack, having at least a good sense of both sides and going deeper into what you like the most. I particularly started this way and ended up landing more on the front-end part.

If you're starting out and want to know the first steps, I'd say start with small front-end projects, because that way you can do more things by knowing only a few things.

Learn how to make a simple page in HTML and CSS, then learn how to make a JavaScript calculator. Then start working with HTML forms and introduce some back-end language, like PHP or Ruby, which are easy to learn. With the basics on both sides you can do A LOT of things. In fact, a lot of people can make money with their own projects knowing little about both sides.

But if you want to have a more competitive resumé, having the chance to land in high paying jobs, the more specific and farther in either fields you are, the better.