Confident Asset Deployments with Webpack & Django

Presented at Djangocon US 2016 on Tuesday, July 19th 2016.

Transcript

1. CONFIDENT ASSET DEPLOYMENTS WITH WEBPACK & DJANGO SCOTT BURNS (@SCOTTSBURNS) DJANGOCON US 2016 #CONFIDENT-DEPLOYS
2. SHHH, I HAVE A SECRET @scottsburns Confident Asset Deployments
3. OWAIS LONE GITHUB.COM/OWAIS
4. ̣ PHILOSOPHY ̣ SPECIFICS ̣ PHILOSOPHY @scottsburns Confident Asset Deployments
5. CONFIDENT ASSET DEPLOYMENTS? @scottsburns Confident Asset Deployments
6. DEPLOYMENTS Confident Asset Deployments @scottsburns
7. ̣CHANGES ̣FEATURES ̣FIXES Confident Asset Deployments @scottsburns
8. ASSET @scottsburns Confident Asset Deployments
9. ̣JAVASCRIPT ̣CSS ̣IMAGES @scottsburns Confident Asset Deployments
10. CONFIDENT @scottsburns Confident Asset Deployments
11. ̣EASY TO BEGIN ̣REVERSIBLE ̣FAST @scottsburns Confident Asset Deployments
12. ̣AUTOMATED ̣FEW 3RD PARTIES ̣TESTED @scottsburns Confident Asset Deployments
13. WHY NOW? Confident Asset Deployments @scottsburns
14. TOOLCHAINS HAVE IMPROVED Confident Asset Deployments @scottsburns
15. COMMUNITIES MOVE AT DIFFERENT SPEEDS Confident Asset Deployments @scottsburns
16. BUILD BRIDGES, NOT WRAPPERS Confident Asset Deployments @scottsburns
17. CODE PLEASE Confident Asset Deployments @scottsburns
18. WEBPACK? Confident Asset Deployments @scottsburns
19. Confident Asset Deployments @scottsburns https://webpack.github.io/ WEBPACK
20. $ npm install -s -g \ webpack \ webpack-bundle-tracker Confident Asset Deployments @scottsburns INSTALLATION
21. WEBPACK.CONFIG.JS Confident 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", },...
22. WEBPACK.CONFIG.JS Confident Asset Deployments @scottsburns ... plugins: [ new BundleTracker( {filename: ‘./webpack-stats.json’}), ], module: { loaders: […] // not enough time :( }, }
23. $ webpack —-config \ webpack.config.js Confident Asset Deployments @scottsburns BUILD THE BUNDLE
24. { “status":"done", “chunks”: { “app”: [{ “name": "app-1234567890.js", “path”: “/app/static/bundles/ app-1234567890.js”} ] } } Confident Asset Deployments @scottsburns WEBPACK-STATS.JSON
25. Confident Asset Deployments @scottsburns
26. app/ ├─ manage.py ├─ webpack.config.js ├─ webpack-stats.json ├─ static │ ├─ index.js │ └─ bundles/ # git ignore │ └─ app-1234567890.js └─ app/ └─ urls.py, app.wsgi, etc… Confident Asset Deployments @scottsburns STRUCTURE
27. <head> ... </head> <body> <div id="root">...</div> <script src=“{% static ‘bundles/app-1234567890.js’ %}” type=“text/javascript” charset=“utf-8”> </body> Confident Asset Deployments @scottsburns INDEX.HTML
28. $ pip install \ django-webpack-loader Confident Asset Deployments @scottsburns
29. ... STATICFILES_DIRS = ( ‘static’, ) ... Confident Asset Deployments @scottsburns SETTINGS.PY
30. ... WEBPACK_LOADER = { 'BUNDLE_DIR_NAME': 'bundles/', ‘STATS_FILE': 'webpack-stats.json', } ... Confident Asset Deployments @scottsburns SETTINGS.PY
31. ... INSTALLED_APPS = ( ... ‘webpack_loader', ... ) ... Confident Asset Deployments @scottsburns SETTINGS.PY
32. {% load render_bundle from webpack_loader %} <head> ... </head> <body> <div id="root">...</div> {% render_bundle ‘main' %} </body> Confident Asset Deployments @scottsburns INDEX.HTML
33. <head> ... </head> <body> <div id="root">...</div> <script src="/static/bundles/app-1234567890.js" type="text/javascript" charset=“utf-8"> </body> Confident Asset Deployments @scottsburns (RENDERED) INDEX.HTML
34. Confident Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-1234567890.JS @scottsburns
35. Confident Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-0987654321.JS @scottsburns
36. DON’T SERVE ASSETS FROM DJANGO Confident Asset Deployments @scottsburns
37. WHY NOT (PURE) STATICFILES? Confident Asset Deployments @scottsburns
38. ̣PRODUCTION ENV ̣SLOW ̣POST-PROCESSORS @scottsburns Confident Asset Deployments
39. SEPARATE THE CONCERNS Confident Asset Deployments @scottsburns
40. FRONT-END DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns
41. (DEV)OPS WILL ❤ YOU Confident Asset Deployments @scottsburns
42. NEW DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns
43. ̣BUILD ̣DEPLOY ̣REPEAT @scottsburns Confident Asset Deployments
44. THANK YOU ❤ @scottsburns Confident Asset Deployments