William S. Vincent
Django APIs + React
Django Boston (May 2018)
Modern web development with Django Rest
Framework & ReactJS
Slide 2
Slide 2 text
William S. Vincent
Who Am I?
● Freelance software developer
● Early employee at Quizlet, other startups
● Books
Slide 3
Slide 3 text
William S. Vincent
API
● Application Programming Interface (API)
● Way for 2 computers to communicate
● Need agreed-upon rules (a protocol)
Slide 4
Slide 4 text
William S. Vincent
Why APIs?
Pros
● Future proof
● Multiple frontends (iOS,
Android, web)
● Internal or external access
Cons
● More set up required
● User auth is tricky
(sessions, tokens, JWT)
● JS frameworks change
Slide 5
Slide 5 text
William S. Vincent
What is a web API?
Slide 6
Slide 6 text
William S. Vincent
HTTP
● HTTP: Communications protocol for the web
● Web APIs sit “on top” of HTTP
● API endpoints: url + available HTTP verbs
Slide 7
Slide 7 text
William S. Vincent
HTTP Verbs
Functionality
Create
Read
Update
Delete
HTTP Method/Verb
POST
GET
PUT
DELETE
Rough equivalence between CRUD & HTTP verbs
Slide 8
Slide 8 text
William S. Vincent
HTTP Status Codes
Code
2xx
3xx
4xx
5xx
Meaning
Success (200, 201)
Redirection (301)
Client error (404)
Server error (500)
Slide 9
Slide 9 text
William S. Vincent
API Endpoints
● https://mysite.com/api/users
# GET returns collection of all users
● https://mysite.com/api/users/
# GET returns a single user
Slide 10
Slide 10 text
William S. Vincent
Django APIs
Slide 11
Slide 11 text
William S. Vincent
Building APIs with Django
● Multiple packages available
● Django Rest Framework the clear favorite
○ Easily add to existing Django sites
○ Complete feature set
○ Very mature
Slide 12
Slide 12 text
William S. Vincent
Django vs Django API Structure
Django
template.html
urls.py
views.py
models.py
Django API
serializers.py
Slide 13
Slide 13 text
William S. Vincent
Django Rest Framework
Slide 14
Slide 14 text
William S. Vincent
Django + DRF
● Add DRF to existing(!) Django sites
● Only need models.py file from regular Django
● Write DRF-specific urls.py, views.py, and
serializers.py files
Slide 15
Slide 15 text
William S. Vincent
Django Blog
1. Create a new Django project/app
2. Update models.py and admin.py
3. Add blog posts via Django admin
https://github.com/wsvincent/djangoboston-drf-react-blog
Slide 16
Slide 16 text
William S. Vincent
Adding DRF
● Install, update settings.py
● Update urls.py (project/app level)
● Update views.py
Slide 17
Slide 17 text
William S. Vincent
Serializers
● The real “magic” of Django Rest Framework
● Transform models/querysets into JSON
● Deserializers transform data from client
back into complex data types too
Slide 18
Slide 18 text
William S. Vincent
Serializers
# posts/serializers.py
from rest_framework import serializers
from . import models
class PostSerializer(serializers.ModelSerializer):
class Meta:
fields = ('id', 'title', 'body',)
model = models.Post
Slide 19
Slide 19 text
William S. Vincent
Browsable API
Slide 20
Slide 20 text
William S. Vincent
CORS (Cross-Origin Resource Sharing)
● Fundamental security feature of the web
● Allows for cross-domain requests
● HTTP Headers added
Slide 21
Slide 21 text
William S. Vincent
What We Didnʼt Cover
● Viewsets/Routers
● Authentication/Permissions
● Documentation
● Tests, Throttling, Pagination, etc.
Slide 22
Slide 22 text
William S. Vincent
Adding React
Or Vue, Angular, etc...
Slide 23
Slide 23 text
William S. Vincent
React setup
Slide 24
Slide 24 text
William S. Vincent
Project structure
frontend
├── public
├── src
├── App.js
backend
├── backend_project
├── settings.py
├── urls.py
├── posts
├── models.py
├── serializers.py
├── views.py
├── urls.py
Slide 25
Slide 25 text
William S. Vincent
App.js
● Only need to update one file!
● Endpoint: http://127.0.0.1:8000/api/v1/
● Use map() to display all blog posts
Slide 26
Slide 26 text
William S. Vincent
Conclusion
● Add DRF to an existing Django project
● Add CORS headers!
● Use create-react-app
● Run frontend/backend in two consoles
Slide 27
Slide 27 text
William S. Vincent
Resources
Django Rest Framework Docs
http://www.django-rest-framework.org/
Demo Project
https://github.com/wsvincent/djangoboston-drf-react-blog
Slides
https://tinyurl.com/drf-react
My Site
https://wsvincent.com/