Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Confident Asset Deployments with Webpack & Django
Search
Scott Burns
July 19, 2016
Technology
0
1.3k
Confident Asset Deployments with Webpack & Django
Presented at Djangocon US 2016 on Tuesday, July 19th 2016.
Scott Burns
July 19, 2016
Tweet
Share
More Decks by Scott Burns
See All by Scott Burns
Learning From the Pros: Modern Data Management for Clinicians and Scientists
sburns
1
43
An Introduction to Channels
sburns
0
240
Empathy-as-a-Service
sburns
0
100
Improving Research With Advanced REDCap Interfaces
sburns
1
660
ROSIE: Automated Image Processing Infrastructure
sburns
0
150
Other Decks in Technology
See All in Technology
Practical Agentic AI in Software Engineering
uzyn
0
110
テストを軸にした生き残り術
kworkdev
PRO
0
210
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
170
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
160
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
110
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
560
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
400
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
160
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Typedesign – Prime Four
hannesfritz
42
2.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Building Adaptive Systems
keathley
43
2.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Producing Creativity
orderedlist
PRO
347
40k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
CONFIDENT ASSET DEPLOYMENTS WITH WEBPACK & DJANGO SCOTT BURNS (@SCOTTSBURNS)
DJANGOCON US 2016 #CONFIDENT-DEPLOYS
SHHH, I HAVE A SECRET @scottsburns Confident Asset Deployments
OWAIS LONE GITHUB.COM/OWAIS
̣ PHILOSOPHY ̣ SPECIFICS ̣ PHILOSOPHY @scottsburns Confident Asset Deployments
CONFIDENT ASSET DEPLOYMENTS? @scottsburns Confident Asset Deployments
DEPLOYMENTS Confident Asset Deployments @scottsburns
̣CHANGES ̣FEATURES ̣FIXES Confident Asset Deployments @scottsburns
ASSET @scottsburns Confident Asset Deployments
̣JAVASCRIPT ̣CSS ̣IMAGES @scottsburns Confident Asset Deployments
CONFIDENT @scottsburns Confident Asset Deployments
̣EASY TO BEGIN ̣REVERSIBLE ̣FAST @scottsburns Confident Asset Deployments
̣AUTOMATED ̣FEW 3RD PARTIES ̣TESTED @scottsburns Confident Asset Deployments
WHY NOW? Confident Asset Deployments @scottsburns
TOOLCHAINS HAVE IMPROVED Confident Asset Deployments @scottsburns
COMMUNITIES MOVE AT DIFFERENT SPEEDS Confident Asset Deployments @scottsburns
BUILD BRIDGES, NOT WRAPPERS Confident Asset Deployments @scottsburns
CODE PLEASE Confident Asset Deployments @scottsburns
WEBPACK? Confident Asset Deployments @scottsburns
Confident Asset Deployments @scottsburns https://webpack.github.io/ WEBPACK
$ npm install -s -g \ webpack \ webpack-bundle-tracker Confident
Asset Deployments @scottsburns INSTALLATION
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", },...
WEBPACK.CONFIG.JS Confident Asset Deployments @scottsburns ... plugins: [ new BundleTracker(
{filename: ‘./webpack-stats.json’}), ], module: { loaders: […] // not enough time :( }, }
$ webpack —-config \ webpack.config.js Confident Asset Deployments @scottsburns BUILD
THE BUNDLE
{ “status":"done", “chunks”: { “app”: [{ “name": "app-1234567890.js", “path”: “/app/static/bundles/
app-1234567890.js”} ] } } Confident Asset Deployments @scottsburns WEBPACK-STATS.JSON
Confident Asset Deployments @scottsburns
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
<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
$ pip install \ django-webpack-loader Confident Asset Deployments @scottsburns
... STATICFILES_DIRS = ( ‘static’, ) ... Confident Asset Deployments
@scottsburns SETTINGS.PY
... WEBPACK_LOADER = { 'BUNDLE_DIR_NAME': 'bundles/', ‘STATS_FILE': 'webpack-stats.json', } ...
Confident Asset Deployments @scottsburns SETTINGS.PY
... INSTALLED_APPS = ( ... ‘webpack_loader', ... ) ... Confident
Asset Deployments @scottsburns SETTINGS.PY
{% load render_bundle from webpack_loader %} <head> ... </head> <body>
<div id="root">...</div> {% render_bundle ‘main' %} </body> Confident Asset Deployments @scottsburns INDEX.HTML
<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
Confident Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-1234567890.JS @scottsburns
Confident Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-0987654321.JS @scottsburns
DON’T SERVE ASSETS FROM DJANGO Confident Asset Deployments @scottsburns
WHY NOT (PURE) STATICFILES? Confident Asset Deployments @scottsburns
̣PRODUCTION ENV ̣SLOW ̣POST-PROCESSORS @scottsburns Confident Asset Deployments
SEPARATE THE CONCERNS Confident Asset Deployments @scottsburns
FRONT-END DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns
(DEV)OPS WILL ❤ YOU Confident Asset Deployments @scottsburns
NEW DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns
̣BUILD ̣DEPLOY ̣REPEAT @scottsburns Confident Asset Deployments
THANK YOU ❤ @scottsburns Confident Asset Deployments