Slide 1
Slide 1 text
Django After Web 2.0
Slide 2
Slide 2 text
ࣗݾհ (JP)
• ࢠሯ
• νϣϯɾζʔϐϯ
• @uranusjr
Slide 3
Slide 3 text
Me
• Call me TP
• Follow @uranusjr
• https://uranusjr.com
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
http://macdown.uranusjr.com
Slide 7
Slide 7 text
https://docs.pipenv.org
Slide 8
Slide 8 text
www. .com
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
https://web.archive.org/web/20050801014309/http://www.djangoproject.com:80/
Slide 11
Slide 11 text
Dynamic Web Pages
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
The Cycle
Client Django
Request
Response
Slide 14
Slide 14 text
It Works.
Slide 15
Slide 15 text
Image Credit: Kevin Fox
Slide 16
Slide 16 text
SPA
Slide 17
Slide 17 text
Single-Page Application
Client Django
Request
Skeleton
User
Data
Data
Render
Interact
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Frontend
Framework
Django
REST
Framework
Django
Model
API
Slide 21
Slide 21 text
Why Django At All?
Slide 22
Slide 22 text
Django
DB
Forms
Generic Views Templates
URLs
Admin
Model Forms
Slide 23
Slide 23 text
Django
DB
URLs
Django REST Framework
View Sets
Filters
Routers
Serializers
API Views
Slide 24
Slide 24 text
ORM Library REST
Slide 25
Slide 25 text
ORM
• SQLAlchemy
• PeeWee
• PonyORM
• …
REST
• APIStar
• Falcon
• Flask? Pyramid?
• Plain CGI (!)
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Position of Django
Slide 29
Slide 29 text
Page-Based
• Django is a back-end framework
• Let it do what it is good at
• Connect front and back in templates
Slide 30
Slide 30 text
Django
DB
Forms
Generic Views Templates
URLs
Admin
Model Forms
Static
Frontend
Framework
Slide 31
Slide 31 text
This is a bad idea
Slide 32
Slide 32 text
Modern Front End
• ES6 with modules, TypeScript, etc.
• SCSS, LESS, Stylus, etc.
• NPM and application bundler!
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
{% load static compress %}
{% compress css %}
{% endcompress %}
{% compress js %}
{% endcompress %}
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/
Slide 37
Slide 37 text
{% load webpack_loader %}
{% render_bundle 'main' 'css' %}
{% render_bundle 'main' 'js' %}
Slide 38
Slide 38 text
django-parcel?
Slide 39
Slide 39 text
View Template
Frontend
Framework
Context ???
Slide 40
Slide 40 text
var data = {{ data_json|safe }}
{% render_bundle 'main' 'js' %}
Slide 41
Slide 41 text
var data = JSON.parse('{{ data_json|escapejs }}')
{% render_bundle 'main' 'js' %}
Slide 42
Slide 42 text
{{ data_json|escapejs }}
{% render_bundle 'main' 'js' %}
const contextData = JSON.parse(
document.querySelector('#data').textContent
)
Slide 43
Slide 43 text
Take a Step Back
Slide 44
Slide 44 text
View Template
Frontend
Framework
Produces
context
Renders
the UI
Also renders
the UI??
Slide 45
Slide 45 text
https://stimulusjs.org
Slide 46
Slide 46 text
Stimulus
• By Basecamp (maintainers of Rails)
• Interacts with the DOM directly
• Works well with PJAX (Turbolinks)
Slide 47
Slide 47 text
Stimulus
• Easy parallel from Rails to Django
• Use what’s already there—templates
• Mostly server-side integration
Slide 48
Slide 48 text
Stimulus framework
jQuery re-imagined
Works for Django too
Slide 49
Slide 49 text
Django’s Next Steps
Slide 50
Slide 50 text
DISCLAIMER
Slide 51
Slide 51 text
Django
DB
Forms
Generic Views Templates
URLs
Admin
Model Forms
Slide 52
Slide 52 text
Vue (plus tools)
Django
DB
Forms
Generic Views Templates
URLs
Admin
Model Forms
Components
View
View Model
Style
States
Router
DOM
Slide 53
Slide 53 text
Django
DB
Forms
Generic Views Templates
URLs
Admin
Model Forms
Slide 54
Slide 54 text
Django
DB
Forms
Generic Views Templates
URLs
Admin
Model Forms
Slide 55
Slide 55 text
https://channels.readthedocs.io/
Slide 56
Slide 56 text
https://pybee.org/project/projects/bridges/batavia/
Slide 57
Slide 57 text
! "
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
SHAVE THE YAK
Slide 60
Slide 60 text
Summary
• Pure SPAs don’t really need Django
• Django is still very good for modern MPA
• How can Django fit into the SPA model?
Slide 61
Slide 61 text
No content