Django and React in Modern Web Apps

Presented at PyCon LT 2017.

Looks at why and how to combine Django and React, making your user interface more modular and easier to work with. Also briefly covers creating APIs, and running everything in Docker.

Transcript

1. Django and React
   in Modern Web Apps
   Rivo Laks ⋅ Thorgate
   2017-05-13
   

   View Slide

2. Who is Rivo?
   Rivo Laks
   

   View Slide

3. Who is Rivo?
   Rivo Laks
   Python for ~8 yrs, Django for ~6 yrs
   

   View Slide

4. Who is Rivo?
   Rivo Laks
   Python for ~8 yrs, Django for ~6 yrs
   CTO of Thorgate
   

   View Slide

5. Who is Rivo?
   Rivo Laks
   Python for ~8 yrs, Django for ~6 yrs
   CTO of Thorgate
   Thorgate is Estonian web agency / VC
   

   View Slide

6. Who is Rivo?
   Rivo Laks
   Python for ~8 yrs, Django for ~6 yrs
   CTO of Thorgate
   Thorgate is Estonian web agency / VC
   Mostly web-based projects, using Django & React
   

   View Slide

7. Motivation
   Django is very good choice for backend dev
   

   View Slide

8. Motivation
   Django is very good choice for backend dev
   For frontend though, Javascript cannot be ignored
   

   View Slide

9. Motivation
   Django is very good choice for backend dev
   For frontend though, Javascript cannot be ignored
   Python is great for glueing together various
   technologies
   

   View Slide

10. Motivation
    Django is very good choice for backend dev
    For frontend though, Javascript cannot be ignored
    Python is great for glueing together various
    technologies
    Let's combine the two!
    

    View Slide

11. Decisions
    

    View Slide

12. Goals
    Use Django for backend
    Use modern JS & React for dynamic frontend
    

    View Slide

13. Goals
    Use Django for backend
    Use modern JS & React for dynamic frontend
    Frontend should use APIs to access data
    

    View Slide

14. Goals
    Use Django for backend
    Use modern JS & React for dynamic frontend
    Frontend should use APIs to access data
    Use Docker for easy deploys
    

    View Slide

15. React
    JS library for building user interfaces
    

    View Slide

16. React
    JS library for building user interfaces
    Built by Facebook, open-sourced in March 2015
    

    View Slide

17. React
    JS library for building user interfaces
    Built by Facebook, open-sourced in March 2015
    Not a full framework, easy to get started with
    

    View Slide

18. React
    JS library for building user interfaces
    Built by Facebook, open-sourced in March 2015
    Not a full framework, easy to get started with
    Brings declarative thinking to JS
    

    View Slide

19. Single Page Apps
    Should we create an SPA?
    

    View Slide

20. Single Page Apps
    Should we create an SPA?
    SPAs have steep learning curve
    

    View Slide

21. Single Page Apps
    Should we create an SPA?
    SPAs have steep learning curve
    React makes it easy to start incrementally
    

    View Slide

22. Single Page Apps
    Should we create an SPA?
    SPAs have steep learning curve
    React makes it easy to start incrementally
    Can move to full SPA later (or immediately), if desired
    

    View Slide

23. Single Page Apps
    Should we create an SPA?
    SPAs have steep learning curve
    React makes it easy to start incrementally
    Can move to full SPA later (or immediately), if desired
    Use your Django expertise, add React where needed
    

    View Slide

24. Tooling
    

    View Slide

25. Tooling
    Django REST framework for APIs
    

    View Slide

26. Tooling
    Django REST framework for APIs
    Webpack for bundling JS/CSS
    

    View Slide

27. Tooling
    Django REST framework for APIs
    Webpack for bundling JS/CSS
    Docker for easy & consistent environments
    

    View Slide

28. Let's Get Started!
    

    View Slide

29. Existing Django View + Template
    # myapp/views.py
    class MyAppView(TemplateView):
    template_name = 'myapp.html'
    
    {% extends "base.html" %}
    {% block content %}
    Hello!
    {% endblock %}
    

    View Slide

30. Add a container HTML element to your page:
    {% block content %}
    
    
    Loading...
    
    
    {% endblock %}
    

    View Slide

31. Add a container HTML element to your page:
    {% block content %}
    
    
    Loading...
    
    
    {% endblock %}
    {% block scripts %}{{ block.super }}
    <br/>myapp.init();<br/>
    {% endblock %}
    

    View Slide

32. De ne the JS init() function to render the React
    component into container
    function init() {
    const container = document.getElementById('container');
    ReactDOM.render(, container);
    }
    HelloMessage is a React component.
    

    View Slide

33. Simple React components
    function HelloMessage(props) {
    return (
    
    Hello {props.name}!
    
    );
    }
    // init() function
    ReactDOM.render(, container);
    

    View Slide

34. Stateful React components
    For more complex components
    

    View Slide

35. Stateful React components
    For more complex components
    Add local state, de ne event handlers, etc
    

    View Slide

36. Stateful React components
    For more complex components
    Add local state, de ne event handlers, etc
    There will be some code duplication
    

    View Slide

37. class MyApp extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    counter: 1,
    };
    }
    increaseCount() {
    this.setState({counter: this.state.counter + 1});
    }
    render() {
    return (
    
    
    Counter: {this.state.counter}
    this.increaseCount()}>Increase
    
    );
    }
    }
    

    View Slide

38. What next?
    Use React Devtools in browser
    

    View Slide

39. What next?
    Use React Devtools in browser
    Add Redux for managing data
    

    View Slide

40. What next?
    Use React Devtools in browser
    Add Redux for managing data
    Look at React Router and SPAs
    

    View Slide

