Playing Nice with Django and React

E2db7057f93864d3676012a660195d46?s=47 Jacob Cook
November 19, 2017

Playing Nice with Django and React

For a web developer that's used to using Python frameworks like Django or Flask, getting into the world of frontend web development using modern JavaScript isn't always easy. For instance, there is no immediate solution to making new single-page application (SPA) frameworks work well with Django's rendering architecture, especially if you just want to make something simple. This talk will explore the differences between how Django renders web pages and how these JS frameworks expect you to do it, and how to marry the two approaches without reinventing the wheel (or using a heavy library that makes customization difficult). We will look in detail at a few of these concepts, then walk through a fun demo that shows just how efficient and developer-friendly this pattern can be.

This talk is primarily aimed at beginners to frontend web development who may have been around the block with Django once or twice but are not fully on board with the concepts behind the modern JavaScript stack or with React. Those who come from the world of frontend web development and who are new to Django or Flask may also find this talk interesting.

E2db7057f93864d3676012a660195d46?s=128

Jacob Cook

November 19, 2017
Tweet

Transcript

  1. Playing Nice with Django and React by Jacob Cook Presented

    at PyCon Canada 2017
  2. Who am I? @peakwinter #PyConCA2017 Jacob Cook Software Engineer, Savoir-faire

    Linux
  3. @peakwinter #PyConCA2017 * not an literal translation Who am I?

  4. • Why? • Concepts • Challenges • Solutions @peakwinter #PyConCA2017

  5. Why? @peakwinter #PyConCA2017

  6. @peakwinter #PyConCA2017

  7. None
  8. @peakwinter #PyConCA2017

  9. fullstack n. 1 computing (usually as modifier) The entirety of

    a computer system or application, comprising both the front end and the back end. @peakwinter #PyConCA2017 Source: Oxford Living Dictionary
  10. fullstack n. 2 “We want to hire you to work

    on all parts of the stack because we cannot afford specialized engineers for the different technical stack pieces and feel it's better to start the stack being sub-par instead of having expertise in each stack layer.” Source: SVD @peakwinter #PyConCA2017
  11. Google searches for “fullstack” 2013-2017 @peakwinter #PyConCA2017

  12. @peakwinter #PyConCA2017 Components JSX Bundlers ??? Reducers State Lifecycle Transpiling

    Props
  13. JavaScript is important @peakwinter #PyConCA2017 (whether we think it should

    be or not!)
  14. JavaScript is cool! @peakwinter #PyConCA2017 (ES6 FTW!)

  15. Concepts @peakwinter #PyConCA2017

  16. @peakwinter #PyConCA2017

  17. @peakwinter #PyConCA2017

  18. @peakwinter #PyConCA2017 Props, states, components

  19. @peakwinter #PyConCA2017

  20. Model-Template-View The Django Approach @peakwinter #PyConCA2017

  21. @peakwinter #PyConCA2017 Model View Template 1 2 3 4 5

    6 (DRF serializer, etc)
  22. Single Page App The React Approach* @peakwinter #PyConCA2017

  23. @peakwinter #PyConCA2017 Model View Template AJAX 1 2 3 6

    5 4
  24. Challenges @peakwinter #PyConCA2017

  25. Scooby Doo and the Templating Troubles @peakwinter #PyConCA2017 * not

    a real episode
  26. None
  27. @peakwinter #PyConCA2017

  28. Solutions @peakwinter #PyConCA2017

  29. 80% - 20% @peakwinter #PyConCA2017

  30. Just Enough JavaScript™ @peakwinter #PyConCA2017 * not a real trademark

  31. Just Enough JavaScript™ 1. Pack it up, pack it in,

    let me begin 2. Render data as hidden JSON 3. For every page, a component 4. ??? 5. Profit @peakwinter #PyConCA2017
  32. @peakwinter #PyConCA2017 Model View Template 1 2 3 4 5

    6 8 7
  33. @peakwinter #PyConCA2017 mysite/ ├── components/ │ ├── add.jsx │ └──

    list.jsx ├── assets/ │ ├── bundles/ │ └── index.js ├── templates/ │ ├── add.html │ └── list.html ├── models.py ├── views.py └── webpack.config.js
  34. @peakwinter #PyConCA2017 Webpack config: * Entry: ./assets/index * Output: ./assets/bundles/

    * Module loaders: test for *.jsx, use babel-loader ./node_modules/.bin/webpack \ --config webpack.config.js \ --watch
  35. @peakwinter #PyConCA2017 index.html https://github.com/ezhome/django-webpack-loader

  36. @peakwinter #PyConCA2017 views.py

  37. @peakwinter #PyConCA2017 index.js

  38. @peakwinter #PyConCA2017 add.jsx

  39. @peakwinter #PyConCA2017 add.jsx

  40. @peakwinter #PyConCA2017 add.jsx

  41. @peakwinter #PyConCA2017

  42. @peakwinter #PyConCA2017

  43. Thank you! @peakwinter #PyConCA2017