Django & the frontend

Conférence donnée aux rencontres Django (Djangocong) à Rennes le samedi 21 mai 2016

1. Django et le frontend
2. Le front
3. Gestion des assets
4. Quoi faire ?
5. Simple
6. Solutions
7. Espaces ou tabulations ?
8. WEBPACK
9. WEBPACK BABEL REACT + REDUX HOT RELOADING Projet
10. Django-webpack-loader Owais Lone https:/ /github.com/owais/django-webpack-loader
11. Résultat attendu
12. Les différentes parties • serveur • configuration babel & co • intégration staticfiles
13. package.json { "devDependencies": { "babel-core": "^6.8.0", "babel-plugin-react-transform": "^2.0.2", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-react-hmre": "^1.1.1", "babel-preset-stage-0": "^6.5.0", "react-transform-hmr": "^1.0.4", "webpack": "^1.13.0", "webpack-bundle-tracker": "0.0.93", "webpack-dev-middleware": "^1.6.1", "webpack-hot-middleware": "^2.10.0" } }
14. server.js /** * Server used in development for es2015 and babel - ification */ app.use(require("webpack-dev-middleware")(compiler, { noInfo: true, publicPath: config.output.publicPath })); app.use(require("webpack-hot-middleware")(compiler));
15. .babelrc "presets": ["react", "es2015", "stage-0"], "env": { "development": { "presets": ["react-hmre"], "plugins": [ ["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }, { "transform": "react-transform-catch-errors", "imports": ["react", "redbox-react"] }] }] ] } }
16. webpack config module.exports = { devtool: 'inline-source-map', context: __dirname, entry: { rencontres: ['webpack-hot-middleware/client? path=http://localhost:3000/__webpack_hmr', './js/rencontres/ index'], }, output: { path: path.resolve('./assets/bundles/'), filename: "[name]-[hash].js", publicPath: 'http://localhost:3000/assets/bundles/', // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name }, … }
17. settings.py INSTALLED_APPS = [ 'webpack_loader', ] STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'assets'), )
18. index.js /* global __DEVELOPMENT__, __DEVTOOLS__ */ if (__DEVELOPMENT__ && __DEVTOOLS__) { module.exports = require('./index.dev') } else { module.exports = require('./index.prod') }
19. index.dev.jsx import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import configureStore from './store' import DevTools from './devtools' import App from './app' const store = configureStore() window.React = React; // enable debugger const rootElement = document.getElementById('application-react') ReactDOM.render( <Provider store={store} key="provider"> <div> <App /> <DevTools /> </div> </Provider>, rootElement )
20. index.html {% load render_bundle from webpack_loader %} <div id="application-react"></div> {% render_bundle 'rencontres' %}
22. Quoi d’autre ? • Elm ? https:/ /github.com/ moarwick/elm-webpack- starter
23. Arnaud Limbourg arnaud@ferpection.com twitter.com/arnaudlimbourg
24. Crédits photos • Fire burn and sauce pan bubble by John Lodder https:/ /flic.kr/p/9D974A • Parthenon by Michel Craig https:/ /flic.kr/p/qk6Jmi • Idea by Serge Saint https:/ /flic.kr/p/aZHja8 • La liberté menant le peuple https:/ /goo.gl/BwhFXf • Equation by Quinn Dombrowski https:/ /flic.kr/p/ 8AXJ9J
25. Crédits photos • Allez, au lit maman by Amy Krouse Rosenthal & Leuyen Pham
26. Code du projet • Le code du projet se trouve là • https:/ /github.com/arnaudlimbourg/rencontres- django-2016