DjangoCon Europe 2019: Frontend Development for Backend Developers

Writeup of the DjangoCon Europe 2019 talk »Frontend Development for Backend Developers« by Robert Townley

Robert Townley: Robert Townley is a senior web developer for Atlantic Media in Washington DC. By day he builds content management systems, email platforms, APIs, and mobile apps in Python and Javascript. By night, he does... pretty much the same thing, but usually in more comfortable clothing. He also enjoys carpentry, classical guitar, and games of the video or board variety.

Despite the fact that "Frontend development for Backend developers" might also be called "Bicycling for Fish", let's try.

Building a website that shows quotes to people, we have a very simple model, with a simple view, and a simple admin, and so on. The template looks just as simple: an image, a quote, a button, and some javascript reloading the page on click.

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

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 node_modules to STATICFILES_DIRS. This will make everything slow. This now allows you to include all static files in there into your website.

CSS Preprocessors

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

Reloading allows your web server to direct the page to reload when changes have been directed, which is very useful in design development.

Webpack

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 then include bundle.js in your templates. This makes things smaller, easier, and less apt to break.

React

React is a JavaScript library for building user interfaces, written in a HTML/JS-y hybrid syntax called JSX. It is used by defining components representing distinct portions of the webpage. Components maintain properties and a state. Together, the two inform how, where, and if the component will be rendered on the page. It utilizes a "virtual DOM" to avoid unnecessary re-renderings.

There is also vue.js, which does many things better in many regards.