Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Django APIs + React (Django Boston - May 2018)
Search
William S. Vincent
May 01, 2018
Technology
0
15
Django APIs + React (Django Boston - May 2018)
Learn about modern web development with Django REST Framework and ReactJS.
William S. Vincent
May 01, 2018
Tweet
Share
More Decks by William S. Vincent
See All by William S. Vincent
DjangoCon Europe 2025 Keynote - Django for Data Science
wsvincent
0
760
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
570
DjangoConUS 2024 - Django User Model: Past, Present, and Future
wsvincent
0
21
DjangoCon US 2022 - Solving the Django Jigsaw Puzzle
wsvincent
0
37
DjangoCon US 2019 - Search from the Ground Up
wsvincent
0
430
8 Reasons Why Learning Django is Hard (Django Boston - January 2019)
wsvincent
0
20
DjangoCon US 2018 - Finally Understand User Authentication in Django REST Framework
wsvincent
0
14
Other Decks in Technology
See All in Technology
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
180
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
270
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
290
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
250
microCMSではじめるAIライティング
himaratsu
0
110
TableauLangchainとは何か?
cielo1985
1
140
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
170
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
160
TLSから見るSREの未来
atpons
2
190
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
0
280
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.1k
AI エージェントと考え直すデータ基盤
na0
17
6.8k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
RailsConf 2023
tenderlove
30
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Code Review Best Practice
trishagee
69
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to Ace a Technical Interview
jacobian
278
23k
A Tale of Four Properties
chriscoyier
160
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
It's Worth the Effort
3n
185
28k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Transcript
William S. Vincent Django APIs + React Django Boston (May
2018) Modern web development with Django Rest Framework & ReactJS
William S. Vincent Who Am I? • Freelance software developer
• Early employee at Quizlet, other startups • Books
William S. Vincent API • Application Programming Interface (API) •
Way for 2 computers to communicate • Need agreed-upon rules (a protocol)
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
William S. Vincent What is a web API?
William S. Vincent HTTP • HTTP: Communications protocol for the
web • Web APIs sit “on top” of HTTP • API endpoints: url + available HTTP verbs
William S. Vincent HTTP Verbs Functionality Create Read Update Delete
HTTP Method/Verb POST GET PUT DELETE Rough equivalence between CRUD & HTTP verbs
William S. Vincent HTTP Status Codes Code 2xx 3xx 4xx
5xx Meaning Success (200, 201) Redirection (301) Client error (404) Server error (500)
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
William S. Vincent Django APIs
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
William S. Vincent Django vs Django API Structure Django template.html
urls.py views.py models.py Django API serializers.py
William S. Vincent Django Rest Framework
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
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
William S. Vincent Adding DRF • Install, update settings.py •
Update urls.py (project/app level) • Update views.py
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
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
William S. Vincent Browsable API
William S. Vincent CORS (Cross-Origin Resource Sharing) • Fundamental security
feature of the web • Allows for cross-domain requests • HTTP Headers added
William S. Vincent What We Didnʼt Cover • Viewsets/Routers •
Authentication/Permissions • Documentation • Tests, Throttling, Pagination, etc.
William S. Vincent Adding React Or Vue, Angular, etc...
William S. Vincent React setup
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
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
William S. Vincent Conclusion • Add DRF to an existing
Django project • Add CORS headers! • Use create-react-app • Run frontend/backend in two consoles
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/