Hi, in this article I would like to tell you about what are frontend and backend, and the difference between them.

Overview

A web application can typically be separated into 2 distinguishable parts - frontend and backend. Simply speaking, frontend is the 'presentational' part of the app, the part that is directly exposed to the user, i.e the page that the user interacts with, the UI, etc. Whereas backend is the part of the app that is not directly exposed to the user - the server and the database. The user usually cannot directly interact with the backend - instead they do it by interacting with the frontend and then the frontend passes whatever data is provided to the backend, and optionally the backend passes some data back to the frontend for the user to see.

Developers are usually also divided into two groups - frontend developer and backend developer respectively. There is also 'full stack developer', who is a developer who does both frontend and backend.

Frontend

The frontend, the presentational part of the app, also often called the 'client', is basically anything that the user has direct access to. For example if we have a web app, then the frontend would be the page that the user is interacting with and the HTML, CSS, JavaScript that runs on the page.

Frontend developers aim to implement the UI and UX according to the provided design, while also making sure that the code is well-written, semantic and performant. It is important to write semantic frontend code because it is the code that gets exposed to screen readers. And it is also important to write performant code for a great user experience.

Frontend code usually deals with components/elements, state and styles of the webpage.

Security on the frontend is practically (or even completely) non-existent, as the user usually has complete control over the code that gets run on the frontend. Still, it's a good idea to secure your frontend as much as possible, but beware that any frontend security can be bypassed. One method of securing frontend code is obfuscating code by running it through a JavaScript bundler.

Frontend frameworks

A frontend framework is a library that eases the development of the frontend of the app by offering features such as reusable components and state management. Some notable examples are:

• React
• VueJS
• Angular
• Svelte

But there are many more frontend frameworks that you can find with a simple Google search.

Backend

The backend - the server and database, are parts of a web app that the user doesn't have direct access to. The user may communicate with the backend through the frontend, but not directly(usually). The backend deals with things like HTTP requests, REST APIs, authentication.

Backend developers deal with the implementation of backend features such as handling of routes, database access, authentication, and overall architecture of the backend system.

Backend code is much more asynchronous in contrast to frontend code, because it usually must deal with many requests at once and perform many actions concurrently. As such, backend code heavily uses things like async functions, multi-threading and events.

The backend is much more secure (if done properly) than the frontend, and because of this any sensitive information must be stored on the backend. The backend can be secured by using authentication methods such as sessions, JWTs or OAuth.

Backend languages

In web dev, the frontend is almost always written in HTML, CSS and JavaScript, whereas the backend is usually written in some programming language, such as:

• Java
• PHP
• C++
• Go

The backend can also be written in JavaScript using runtimes such as NodeJS or Bun.

Hybrids

There exist a good amount of apps and programs that run only locally, without the need for a server. In this case you could say that the app is frontend-only, but I think it is more useful to still separate this app into frontend and backend. In such an app, the frontend would be the parts of the app that the user directly interacts with, such as the UI, while the backend would be any behind-the-scenes logic such as file writing/reading, mathematical operations, etc.

Conclusion

In this article we explored the concepts of frontend and backend, and the difference between the two.

I hope you enjoyed reading this article, and I hope you learned something new from it!

Have a great day!