Writeup of the DjangoCon Europe 2019 talk »Frontend Development for Backend Developers« by Robert Townley
Despite the fact that "Frontend development for Backend developers" might also be called "Bicycling for Fish", let's try.
How do we move a page like that to different tools (without all need – please take this as a minimal example, to lean about frontend stuff and deal with other people's scramble to add js to everything).
NPM is the frontend backage manager helping you keep track of js dependencies. You initialize it via npm init
(generating a packag.json), and afterwards you install dependencies with
npm install _____ --save-deps.
At this point you'll add your
STATICFILES_DIRS. This will make everything slow.
This now allows you to include all static files in there into your website.
There are different css preprocessors, mostly SASS and LESS (very similar) and Stylus (tab based instead of braces). All of these add functionality and nesting to CSS.
Using CSS preprocessors will make you much happier when maintaining a larger project. It allows methods, mixins, variables, proper imports, and nested CSS rules.
Reloading allows your web server to direct the page to reload when changes have been directed, which is very useful in design development.
Webpack is a build process manager and can be installed via npm. It bundles fronted assets and tracks them within a
dependency graph. It is configured via the
webpack.config.js. It runs in either development (with added deps) or
production (minified) mode.
Now you can just include the build directory to your staticfiles directory, instead of the complete node modules, and
bundle.js in your templates. This makes things smaller, easier, and less apt to break.
There is also vue.js, which does many things better in many regards.