Download as PDF, PPTX
More Related Content
Similar to Django Rest Framework + React
Django Rest Framework + React
- 1. William S. Vincent DjangoAPIs + React Django Boston (May 2018) Modern web development with Django Rest Framework & ReactJS
- 2. William S. Vincent WhoAm I? ā Freelance software developer ā Early employee at Quizlet, other startups ā Books
- 3. William S. Vincent WhyAPIs? 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
- 4. William S. Vincent Whatis a web API?
- 5. William S. Vincent API āApplication Programming Interface (API) ā Way for 2 computers to communicate ā Need agreed-upon rules (a protocol)
- 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 HTTPVerbs Functionality Create Read Update Delete HTTP Method/Verb POST GET PUT DELETE Rough equivalence between CRUD & HTTP verbs
- 8. William S. Vincent HTTPStatus Codes Code 2xx 3xx 4xx 5xx Meaning Success (200, 201) Redirection (301) Client error (404) Server error (500)
- 9. William S. Vincent APIEndpoints ā https://mysite.com/api/users # GET returns collection of all users ā https://mysite.com/api/users/<id> # GET returns a single user
- 10.
- 11. William S. Vincent BuildingAPIs 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 Djangovs Django API Structure Django template.html urls.py views.py models.py Django API serializers.py
- 13. William S. Vincent DjangoBlog 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
- 14. William S. Vincent DjangoRest Framework
- 15. 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
- 16. William S. Vincent AddingDRF ā 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.
- 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 WhatWe Didnāt Cover ā Viewsets/Routers ā Authentication/Permissions ā Documentation ā Tests, Throttling, Pagination, etc.
- 22. William S. Vincent AddingReact Or Vue, Angular, etc...
- 23.
- 24. William S. Vincent Projectstructure 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! ā Fetch API: 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 DjangoRest Framework Docs http://www.django-rest-framework.org/ Demo Project https://github.com/wsvincent/djangoboston-drf-react-blog Slides https://www.slideshare.net/wsvincent/django-rest-framework-react My Site https://wsvincent.com/