Skip to content

Classic architecture

Diagram

Build Workflow

  1. The frontend app compile and bundle frontend assets
  2. After it finish building, the built assets can be found at STATIC directory.
  3. Django or Flask will treat the built assets as normal files 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 visit the website, Python web server process the request, render HTML from using Django template or Jinja.
  2. The browser download CSS, JS and other assets and render web page.

Benefits of the modern frontend app

Some people might ask:

  1. Why not just import some JS packages using CDN link
  2. Why should we import some bundle solution such as Webpack.

Because:

  1. Webpack is the most popular bundle solution in the frontend community today, it has received 50k stars on Github.
  2. It has a great ecosystem, many plugins, loaders. If we search webpack on npmjs.com, we can get 20k resulst.
  3. If we do not need React, Vue, we can still use Webpack to help us compile ES6, SCSS and do many other things (Many people do not know that!)
  4. With a proper config, Webpack can save time and let us build modern web application in quick way.

With modern frontend app, it can:

  1. Linting JS, SCSS code.
  2. Compile SCSS to CSS.
  3. Compile and bundle JS files.
  4. Watch files and auto reload web page on code change.

Frontend

  1. We can use python-webpack-boilerplate to jump start frontend project bundled by Webpack.
  2. Alpine.js
  3. You can also check petite-vue, which is 6kb subset of Vue optimized for progressive enhancement

jQuery

jQuery is not recommended any more and below notes can help if you want to migrate to vanilla JS

  1. Selecting elements with querySelector and querySelectorAll
  2. Listening for events with addEventListener
  3. Updating CSS and styles through style property
  4. Working with classes through the classList property
  5. AJAX requests with fetch or Axios
  6. Triggering events with dispatchEvent
  7. Creating elements with createElement
  8. Updating text through the textContent property
  9. Adding elements to the DOM with appendChild

Please write code with ES6+ syntax to make the JS code more readable.

Backend

If you want to load Webpack bundle file in Django or Flask:

  1. django-webpack-loader
  2. python-webpack-boilerplate supports both Django and Flask.

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 template, but use npm install command
  4. Code linter can help check JS and CSS code style.

Reference

  1. Definitive Guide to Django and Webpack