Is the term ‘Front-End’ synonymous with ‘Client-Side’? If so, is this always the case?

As a relatively new (self-taught) web developer, I’ve heard the terms front-end, client-side, back-end, and server-side quite often. To me, front-end and back-end were always synonymous with client-side and server-side, respectively.

However, as I’ve begun working with MVC frameworks like CodeIgniter, I’ve come across a few instances of front-end referring to basically anything the end user sees (including server-side code), while back-end has referred to anything the end-user doesn’t see (including CMSs). Client-side and server-side, to me, are much more concrete in their meanings; they have a very distinct line separating them. Front-end and back-end, on the other hand, do not.

In a conversation I remember having with another web developer, he referred to CodeIgniter (in its entirety) as a front-end, and this threw me for a loop. I wasn’t sure whether to correct him and say that CodeIgniter was my back-end, or if my definitions of the two terms were completely wrong.

Searching for definitions of front- and back-end confused me a bit more in some respects, though they did clarify a few things. I’d just like to know where the lines are drawn between these four terms, and how they piece together in the context of web development (specifically on a LAMP stack).

I don’t believe there is a formal definition for those terms, and as you noted there is overlap in some cases.

front-end and client-side overlap.
server-side and back-end also overlap.

If I were to split hairs, I would offer these rough boundaries:

client-side is an application that runs at the users’ computer. It could be a stand-alone application (more often) or it could refer to a web browser based interface (less likely).
front-end also faces the end-user and generally runs in a web browser based interface. I haven’t heard of thick clients being referred to as a front-end.
back-end refers to processes and services that are running either on another server or in the background of the users’ computer. More often than not, it refers to processes that are not on the end users’ computer. But the key, as you mentioned, is that the end user is not necessarily aware of the processes running.
server-side is an extension of back-end but explicitly reinforces the fact that the processes are running somewhere else and not on the end users’ computers.

By way of example, and to highlight the confusion between the terms, I’ll use Minecraft as an example.

Minecraft has a

client-side application when you run the jar files locally with your own JVM.
front-end if you choose to run the client application in your web browser
back-end process that can be running locally on your machine if you are in stand-alone mode
server-side process if you choose to log into a server hosting the Minecraft server application.

If you dig into some of Minecraft’s statistics, you’ll see that they simply designate a client and server component to the game; they don’t necessarily care where those components are run.

To directly answer your questions:

Is the term ‘Front-End’ synonymous with ‘Client-Side’?

Sort of, but not really. There’s a nuance between the terms if you are discussing things outside of the web based world. If you’re strictly within the web based world, then yes, they are functionally synonymous.

If so, is this always the case?

In the web world, I would say yes. In other realms, I would say no as explained in the rough definitions I offered.

Server-side runs on the server. Client-side runs on the client. Back-end is crunching data. Front-end is displaying it.

Look at this web page. Pulling all the comments from the database is server-side, back-end work. Laying that data out in a template is front-end, server-side work. The AJAX voting widgets and the fancy text input box are front-end, client-side.

The client side in a web application is under the control of the user / customer, the server side is under the control of the developer. This is one reason why one should do data validation on the server.

The terms front end and back end are often used synonymous for client side and server side and in many cases it is ok. However, there are also important counter-examples. To me, front end is anything that shows something to the user.

In the following image, you can see typical technologies / concepts and how they fit into the (front end, back end) / (client side, server side) quadrants.

Front End and Back End Developers

Frontend and Backend developer are two very common roles. The line gets a bit fuzzy when you have things like React which can be rendered server-side and Flask which includes the jinja templating engine.

And although I would put technologies like Web SQL database and Indexed Database API in the “client-side backend” quadrant, the role that typically knows about this is the front-end developer role.

Frontend developers should know about HTML, CSS, the DOM and general browser capabilities (e.g. caniuse). Typically they know some jQuery or React. Although it is backend according to my definition, I would expect frontend developers to know about client-side storage
Backend developers should know about web servers like nginx, gunicorn, Apache or node.js. They should know at least one SQL database (Postgres, MariaDB / MySQL, …), key-value stores (Redis), API develpment (REST and GraphQL). LAMP was a typical stack a while ago. I would NOT expect a backend developer to know anything about browsers!

UI Designer vs Front End Developer

Two other roles are the UI designer and the frontend developer. So one difference is that one is a designer and one is a developer.

Objective:

UI designers draft the user experience
Front End Developer makes sure it looks as expected (building the real thing from the draft)

Tools:

UI designers mostly use Adobe Photoshop / Illustrator / Sketch / Balsamiq / Invision.
Front End developers use React, Vue, Angular

APIs: REST and GraphQL

APIs are provided by the back-end teams and are used by the frontends to fill the app with the data. The backend is the persistent storage across devices, the frontend is the presentation layer. The API is the communication channel for both.

I generally find using client-side and server-side for describing development/developers is less vague. That portion of the client side where we’re juggling/formatting data can be seen as being a back-end component. On the flip-side there’s all the templating that tends to happen on the back end which being “for the front end” tends to result in people talking about them as front end Java or C# development. It’s rare, but I’ve seen it in job descriptions.

But yes, generally speaking the front end is the part where the interaction happens. The back end is the part where all that interaction gets turned into something useful.

This question is somewhat older but let me add my 2c:

In my own web development, I used the term “frontend” meaning code – or other resources – which are processed in the browser for a while. Now, I use the term “client”, because it might be confusing esp. when doing web applications. (Single Page Apps)

Simply because on the backend side, there is also a “frontend”, which means in general the part of the application that is responsible for output (to the browser). So “frontend” can actually mean two different things. The term “client” however is imho more clearly describing something that is related to the actual client (in this case, the browser).

PS: Well, maybe I also should change my nickname to “client_dev” now 😉

Filed under: softwareengineering - @ 18:21

Thẻ: backend, definition, front-end, terminology

Thiết kế website giá rẻ

Danh mục

Is the term ‘Front-End’ synonymous with ‘Client-Side’? If so, is this always the case?

Front End and Back End Developers

UI Designer vs Front End Developer

APIs: REST and GraphQL