Django & the frontend

Django & the frontend

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

128e6205f8f8860f7af7b4de8436ab39?s=128

arnaudlimbourg

May 21, 2016
Tweet

Transcript

  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' %}
  21. None
  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