Confusion On Frontend vs. Backend for Web Developement

[person123]

TL;DR Summary

Are "under-the-hood" calculations happening client-side still considered backend in web pages?

The typical distinction between frontend and backend seems (to me at least) to lump two different distinctions together, one being client-side vs. server-side, and the other being UI functionality vs. computations powering the page. For something like a social media site, those two align, but I think they conflict in other cases.

Using Desmos as an example, all the UI functionality (e.g. buttons) is clearly frontend. Handling user accounts is clearly backend. But the actual calculations seem less certain to me. It's happening client-side (I can still use it when there's no internet), but it's more of an "under the hood" sort of thing that's not directly exposed to the user, and it's the thing powering the site. Would this typically be called frontend or backend? Maybe this is an issue of semantics, but I'm talking to others about tools like these, and it's causing a bit of confusion (I would have always called it frontend, but I think they're calling it backend), so I want to make sure I'm on the same page.

 

[Borg]

From a programming perspective, web sites are typically segmented as front end (client side, i.e. browser), the business layer (server) and back end (databases and other data sources). For a user, they may define anything that they can't see as being part of the back end which could be everything from the database to the javascript on their browser.

 

[PeterDonis]

Maybe this is an issue of semantics, but I'm talking to others about tools like these, and it's causing a bit of confusion (I would have always called it frontend, but I think they're calling it backend)

The only way to really resolve this kind of problem is to ask. Terms like "frontend" and "backend" don't have unique accepted definitions that everybody uses, so your only option is to find out how the people you're talking to are using those terms.

 

[jack action]

I would define a "backend" as anything you just put an input and it gives you an output without you knowing what it does - or how it does it - exactly.

You built an app to be run on a browser, this is your frontend. You make HTTP requests to a distant server, that is part of your backend. You make calls to a javascript library, that is also part of your backend. Javascript itself is also part of your backend.

The developer on the server-side uses PHP to respond to your requests? PHP is his frontend. PHP is built with C, thus C is part of the backend of PHP. If the server-side developer connects to a MySQL database via PHP, then MySQL is also part of his backend.

If you write the code of your app in Javascript, the PHP code on the server, and set up the MySQL database, then you manage several layers of "independent" codes and you would be a full-stack developer. But you still rely on a lot of backend developers from my point of view.

But as said in other posts, mostly due to web development, the definitions have evolved toward "presentation" vs "data access" or "client-side" vs "server-side". (source)

 

[jedishrfu]

My understanding of frontend and backend are:

- frontend includes the web page itself and any code that goes with it and runs on your browser
- backend is the code that creates the web page

Many times interactive web pages use javascript to validate inputs prior to sending them to the backend for processing. Interactive web pages may also use javascript code to animate the page so that it feels like you are using an application.

In contrast, when the processing is considered too much for the browser then developers will ship a request to the backend and when complete the page will update with the new information.

There is a constant battle in development of offloading work to the browser but trying not to overly impact the enduser experience. You want the web page to be as interactive as possible while not slowing down its responsiveness. The backend is there to support the frontend, for doing heavier computations or data queries.

Many developers had to learn javascript for the frontend and then some other language like java and/or SQL for the backend. In addition, various types of security had to be considered to make your application safe from malicious attacks as in someone inserting SQL into an input field and dumping a portion of your database out on the browser. For larger applications, programmers are divided into teams with one handling frontend code (javascript), another team handling backend (java/nodejs) and yet another handling data management (SQL/Spring...).

Its a very rich field with many many different ways to create a client / server app with web capabilities.

 

[jedishrfu]

A simple example of this are Python flask applications. Python flask code will have the web page as a string embedded within the application or will more likely reference a web page template.

Flask will send it to the browser when a request comes in ie a URL for the web page. The browser displays the page and runs the javascript embedded within it.

The application might have a button that sends data back to the flask application and the backend flask will generate an updated webpage.

Rather than write a book on it, here's a simple tutorial:

https://www.geeksforgeeks.org/flask-creating-first-simple-application/

 

[pbuk]

Would [the code that does the maths in Desmos] typically be called frontend or backend?

Niether. These terms refer to roles in a user application whereas the code that does the maths in Desmos is written and tested without going anywhere near a user application.

 

[pbuk]

I would define a "backend" as anything you just put an input and it gives you an output without you knowing what it does - or how it does it - exactly.

You built an app to be run on a browser, this is your frontend. You make HTTP requests to a distant server, that is part of your backend. You make calls to a javascript library, that is also part of your backend. Javascript itself is also part of your backend.

The developer on the server-side uses PHP to respond to your requests? PHP is his frontend. PHP is built with C, thus C is part of the backend of PHP. If the server-side developer connects to a MySQL database via PHP, then MySQL is also part of his backend.

That is not the normal use of these terms.

 

[jack action]

That is not the normal use of these terms.

Referring to the following quote (which I like best to define these terms), it is.

In software architecture, there may be many layers between the hardware and end user. The front is an abstraction, simplifying the underlying component by providing a user-friendly interface, while the back usually handles data storage and business logic.

Here, "end user" doesn't necessarily mean "someone using a browser or an application with buttons and forms". For example, PHP is a front - a user-friendly interface - for its "end users", which are simply other programmers.

When I want to use an SSH or HTTP protocol, I use OpenSSH or wget which are fronts for the business logic of those protocols. They just are "user-friendly" interfaces.

 

[person123]

Niether. These terms refer to roles in a user application whereas the code that does the maths in Desmos is written and tested without going anywhere near a user application.

The code to do the math is still interacting with the user application: the text the user inputs is sent over and the results from the calculation are sent back to the interface. Just as you could test the "math code" without the application, I imagine you could test queries to a database without the user application either. It doesn't seem any more divorced from the user application than typical components of a backend. To be clear, I know very little about web development -- am I missing something?

 

[pbuk]

To be clear, I know very little about web development -- am I missing something?

Perhaps. Let me quote from https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/?tag=pfamazon01-20

Developer skills

Frontend developers understand the customer experience and accommodate user needs. Their primary skills involve proficiency in JavaScript, CSS, and HTML and design knowledge in creating visually appealing user flows. Frontend developers also learn several frontend frameworks and know how to conduct performance optimization.

Backend developers code application functions and make apps more secure, error-free, and fast. A backend developer is proficient in several programming languages like Python, Ruby, Java, and PHP. They know application development frameworks like Django, Ruby on Rails, and Laravel that integrate the frontend and backend. Backend developers also know how to manage and design relational and non-relational databases.

The code that does the maths on Desmos doesn't require either of these skill sets, it requires skills in numerical analysis and computer algebra. This makes Desmos very unusual among web applications and therefore not a good example.

 

[person123]

Perhaps. Let me quote from https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/?tag=pfamazon01-20


The code that does the maths on Desmos doesn't require either of these skill sets, it requires skills in numerical analysis and computer algebra. This makes Desmos very unusual among web applications and therefore not a good example.

That makes sense, although I think that's why I was confused.

Even so, maybe this is a stretch, but supposing the CAS and other math code was written in JavaScript (which is just a guess) it would still require knowledge of JavaScript as well some sort of performance optimization (maybe different than what they're referring to though).

Even parsing the latex expression going into the field requires skills different from what the reference described, but that seems very much like a frontend sort of task.

 

[jack action]

Perhaps. Let me quote from https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/?tag=pfamazon01-20


The code that does the maths on Desmos doesn't require either of these skill sets, it requires skills in numerical analysis and computer algebra. This makes Desmos very unusual among web applications and therefore not a good example.

From your source:

When your backend processes a request, it usually interacts with the following:

• Database servers to retrieve or modify relevant data
• Microservices that perform a subset of the tasks your user requested
• Third-party APIs to gather additional information or perform additional functions

The code that does the math on Desmos has to be considered a microservice ... but it is on the client-side and no requests are sent to the server.

To me, that is what differentiates a website from an app:

• Website servers deliver complete HTML documents (or at least all information to build one);
• App servers deliver a fully functioning program that creates on the client-side the information requested.

For example, the request https://example.com?5-2 that would return simply an HTML document reading 5-2=3 is a website where the calculation has been done on the server. But the request https://example.com/my-calculator returning a javascript file with a corresponding HTML form to do any calculation on the client-side is an app.

You may have a website page with an integrated app.

Instead of using the microservice on the server-side, the back-end developer sends the entire microservice as a response to the request. So, whether the microservice is used server-side or client-side, I can only classify this as a back-end responsibility. From the front-end point of view, the back-end could send another microservice - say, an upgraded version - that gives the same output with the same input and it wouldn't matter to them.

 

[pbuk]

Even so, maybe this is a stretch, but supposing the CAS and other math code was written in JavaScript (which is just a guess) it would still require knowledge of JavaScript as well some sort of performance optimization (maybe different than what they're referring to though).

Yes, it is written in JavaScript, and performance optimization is a key skill for a computer algebra programmer. That doesn't make them a front end developer though.

The code that does the math on Desmos has to be considered a microservice

No it doesn't, it does not have any of the characteristics of a microservice. It is just a library.