I am very new to frontend programming so please bare with me. In school we learned backend programming languages such as Java, C#, Python, C and some C++. As a hobby I have by myself tried to learn frontend so I started with Vue, JavaScript, HTML and CSS. In school we usually run our code in terminal (for backend programming), for example we did a bubblesort algorithm and then we provide some user input (via terminal) and then call bubblesort to sort the input. The thing is when I write a program in backend and I want to make a website to it, how can I connect my backend to my frontend? Lets take a simple webpge as an example where I write a program that sorts my numbers with bubblesort and then I want to be able to make the user write an array in a website and then click ”sort” button. When he/she clicks it, my backend bubblesort function should be called and so on. I have searched on google but all I can find is other websites providing services to make websites, I want to program from scratch both backend and frontend and connect them together. Is there a way? If yes, does every language has its own way or is there a common way? What I mean is maybe I write backend with Java for one website but another website I write it with Python. Is there a difference in how to connect back and frontend then? Thanks in advance.
The question is quite vague
Now there are multiple ways for the front end to connect to the backend. Let's see. But first let's recap.
Front End: Refers to the client side. The UI that the users interact with.
Example frameworks: ReactJS(JS/TS), VueJS, Angular etc
Back End: Refers to the server side work like authentications, data fetching etc.
Example frameworks: NodeJs(JS/TS), Django, ASP.NET etc
HTML, CSS and JS are the building blocks of websites. As the time progressed we got frameworks like Spring boot(Java), asp.net(c#), django(python) etc. They may differ in the language they are built on top off. But they all follow the same patterns. Some of the common design architectures are:
For difference in MVC and MVVM check this answer
Now the developers depending on the project chooses any one of this patterns. But this are just architectures that can be implemented with any of the frameworks out there.
How the front end and backend communicates is a different story. Let's say you and I are both tasked with creating a school management system.
You chose Angular(front end) and asp.net(backend). On the other hand I chose React js(frontend) and Node js(backend). We can both achieve the same goal. But with different languages.
API vs Templating: This are two different ways we can have our application establish communication between frontend and backend.
A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
For a better understanding of when to choose templating vs API refer to this post
Now about the example you provided i.e bubble sort. You actually don't need a backend and develop an API to show the sorted data. And usually the backend is required for the websites which handles authentication, authorization, protected data etc like an e-commerce.
That said you can have a backend for such a project. You'll have to send the data to the server side which will sort the array and send the sorted result back.
Refer to the section on API/Templating to choose you're preferred method. Hope you'll have a good understanding on how to work your application.