41. What next?
    Use React Devtools in browser
    Add Redux for managing data
    Look at React Router and SPAs
    Don't do it all at once
    

    View Slide

42. Getting data from
    Django to JS
    

    View Slide

43. Initial data can be passed in Django template, as JSON:
    <br/>var MYAPP_DATA = {<br/>user: {<br/>email: "{{ request.user.email|escapejs }}",<br/>name: "{{ request.user.name|escapejs }}",<br/>},<br/>// 'items' is JSON-serialized data<br/>items: {{ items|safe }},<br/>};<br/>
    function init() {
    const container = document.getElementById('container');
    ReactDOM.render(, container);
    }
    

    View Slide

44. Using APIs
    For loading interactive data, create APIs with Django
    REST framework.
    

    View Slide

45. Using APIs
    For loading interactive data, create APIs with Django
    REST framework.
    Integrates with Django's models and authentication
    

    View Slide

46. Using APIs
    For loading interactive data, create APIs with Django
    REST framework.
    Integrates with Django's models and authentication
    Built-in functionality includes paging, throttling,
    validation, etc
    

    View Slide

47. Using APIs
    For loading interactive data, create APIs with Django
    REST framework.
    Integrates with Django's models and authentication
    Built-in functionality includes paging, throttling,
    validation, etc
    Browsable APIs
    

    View Slide

48. View Slide

49. Javascript side
    fetch() is the standard approach
    

    View Slide

50. Javascript side
    fetch() is the standard approach
    async / await help keep your code clean
    

    View Slide

51. Javascript side
    fetch() is the standard approach
    async / await help keep your code clean
    class MyApp extends React.Component {
    async loadData() {
    const response = await fetch('/api/data/', {credentials: 'include'});
    const data = await response.json();
    this.setState(data);
    }
    onRefresh() {
    this.loadData();
    }
    

    View Slide

52. Environments &
    Deploys
    

    View Slide

53. Bundling JS & CSS with Webpack
    We have Javascript / React sources
    

    View Slide

54. Bundling JS & CSS with Webpack
    We have Javascript / React sources
    We want nal JS that browsers can read
    

    View Slide

55. Bundling JS & CSS with Webpack
    We have Javascript / React sources
    We want nal JS that browsers can read
    Webpack – JS module bundler
    

    View Slide

56. Webpack in a Nutshell
    

    View Slide

57. Webpack Advantages
    Bundles everything into one (or few) les
    

    View Slide

58. Webpack Advantages
    Bundles everything into one (or few) les
    Mini es the bundles
    

    View Slide

59. Webpack Advantages
    Bundles everything into one (or few) les
    Mini es the bundles
    You can use ES2015, Sass, etc
    

    View Slide

60. Docker
    We use Docker in dev & production
    

    View Slide

61. Docker
    We use Docker in dev & production
    Reproducability and consistency
    

    View Slide

62. Docker
    We use Docker in dev & production
    Reproducability and consistency
    Makes dev env easy to setup
    

    View Slide

63. Docker 101
    

    View Slide

64. Docker 101
    Easily run speci c version of Python:
    docker run -it python:3.6.1
    

    View Slide

65. Docker 101
    Easily run speci c version of Python:
    docker run -it python:3.6.1
    Volumes for persisting data:
    docker run -it -v $PWD:/app python:3.6.1
    

    View Slide

66. Docker 101
    Easily run speci c version of Python:
    docker run -it python:3.6.1
    Volumes for persisting data:
    docker run -it -v $PWD:/app python:3.6.1
    Run Jupyter SciPy notebook:
    docker run -p 8888:8888 -v $PWD:/home/jovyan/work jupyter/scipy-notebook
    

    View Slide

67. Docker Compose
    Docker Compose is “a tool for de ning and running
    multi-container Docker applications”
    

    View Slide

68. Docker Compose
    Docker Compose is “a tool for de ning and running
    multi-container Docker applications”
    de ne & control multiple containers at once
    

    View Slide

69. Docker Compose
    Docker Compose is “a tool for de ning and running
    multi-container Docker applications”
    de ne & control multiple containers at once
    easier networking among single app's services
    

    View Slide

70. View Slide

71. How Docker helps us
    Consistent & easy envs
    

    View Slide

72. How Docker helps us
    Consistent & easy envs
    Setup dev env with make setup
    

    View Slide

73. How Docker helps us
    Consistent & easy envs
    Setup dev env with make setup
    Much easier to add dependent services
    

    View Slide

74. Docker Pitfalls
    Tooling can be problematic
    

    View Slide

75. Docker Pitfalls
    Tooling can be problematic
    Don't leave your ports exposed
    

    View Slide

76. Docker Pitfalls
    Tooling can be problematic
    Don't leave your ports exposed
    There will be dragons
    

    View Slide

77. Conclusions
    Don't let Javascript scare you, embrace it
    

    View Slide

78. Conclusions
    Don't let Javascript scare you, embrace it
    You can start using React incrementally
    

    View Slide

79. Conclusions
    Don't let Javascript scare you, embrace it
    You can start using React incrementally
    Use Django REST framework for APIs
    

    View Slide

80. Conclusions
    Don't let Javascript scare you, embrace it
    You can start using React incrementally
    Use Django REST framework for APIs
    Docker helps with env setup
    

    View Slide

81. Thanks!
    Rivo Laks ⋅ @rivolaks ⋅ rivolaks.com
    CTO at Thorgate ⋅ thorgate.eu
    Have a look at our Django project template:
    https://github.com/thorgate/django-project-template
    

    View Slide