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.
3 Answers
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 Sprint(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:
- Model–View–ViewModel (MVVM)
- Model-View-Controller (MVC)
- 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 ReactJS(front end) and Nodejs(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.
- 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.
- 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.
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.
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.
Related