Confident Asset Deployments with Webpack & Django

Slide 1

Slide 1 text

CONFIDENT ASSET DEPLOYMENTS WITH WEBPACK & DJANGO SCOTT BURNS (@SCOTTSBURNS) DJANGOCON US 2016 #CONFIDENT-DEPLOYS

Slide 2

Slide 2 text

SHHH, I HAVE A SECRET @scottsburns Conﬁdent Asset Deployments

Slide 3

Slide 3 text

OWAIS LONE GITHUB.COM/OWAIS

Slide 4

Slide 4 text

̣ PHILOSOPHY ̣ SPECIFICS ̣ PHILOSOPHY @scottsburns Conﬁdent Asset Deployments

Slide 5

Slide 5 text

CONFIDENT ASSET DEPLOYMENTS? @scottsburns Conﬁdent Asset Deployments

Slide 6

Slide 6 text

DEPLOYMENTS Conﬁdent Asset Deployments @scottsburns

Slide 7

Slide 7 text

̣CHANGES ̣FEATURES ̣FIXES Conﬁdent Asset Deployments @scottsburns

Slide 8

Slide 8 text

ASSET @scottsburns Conﬁdent Asset Deployments

Slide 9

Slide 9 text

̣JAVASCRIPT ̣CSS ̣IMAGES @scottsburns Conﬁdent Asset Deployments

Slide 10

Slide 10 text

CONFIDENT @scottsburns Conﬁdent Asset Deployments

Slide 11

Slide 11 text

̣EASY TO BEGIN ̣REVERSIBLE ̣FAST @scottsburns Conﬁdent Asset Deployments

Slide 12

Slide 12 text

̣AUTOMATED ̣FEW 3RD PARTIES ̣TESTED @scottsburns Conﬁdent Asset Deployments

Slide 13

Slide 13 text

WHY NOW? Conﬁdent Asset Deployments @scottsburns

Slide 14

Slide 14 text

TOOLCHAINS HAVE IMPROVED Conﬁdent Asset Deployments @scottsburns

Slide 15

Slide 15 text

COMMUNITIES MOVE AT DIFFERENT SPEEDS Conﬁdent Asset Deployments @scottsburns

Slide 16

Slide 16 text

BUILD BRIDGES, NOT WRAPPERS Conﬁdent Asset Deployments @scottsburns

Slide 17

Slide 17 text

CODE PLEASE Conﬁdent Asset Deployments @scottsburns

Slide 18

Slide 18 text

WEBPACK? Conﬁdent Asset Deployments @scottsburns

Slide 19

Slide 19 text

Conﬁdent Asset Deployments @scottsburns https://webpack.github.io/ WEBPACK

Slide 20

Slide 20 text

$ npm install -s -g \ webpack \ webpack-bundle-tracker Conﬁdent Asset Deployments @scottsburns INSTALLATION

Slide 21

Slide 21 text

WEBPACK.CONFIG.JS Conﬁdent Asset Deployments @scottsburns var path = require("path") var webpack = require('webpack') var BundleTracker = require('webpack-bundle-tracker') module.exports = { entry: { app: ’./static/index.js’ }, output: { path: path.resolve('./static/bundles/'), filename: "[name]-[hash].js", },...

Slide 22

Slide 22 text

WEBPACK.CONFIG.JS Conﬁdent Asset Deployments @scottsburns ... plugins: [ new BundleTracker( {filename: ‘./webpack-stats.json’}), ], module: { loaders: […] // not enough time :( }, }

Slide 23

Slide 23 text

$ webpack —-config \ webpack.config.js Conﬁdent Asset Deployments @scottsburns BUILD THE BUNDLE

Slide 24

Slide 24 text

{ “status":"done", “chunks”: { “app”: [{ “name": "app-1234567890.js", “path”: “/app/static/bundles/ app-1234567890.js”} ] } } Conﬁdent Asset Deployments @scottsburns WEBPACK-STATS.JSON

Slide 25

Slide 25 text

Conﬁdent Asset Deployments @scottsburns

Slide 26

Slide 26 text

app/ ├─ manage.py ├─ webpack.config.js ├─ webpack-stats.json ├─ static │ ├─ index.js │ └─ bundles/ # git ignore │ └─ app-1234567890.js └─ app/ └─ urls.py, app.wsgi, etc… Conﬁdent Asset Deployments @scottsburns STRUCTURE

Slide 27

Slide 27 text

...

</body> Conﬁdent Asset Deployments @scottsburns INDEX.HTML

Slide 28

Slide 28 text

$ pip install \ django-webpack-loader Conﬁdent Asset Deployments @scottsburns

Slide 29

Slide 29 text

... STATICFILES_DIRS = ( ‘static’, ) ... Conﬁdent Asset Deployments @scottsburns SETTINGS.PY

Slide 30

Slide 30 text

... WEBPACK_LOADER = { 'BUNDLE_DIR_NAME': 'bundles/', ‘STATS_FILE': 'webpack-stats.json', } ... Conﬁdent Asset Deployments @scottsburns SETTINGS.PY

Slide 31

Slide 31 text

... INSTALLED_APPS = ( ... ‘webpack_loader', ... ) ... Conﬁdent Asset Deployments @scottsburns SETTINGS.PY

Slide 32

Slide 32 text

{% load render_bundle from webpack_loader %} ...

...

{% render_bundle ‘main' %} Conﬁdent Asset Deployments @scottsburns INDEX.HTML

Slide 33

Slide 33 text

...

</body> Conﬁdent Asset Deployments @scottsburns (RENDERED) INDEX.HTML

Slide 34

Slide 34 text

Conﬁdent Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-1234567890.JS @scottsburns

Slide 35

Slide 35 text

Conﬁdent Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-0987654321.JS @scottsburns

Slide 36

Slide 36 text

DON’T SERVE ASSETS FROM DJANGO Conﬁdent Asset Deployments @scottsburns

Slide 37

Slide 37 text

WHY NOT (PURE) STATICFILES? Conﬁdent Asset Deployments @scottsburns

Slide 38

Slide 38 text

̣PRODUCTION ENV ̣SLOW ̣POST-PROCESSORS @scottsburns Conﬁdent Asset Deployments