Django and React in Modern Web Apps

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Who is Rivo? Rivo Laks

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Motivation Django is very good choice for backend dev

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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!

Slide 11

Slide 11 text

Decisions

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

React JS library for building user interfaces

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Single Page Apps Should we create an SPA?

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Tooling

Slide 25

Slide 25 text

Tooling Django REST framework for APIs

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Let's Get Started!

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Add a container HTML element to your page: {% block content %}

{% endblock %}

Slide 31

Slide 31 text

Add a container HTML element to your page: {% block content %}

{% endblock %} {% block scripts %}{{ block.super }} myapp.init(); {% endblock %}

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

Simple React components function HelloMessage(props) { return (

Hello {props.name}!

); } // init() function ReactDOM.render(, container);

Slide 34

Slide 34 text

Stateful React components For more complex components

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

); } }

Slide 38

Slide 38 text

What next? Use React Devtools in browser

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Getting data from Django to JS

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Javascript side fetch() is the standard approach

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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(); }

Slide 52

Slide 52 text

Environments & Deploys

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Webpack in a Nutshell

Slide 57

Slide 57 text

Webpack Advantages Bundles everything into one (or few) les

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Docker We use Docker in dev & production

Slide 61

Slide 61 text

Docker We use Docker in dev & production Reproducability and consistency

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Docker 101

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

How Docker helps us Consistent & easy envs

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Docker Pitfalls Tooling can be problematic

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Conclusions Don't let Javascript scare you, embrace it

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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