How to Combine Frontend and Backend (For Python Web Developers)

Table of Contents

Introduction

For many Python web developers, how to make frontend and backend work together is a confusing problem.

So I write this blog post to talk about some solutions

After reading, you will know the six solutions to combine the frontend and backend, and the pros and cons.

Solution 1: SPA (single-page application)

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.

Workflow

SPA Workflow

  1. The frontend app is a static website which is served by the web server such as Nginx.
  2. When a user visits the website, index.html is served and browser download JS, CSS files.
  3. The browser will then use the JS to init React / Vue app and build the DOM tree.
  4. And then React / Vue app will interact with API backend through REST API or GraphQL protocol.

Frontend

To create a decoupled frontend app:

  1. We can use create-react-app to create a React application.
  2. We can use vue-cli to create a Vue application.

Backend

The backend will work as API server:

Django

For Django dev, we might also need the below packages.

  1. Django REST framework will help us build REST API.
  2. dj-rest-auth or djoser for auth API support.
  3. django-cors-headers will help solve Cross-Origin Resource Sharing (CORS) issue.
  4. graphene-django Integrate GraphQL into your Django project.
  5. cookiecutter-django-rest

Flask

For Flask dev, we might also need the packages below.

  1. flask-restful
  2. flask-api
  3. flask-graphql
  4. flask-cors

FastAPI

  1. CORSMiddleware

Pros and Cons

Pros:

  1. Friendly to both frontend and backend developers, and there are many learning resources online about this architecture.
  2. The decoupled structure is clean and easy to scale.

Cons:

  1. Can not benefit from some awesome Django, Flask features (templates, form, built-auth)
  2. The web application is not SEO friendly and is a little slow on first page load.

Solution 2: SSR (server-side-rendering)

Background

Let's first check why SSR is introduced and what problem it solves.

If you create web app with the above SPA pattern, check the HTML source code, you will see something like this:

<html lang="en">
<head>
  <link href="/static/css/main.caf06914.chunk.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
   <script src="/static/js/2.20b865e0.chunk.js"></script>
   <script src="/static/js/main.ed646a45.chunk.js"></script>
</body>
</html>

We notice some problems here:

  1. The above <div id="root"></div> is empty, the search engine can not understand what the page is about without running the JS.
  2. The browser needs to run some JS code to build the DOM tree (might need to send some extra requests), which makes the web page a little slow to load.

Workflow

Server-side rendering (SSR) is a popular technique for rendering a client-side single page application (SPA) on the server and then sending a fully rendered page to the client. This allows for dynamic components to be served as static HTML markup.

SSR Workflow

Notes:

  1. When a user visits the website, Node web server try to render component to HTML on the server side.
  2. The Node web server send request to the api backend to fetch data, and render the components to build HTML.
  3. After that, the HTML will be returned to the browser.
  4. The browser will run JS and attach the event handlers to the existing DOM elements. This also called rehydration

Frontend

  1. We can use create-next-app to create a Next.js application (React).
  2. We can use create-nuxt-app to create Nuxt.js application (Vue).

Backend

The backend solution is nearly the same as the Solution 1: SPA (single-page application).

Pros and Cons

Pros:

  1. Good performance (First Paint (FP) and First Contentful Paint (FCP))
  2. The web app supports SEO very well.

Cons:

  1. Can not benefit from some awesome Django, Flask features (templates, form, built-auth)

Resources

Solution 3: SSG (Jamstack)

Jamstack, stands for Javascript, API and Markup (generated by a static site generator)

In the Solution 2: SSR (server-side-rendering) section, we know we need to run a Node web server to render React or Vue components to HTML on the server side, in real time.

How about this way:

  1. During the build stage, we try to render React or Vue component to static HTML (seems like static site generator)
  2. During the build stage, if needed, the Node.js app also send request to the API backend to fetch data.
  3. And then, deploy the built HTML to the CDN network.
  4. The built web app will use Javascript to talk to the backend service, to display dynamic content (comments, search results) on some pages

Jamstack Workflow

Web app built with Jamstack is very fast (because of CDN, and the prebuilt HTML) and is very good option for many CMS application.

For example, many Wordpress applications now ues Jamstack since it is more fast and secure.

Frontend

  1. Gatsby
  2. Next.js
  3. Nuxt.js

