Modern Websites with

Django and React

Andrew Neitsch

2016-08-23
Introduction

1. Django tutorial

2. JSON APIs with Django REST framework

3. Interactivity with React.js

Conclusion

2 / 22
Disclaimer
▶ I don’t know a lot about this

3 / 22
Disclaimer
▶ I don’t know a lot about this
▶ Was starting a new project, looked into
what’s new in web development

3 / 22
Disclaimer
▶ I don’t know a lot about this
▶ Was starting a new project, looked into
what’s new in web development
▶ Worked on this presentation instead of
the project, so just a beginner right now

3 / 22
Disclaimer
▶ I don’t know a lot about this
▶ Was starting a new project, looked into
what’s new in web development
▶ Worked on this presentation instead of
the project, so just a beginner right now
If you know a better way to do this, please
give a talk on it

3 / 22
Introduction

1. Django tutorial

2. JSON APIs with Django REST framework

3. Interactivity with React.js

Conclusion

4 / 22
Django tutorial

https://docs.djangoproject.com/en/1.10/intro/tutorial01/

5 / 22
Getting it running
1. Install Python 3
2. git clone
https://github.com/andrewdotn/django-react.git
3. cd django-react
4. pip3 install --user -r requirements.txt
5. cd polls_tutorial
6. ./manage.py migrate
7. ./manage.py createsuperuser
8. ./manage.py runserver

9 / 22
Introduction

1. Django tutorial

2. JSON APIs with Django REST framework

3. Interactivity with React.js

Conclusion

10 / 22
Requirements for interactivity

Browser needs to retrieve updated state

11 / 22
Requirements for interactivity

Browser needs to retrieve updated state

Browser needs to update state

11 / 22
Requirements for interactivity

Browser needs to retrieve updated state

Browser needs to update state

Standard way of doing this:

JSON REST APIs

11 / 22
Requirements for interactivity

Browser needs to retrieve updated state GET

Browser needs to update state POST

Standard way of doing this:

JSON REST APIs

11 / 22
Commits

▶ Add serializer and view to show

questions
curl http://localhost:8000/polls/api/questions/

12 / 22
Commits

▶ Add serializer and view to show

questions
▶ Wire rest_framework router to URLs
See next slide

12 / 22
Commits
▶ Add serializer and view to show
questions
▶ Wire rest_framework router to URLs
▶ Expose full model to API
Hack to workaround namespace issues

14 / 22
Commits
▶ Add serializer and view to show
questions
▶ Wire rest_framework router to URLs
▶ Expose full model to API
▶ Add increment verb
$ curl -X POST http://localhost:8000/polls/api/choices/2/increment/; echo
{"choice_text":"0","votes":26,"question":"http://localhost:8000/polls/api/questi
$ curl -X POST http://localhost:8000/polls/api/choices/2/increment/; echo
{"choice_text":"0","votes":27,"question":"http://localhost:8000/polls/api/questi
$ curl -X POST http://localhost:8000/polls/api/choices/2/increment/; echo
{"choice_text":"0","votes":28,"question":"http://localhost:8000/polls/api/questi

14 / 22
Commits
▶ Add serializer and view to show
questions
▶ Wire rest_framework router to URLs
▶ Expose full model to API
▶ Add increment verb
Your turn!

15 / 22
Introduction

1. Django tutorial

2. JSON APIs with Django REST framework

3. Interactivity with React.js

Conclusion

16 / 22
React.js
The new standard for JS frontend work

17 / 22
React.js
The new standard for JS frontend work

Rules:

17 / 22
React.js
The new standard for JS frontend work

Rules:
▶ Components render HTML as a function

of properties and state

17 / 22
React.js
The new standard for JS frontend work

Rules:
▶ Components render HTML as a function

of properties and state

▶ Properties can only be changed by

parent components

17 / 22
React.js
The new standard for JS frontend work

Rules:
▶ Components render HTML as a function

of properties and state

▶ Properties can only be changed by

parent components
▶ Visual updates only happen when

properties or state change in a way that

affects the output of the render function
17 / 22
Commits

▶ React hello world

18 / 22
Commits
▶ React hello world
Note that including the initial JSON in
the response saves round-trips aka
progress spinner time

18 / 22
Commits

▶ React hello world

▶ Format questions

18 / 22
Commits

▶ React hello world

▶ Format questions
▶ Render vote counts in tables

18 / 22
Commits
▶ React hello world
▶ Format questions
▶ Render vote counts in tables
key allows for insertions, deletions, and
reordering

18 / 22
Commits

▶ React hello world

▶ Format questions
▶ Render vote counts in tables
▶ Add polling for data updates

18 / 22
Commits
▶ React hello world
▶ Format questions
▶ Render vote counts in tables
▶ Add polling for data updates
excellent separation of concerns

18 / 22
Commits

▶ React hello world

▶ Format questions
▶ Render vote counts in tables
▶ Add polling for data updates
▶ Implement increment call with react

18 / 22
Commits
▶ React hello world
▶ Format questions
▶ Render vote counts in tables
▶ Add polling for data updates
▶ Implement increment call with react
normally you’d use callbacks instead of
componentWillReceiveProps

18 / 22
Demo

19 / 22
Introduction

1. Django tutorial

2. JSON APIs with Django REST framework

3. Interactivity with React.js

Conclusion

20 / 22
Conclusions

▶ Exposing an API for your existing

models is pretty straightforward

21 / 22
Conclusions

▶ Exposing an API for your existing

models is pretty straightforward
▶ React.js is an in-browser template layer
that lets you add live updates without
changing rendering code

21 / 22
Future work

▶ Replicate

22 / 22
Future work

▶ Replicate
▶ Pause/faster/slower controls on polling

22 / 22
Future work

▶ Replicate
▶ Pause/faster/slower controls on polling
▶ Permissions

22 / 22
Future work

▶ Replicate
▶ Pause/faster/slower controls on polling
▶ Permissions
▶ Pre-compile JSX

22 / 22
Future work

▶ Replicate
▶ Pause/faster/slower controls on polling
▶ Permissions
▶ Pre-compile JSX
▶ WebSockets

22 / 22