- The frontend app compile and bundle frontend assets
- After it finish building, the built assets can be found at
- Django or Flask will treat the built assets as normal files and do not care where they come from.
- Django or Flask will add the JS and CSS link to the template to make sure browser can download them.
- When user visit the website, Python web server process the request, render HTML from using Django template or Jinja.
- The browser download CSS, JS and other assets and render web page.
Benefits of the modern frontend app
Some people might ask:
- Why not just import some JS packages using CDN link
- Why should we import some bundle solution such as Webpack.
Webpackis the most popular bundle solution in the frontend community today, it has received 50k stars on Github.
- It has a great ecosystem, many plugins, loaders. If we search
webpackon npmjs.com, we can get 20k resulst.
- If we do not need
Vue, we can still use Webpack to help us compile
SCSSand do many other things (Many people do not know that!)
- With a proper config, Webpack can save time and let us build modern web application in quick way.
With modern frontend app, it can:
- Linting JS, SCSS code.
- Compile SCSS to CSS.
- Compile and bundle JS files.
- Watch files and auto reload web page on code change.
- We can use python-webpack-boilerplate to jump start frontend project bundled by Webpack.
- You can also check petite-vue, which is 6kb subset of Vue optimized for progressive enhancement
jQuery is not recommended any more and below notes can help if you want to migrate to vanilla JS
- Selecting elements with
- Listening for events with
- Updating CSS and styles through
- Working with classes through the
- AJAX requests with
- Triggering events with
- Creating elements with
- Updating text through the
- Adding elements to the DOM with
Please write code with
ES6+ syntax to make the JS code more readable.
If you want to load Webpack bundle file in Django or Flask:
Pros and Cons
- We can still use Django / Flask template syntax and HTML as we are familiar with
- We can write JS and SCSS in modern syntax, the code is more readable and easy to maintain.
- We can import 3-party frontend project without touching template, but use
- Code linter can help check JS and CSS code style.