Django and React in Modern Web Apps

1.

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

2.

Who is Rivo? Rivo Laks

3.

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

4.

for ~6 yrs CTO of Thorgate

5.

for ~6 yrs CTO of Thorgate Thorgate is Estonian web agency / VC

6.

for ~6 yrs CTO of Thorgate Thorgate is Estonian web agency / VC Mostly web-based projects, using Django & React

7.

Motivation Django is very good choice for backend dev

8.

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

9.

frontend though, Javascript cannot be ignored Python is great for glueing together various technologies

10.

frontend though, Javascript cannot be ignored Python is great for glueing together various technologies Let's combine the two!

11.

Decisions

12.

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

13.

for dynamic frontend Frontend should use APIs to access data

14.

for dynamic frontend Frontend should use APIs to access data Use Docker for easy deploys

15.

React JS library for building user interfaces

16.

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

17.

open-sourced in March 2015 Not a full framework, easy to get started with

18.

open-sourced in March 2015 Not a full framework, easy to get started with Brings declarative thinking to JS

19.

Single Page Apps Should we create an SPA?

20.

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

21.

steep learning curve React makes it easy to start incrementally

22.

steep learning curve React makes it easy to start incrementally Can move to full SPA later (or immediately), if desired

23.

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

24.

Tooling

25.

Tooling Django REST framework for APIs

26.

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

27.

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

28.

Let's Get Started!

29.

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

30.

Add a container HTML element to your page: {% block
content %} <div id="container"> <div class="loading-indicator"> Loading... </div> </div> {% endblock %}

31.

Add a container HTML element to your page: {% block
content %} <div id="container"> <div class="loading-indicator"> Loading... </div> </div> {% endblock %} {% block scripts %}{{ block.super }} <script> myapp.init(); </script> {% endblock %}

32.

De ne the JS init() function to render the React
component into container function init() { const container = document.getElementById('container'); ReactDOM.render(<HelloMessage name="PyCon LT" />, container); } HelloMessage is a React component.

33.

Simple React components function HelloMessage(props) { return ( <div className="message">
Hello {props.name}! </div> ); } // init() function ReactDOM.render(<HelloMessage name="PyCon LT" />, container);

34.

Stateful React components For more complex components

35.

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

36.

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

37.

class MyApp extends React.Component { constructor(props) { super(props); this.state =
{ counter: 1, }; } increaseCount() { this.setState({counter: this.state.counter + 1}); } render() { return ( <div className="app"> <HelloMessage name={this.prop.name} /> Counter: {this.state.counter} <button onClick={() => this.increaseCount()}>Increase</button> </div> ); } }

38.

What next? Use React Devtools in browser

39.

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

40.

managing data Look at React Router and SPAs

41.

managing data Look at React Router and SPAs Don't do it all at once

42.

Getting data from Django to JS

43.

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

44.

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

45.

REST framework. Integrates with Django's models and authentication

46.

REST framework. Integrates with Django's models and authentication Built-in functionality includes paging, throttling, validation, etc

47.

REST framework. Integrates with Django's models and authentication Built-in functionality includes paging, throttling, validation, etc Browsable APIs

48.

None

49.

Javascript side fetch() is the standard approach

50.

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

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

52.

Environments & Deploys

53.

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

54.

React sources We want nal JS that browsers can read

55.

React sources We want nal JS that browsers can read Webpack – JS module bundler

56.

Webpack in a Nutshell

57.

Webpack Advantages Bundles everything into one (or few) les

58.

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

59.

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

60.

Docker We use Docker in dev & production

61.

Docker We use Docker in dev & production Reproducability and
consistency

62.

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

63.

Docker 101

64.

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

65.

run -it python:3.6.1 Volumes for persisting data: docker run -it -v $PWD:/app python:3.6.1

66.

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

67.

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

68.

and running multi-container Docker applications” de ne & control multiple containers at once

69.

and running multi-container Docker applications” de ne & control multiple containers at once easier networking among single app's services

70.

None

71.

How Docker helps us Consistent & easy envs

72.

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

73.

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

74.

Docker Pitfalls Tooling can be problematic

75.

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

76.

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

77.

Conclusions Don't let Javascript scare you, embrace it

78.

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

79.

start using React incrementally Use Django REST framework for APIs

80.

start using React incrementally Use Django REST framework for APIs Docker helps with env setup

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

Django and React in Modern Web Apps

Django and React in Modern Web Apps

Want more?

Transcript