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.

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
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
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