Django APIs + React (Django Boston - May 2018)

Learn about modern web development with Django REST Framework and ReactJS.

Transcript

1. William S. Vincent Django APIs + React Django Boston (May 2018) Modern web development with Django Rest Framework & ReactJS
2. William S. Vincent Who Am I? • Freelance software developer • Early employee at Quizlet, other startups • Books
3. William S. Vincent API • Application Programming Interface (API) • Way for 2 computers to communicate • Need agreed-upon rules (a protocol)
4. 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
5. William S. Vincent What is a web API?
6. William S. Vincent HTTP • HTTP: Communications protocol for the web • Web APIs sit “on top” of HTTP • API endpoints: url + available HTTP verbs
7. William S. Vincent HTTP Verbs Functionality Create Read Update Delete HTTP Method/Verb POST GET PUT DELETE Rough equivalence between CRUD & HTTP verbs
8. William S. Vincent HTTP Status Codes Code 2xx 3xx 4xx 5xx Meaning Success (200, 201) Redirection (301) Client error (404) Server error (500)
9. William S. Vincent API Endpoints • https://mysite.com/api/users # GET returns collection of all users • https://mysite.com/api/users/<id> # GET returns a single user
10. William S. Vincent Django APIs
11. 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
12. William S. Vincent Django vs Django API Structure Django template.html urls.py views.py models.py Django API serializers.py
13. William S. Vincent Django Rest Framework
14. 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
15. 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
16. William S. Vincent Adding DRF • Install, update settings.py • Update urls.py (project/app level) • Update views.py
17. 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
18. 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
19. William S. Vincent Browsable API
20. William S. Vincent CORS (Cross-Origin Resource Sharing) • Fundamental security feature of the web • Allows for cross-domain requests • HTTP Headers added
21. William S. Vincent What We Didnʼt Cover • Viewsets/Routers • Authentication/Permissions • Documentation • Tests, Throttling, Pagination, etc.
22. William S. Vincent Adding React Or Vue, Angular, etc...
23. William S. Vincent React setup
24. 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
25. 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
26. William S. Vincent Conclusion • Add DRF to an existing Django project • Add CORS headers! • Use create-react-app • Run frontend/backend in two consoles
27. 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/