How to create a symbiosis between backend and frontend

There are multiple ways in web development in which you can build backend and frontend parts and connect them. For example, you can use template engines to create the presentation part (frontend) and render data from the database (backend). Django web framework provides its default template engine for this purpose. Other standalone template engine technologies can be integrated with various backend technologies which serve the same purpose. Some of them are Jinja (Python), Mustache, Handlebars, EJS, etc.

A common way today to create a symbiosis between backend and frontend parts is, however, to use some of the frontend frameworks such as React, Vue, or Angular. For example, to create frontend parts, the part which the end-users see when they open some website or application. And to create a RESTful API on the backend part.

How does that work?

RESTful API is a piece of software that works based on HTTP requests sent from the frontend part. Then it resolves those requests and sends back appropriate responses to the frontend part. The requests include the data which tells the API what it should do. That could be something like creating and inserting some new data into the database or maybe the frontend part needs some data from it to show it to the end-user.

So basically, the frontend is what users see on the screen. It can be some eCommerce shop, a website, or any web application. The user can interact with the content – browsing, adding, removing, etc. And that content the user is interacting with is data supplied from the database by RESTful API on the backend part. It manages the user request for a particular resource.

One of the commonly used libraries for sending HTTP requests to the backend is Axios.
It’s a Promise-based (which means it can work asynchronously), HTTP client, for the browser and node.js. So, it can be used on both frontend and backend parts.
The HTTP methods that are mostly used are the GET method (used to request data), POST method (used to send data to a server to create or update a resource), or DELETE method (used for deleting the resource).

An example of using the Axios library:

const axios = require('axios');

// Make a request for a book with a given ID
axios.get('/book?id=225883')
  .then(function (response) {
    // success handling
    console.log(response);
  })
  .catch(function (error) {
    // error handling
    console.log(error);
  })
  .then(function () {
    // always gets executed
  });

With this approach, you can separate frontend and backend parts which has many benefits. You can create both parts using different technologies, easily update/refactor code for only one of the parts and keep it simpler that way. You can even host these parts on different servers.

Conclusion

This is the way things are commonly done today when it comes to connecting these two software parts. But you should always ask yourself a question: “Is this the right solution for my project?”. In the end, what matters the most is good communication and understanding between colleagues.

For more information on how to do things on the backend, you can check our blog post on How to set up API endpoint for a simple project in Node.js.

If you are more into the frontend and you like Vue.js, you can check our blog post on Top 5 VueJs tips for developers. 🙂