It is recommended to deploy the frontend app to

  1. Netlify
  2. Vercel

Serverless Functions

If you do not understand what is Serverless Functions, you can learn Netlify Functions

Backend

The backend solution is nearly the same as the Solution 1: SPA (single-page application).

Pros and Cons

Pros:

  1. Fast, Secure

Cons:

  1. Generating takes time, you need to build each time you update the content.
  2. Not dynamic-friendly, you need to write some extra code to handle dynamic content.

Resources

  1. jamstack homepage

Solution 4: Hybrid

In this solution, we have tightly coupled frontend and backend

Diagram

Build Workflow

  1. The frontend app compile and bundle frontend assets.
  2. After it finish building, the built assets are placed at STATIC directory.
  3. Django or Flask will treat the built assets as normal assets and do not care where they come from.
  4. Django or Flask will add the JS and CSS link to the template to make sure browser can download them.

Workflow

Classic Workflow

Notes:

  1. When user visits the website, web server process the request, render HTML using Django template or Jinja.
  2. The browser download CSS, JS and other assets.
  3. The browser run Javascript to sprinkle the server-rendered HTML.

Frontend

  1. We can use python-webpack-boilerplate to jump start frontend project bundled by Webpack.
  2. As for the Javascript framework, there are many options, and I highly recommend you to read Lightweight Javascript Framework Review (For Django Developers)

importmap

For people who do not like frontend bundle solution such as Webpack, you can check import-maps

Now the latest Rails framework already use this tech https://github.com/rails/importmap-rails

And Django package is also available on https://github.com/dropseed/django-importmap

Pros and Cons

Pros:

  1. We can still use Django / Flask template syntax and HTML as we are familiar with
  2. We can write JS and SCSS in modern syntax, the code is more readable and easy to maintain.
  3. We can import 3-party frontend project without touching the template, but use npm install command instead.
  4. Code linter can help check JS and CSS code style.

Cons:

  1. There are not many learning resources about this solution.

Solution 5: Launch React or Vue in template

Use case

Let's say you are building a Django project using Solution 4: Hybrid, for some reason, you need to add a complex dashboard page to the project.

React or Vue seems good option here, however, you do not want to move the whole project to SPA, then you can choose this solution.

You can use React or Vue to render the specific pages or specific components in your python web project.

Workflow

Launch React in template

Notes:

  1. When user visits the website, Python web server processes the request, render HTML.
  2. The browser download JS, run it to init React or Vue app

Frontend

  1. We can create django-react project from django-react-boilerplate
  2. Or we can add React/Vue to the Webpack boilerplate (python-webpack-boilerplate), and then load the frontend app in Django template using the custom template tag.

Pros and Cons

Pros:

  1. We can develop in flexible way, for example, we can use Django template and lightweight Javascript framework to build most features.
  2. And we only use React or Vue.js to build some complex components.

Cons:

  1. The component rendered by React or Vue is not SEO friendly (same problem as SPA)

Solution 6: SSR service

This solution is to solve the SEO problem of the Solution 5: Launch React or Vue in template

Workflow

Use SSR Service

Notes:

  1. When user visits the website, Python web server process the request
  2. If the template contains React / Vue component, send request to the Node.js server to get the HTML of the React / Vue component
  3. After that, the final HTML will be returned to the browser.
  4. The browser will run JS and attach the event handlers to the existing DOM elements. This also called rehydration

Packages

  1. django-react-templatetags
  2. python-react
  3. hypernova will run as a service, which generate HTML of the React / Vue component (server side rendering)

Pros and Cons

Pros:

  1. It is very flexible and SEO-friendly, you can use this solution to migrate your website to React, Vue

Cons:

  1. This architecture is not very popular, and there are not many learning resources about it.

Resources

Conclusion

I hope you have learned something from this blog post.

If you have any questions, please feel free to contact me.

Launch Products Faster with Django

Unlock the power of Django combined with Hotwire through SaaS Hammer. Supercharge productivity, tap into Python's rich ecosystem, and focus on perfecting your product!

Michael Yin

Michael Yin

Michael is a Full Stack Developer who loves writing code, tutorials about Django, and modern frontend techs.

He has published some tech course on testdriven.io and ebooks on leanpub.

© 2024 SaaS Hammer
Cookies Privacy