How to connect backend and frontend

Question

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.

Answer 1

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:

1. Model–View–ViewModel (MVVM)
2. Model-View-Controller (MVC)
3. 3 Tier Architecture

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.

1. Templating:

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.

2. API: API stands for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Let's say the user in your school portal inputs his name and password and hits login. That will send a post request to the backend and the backend which you wrote will check if the user is real or not. If the authentication is successful the backend will send a message and the user will navigate to the portal's dashboard.

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.

Answer 2

Usually although every language deals with HTTP requests that's a relation between then, like all uses POST, GET, PATCH, and all of them uses bultin-in methods to deal with those. Basically it goes like this:

• User clicks buttom(Send Resquest)
• Server receives request
• You process the request
• Then you send result through HTTP protocol.
• And then repeats However how this will occur depends on your approach. As follows:
• Monolithic Application: you will have your backend code and frontend in the same place and they will communicate through Methods and programming language-native function to share data. the advantage is that its easier to mantain once it's all in the same place. The disadvantage is that it doesn't scale very well and it's hard to debug once the code itself is to tight together.
• Client-Server: You will have your backend code in one server, and all your frontend code in another server communicating through API or gRPC. The advantage is that the services that each server provide can work independently which makes it easier to debug, to scale and to outsource the code, and it's even easier to mantain. but it's harder than monolithic and it's more complex cause usually you will be dealing with two servers and sometime two repositories.

My advice

I believe that you need to decide where you want to focus, if it's backend then study backend like, PHP, Go, Node for a programming language, MySQL, PostgreSQL for the database, and learn how to create RESTful API in the language your choose, after you have a level of understanding that enables you to create an API from scratch that retrieves that from a database then you should start learning some frontend stuff, like Vue, Svelte or React, I don't advise you to learn HTML, CSS, and JS like in a course, just go right to the frameworks and let your doubts lead your path(search only what you don't understand)

But if you choose frontend then start with Basics in CSS, HTML, and JS, but only for a month or so then jump to a JS Framework like React, Vue, Svelte or others(Make your own research) the idea is for you to master through pratice and research, and then you can learn some stuff on backend like how to create an API so that you can consume it.

The point is choose, one learn the fundamentals of it, at least until you can use to express your ideas and then complement with the other part.

Answer 3

The most used approach for what you are trying to achieve is using HTTP methods, I suggest that you try doing a REST Architecture your back end will be a single web service that responds to HTTP requests made from your front end.

For example: Your front end sends a POST request yo your back end your back end will process the bubble sort function and send back a response to your front end.

Try googling documentation about REST architecture you will find a lot of information, also if you are using java or python you can easily implement REST API using Spring Boot framework with Java or Flask with Python.

Following this guide you can create a simple REST API in java, and then from the front end you just need to make HTTP requests to that API you created.

Answer 4

Try MVC or ASP.NET, I had the same strugle where I knew both and didn't know where to combine them. Until I came across MVC.

It joins both in perfect sincronization where you have the frontend part (View) and the Controllers for it that's your backend. Search and start trying it on Visual Studio.