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.2k
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
42
An Introduction to Channels
sburns
0
240
Empathy-as-a-Service
sburns
0
98
Improving Research With Advanced REDCap Interfaces
sburns
1
650
ROSIE: Automated Image Processing Infrastructure
sburns
0
140
Other Decks in Technology
See All in Technology
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
580
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
microCMSではじめるAIライティング
himaratsu
0
150
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Raft: Consensus for Rubyists
vanstee
140
7k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
How GitHub (no longer) Works
holman
314
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
4 Signs Your Business is Dying
shpigford
184
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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