Frontend vs Backend

It's actually not just web apps - when building any kind of app, you're going to be dealing with a frontend part of that app and a backend part.

But what are those parts about? And why do we need them?

In a nutshell, it's very simple: The frontend is what the user sees (e.g. the HTML + CSS + JS code running in the browser), the backend is responsible for the heavy lifting behind the scenes.

Of course frontend and backend "talk to each other". Http requests are sent from the frontend to the backend in order to transfer data entered by the user or fetch data from a database. More on that in a second!

Important: The backend is called such because it's not running on your user's device (i.e. NOT on the mobile phone or computer of your user) but on some remote server. That means: On a server owned by you, the developer / provider of the web app.

So we could also translate frontend-backend to client-server.

We have those two ends because neither end can do everything on its own.

Consider a basic online shopping site like Amazon.

Of course the user "sees something" - you can see the product catalogue, you can add items to your cart and view your cart and you can also go to the checkout screen.

But what about all the data you're interacting with? What about the products you're browsing?

Is that data stored in your browser or on your computer?

It is not!

Of course that data is provided by Amazon and it needs to be the same data for all users. In addition, Amazon of course needs to be able to manage that data and remove or add (or update) products as needed.

Therefore, this data of course needs to be stored on Amazon's servers - and that's exactly what "the backend" is about in the end. It's about managing data (or also logic - we'll come back to that) centrally and outside of the user's device.

On the other hand, the frontend is the right place for everything that's directly involved with the user interface.

After all, the user interface is rendered directly on the device of the user. So no matter if we're talking about a web app or a mobile app, the UI is rendered on some screen on some device owned by our user.

And whatever happens on that screen is controlled by our frontend code. Be that an overlay that opens up, form input validation or a loading spinner - whatver the user sees, the frontend is responsible for showing and updating it.

Of course, as mentioned before, in conjunction with the backend.

Frontend and backend communicate with each other - via Http requests.

The frontend will, for example, send entered data to the backend. The backend might then again validate that data (since frontend code can be tricked) and finally store it in some database.

By now, you could think that "the backend" is basically just a synonym for "database".

That is not the case!

A database would be part of the backend but besides that, logic that runs on your backend server is another vital part of "the backend".

Because it's not just about storing data. Most web applications also have code that can't or shouldn't run on the client-side.

Here are some examples for backend logic:

• Long-taking operations that would slow down the UI

• Interactions with the file system - access to that is not granted in the browser for example

• Server-side input validation - because client-side code can be viewed and edited

• For the same reason: Any code that interacts with a database or uses credentials/ keys that shouldn't be exposed to website visitors (also see this article and video)

The frontend should really only contain code that is related to updating the user interface. It should fetch and send data, present data to the user and allow for user interaction.

Any logic that's related with sanitizing data, database communication, the file system or anything like that should be handled on the backend.

Frontend development consists of multiple parts and programming languages.

For the web, you build websites that are loaded and shown by the browser with:

• HTML as the base skeleton

• CSS for the styling (explore our full course)

• JavaScript for the client-side logic (explore our full course)

These are the basic languages you need.

But you'll rarely build bigger frontend applications with just those basics.

In reality, you're going to pick up a frontend framework as well - popular choices are:

• React.js (explore our full course)

• Angular (explore our full course)

• Vue.js (explore our full course)

If you're building a mobile app, you're going to use either Java or Kotlin for Android or Swift or ObjectiveC for iOS development.

OR just explore alternatives like Flutter, React Native or Ionic (with Angular, with React) to build real mobile apps for both platforms with just one programming language and one codebase!

If you're going to go for backend development, you need to pick up a programming language that runs on a server.

Popular choices are:

• NodeJS which conveniently is based on JavaScript (explore our full course)

• PHP

• Python (explore our full course)

• ... and more ...

In most web sites and web apps, you work with both ends. The same is true for mobile apps by the way.

But theoretically, you can build web or mobile apps that only have a frontend. Or just a backend.

The frontend-only part should be relatively intuitive: You can have apps that simply don't need to store or fetch any data or files.

Think about portfolio pages where you simply describe your services (e.g. you're working as a consultant). Or blogs where you simply write all articles with just HTML + CSS + JS. You need no database in that case.

Also see this article and video for more details on the different kinds of web apps you can build.

What is backend-only though?

On first look, this makes no sense, right? A web app without a frontend is not usable by anyone. Users can't see anything after all.

That's true but not all applications you're building are meant to be consumed by end-users.

You might be building a simple (REST) API that can be used by other developers / businesses.

Take the Google Places API as an example: It allows you to convert addresses to coordinates and vice versa (and more).

This API is simply there to exchange data.

Of course, you can build such an API on your own, too. And that would then be an example for a web app that only has a backend.

Especially if you're into web development, you might've heard about "fullstack" development as well.

This simply means that you (i.e. the developer) don't focus on just one end. Instead, you learned programming languages and frameworks for both ends and hence you're able to build a complete web application on your own.

Especially as a freelancer or in a small startup / company, this can of course be a great advantage!