Django After Web 2.0

Django, born amist the first web application revolution, is one of the most prototypical “dynamic” web frameworks. Its simplistic request-response cycle, however, does not fit well into the more recent real-time, long-running, client-heavy web applications, and is often sinfully relegated into a REST API provider. The speaker will discuss what Django’s strengths are, and see if there is a way to use Django in a way that fits into the modern web better going forward.

Transcript

1. Django After Web 2.0
   

   View Slide

2. ࣗݾ঺հ (JP)
   • ৉ ࢠሯ
   • νϣϯɾζʔϐϯ
   • @uranusjr
   

   View Slide

3. Me
   • Call me TP
   • Follow @uranusjr
   • https://uranusjr.com
   

   View Slide

4. View Slide

5. View Slide

6. http://macdown.uranusjr.com
   

   View Slide

7. https://docs.pipenv.org
   

   View Slide

8. www. .com
   

   View Slide

9. View Slide

10. https://web.archive.org/web/20050801014309/http://www.djangoproject.com:80/
    

    View Slide

11. Dynamic Web Pages
    

    View Slide

12. View Slide

13. The Cycle
    Client Django
    Request
    Response
    

    View Slide

14. It Works.
    

    View Slide

15. Image Credit: Kevin Fox
    

    View Slide

16. SPA
    

    View Slide

17. Single-Page Application
    Client Django
    Request
    Skeleton
    User
    Data
    Data
    Render
    Interact
    

    View Slide

18. View Slide

19. View Slide

20. Frontend
    Framework
    Django
    REST
    Framework
    Django
    Model
    API
    

    View Slide

21. Why Django At All?
    

    View Slide

22. Django
    DB
    Forms
    Generic Views Templates
    URLs
    Admin
    Model Forms
    

    View Slide

23. Django
    DB
    URLs
    Django REST Framework
    View Sets
    Filters
    Routers
    Serializers
    API Views
    

    View Slide

24. ORM Library REST
    

    View Slide

25. ORM
    • SQLAlchemy
    • PeeWee
    • PonyORM
    • …
    REST
    • APIStar
    • Falcon
    • Flask? Pyramid?
    • Plain CGI (!)
    

    View Slide

26. View Slide

27. View Slide

28. Position of Django
    

    View Slide

29. Page-Based
    • Django is a back-end framework
    • Let it do what it is good at
    • Connect front and back in templates
    

    View Slide

30. Django
    DB
    Forms
    Generic Views Templates
    URLs
    Admin
    Model Forms
    Static
    Frontend
    Framework
    

    View Slide

31. 
    
    
    This is a bad idea
    
    
    
    
    
    
    
    

    View Slide

32. Modern Front End
    • ES6 with modules, TypeScript, etc.
    • SCSS, LESS, Stylus, etc.
    • NPM and application bundler!
    

    View Slide

33. View Slide

34. {% load static compress %}
    {% compress css %}
    href="{% static 'site.scss' %}">
    {% endcompress %}
    {% compress js %}
    src="{% static 'site.js' %}">
    {% endcompress %}
    

    View Slide

35. View Slide

36. https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/
    

    View Slide

37. {% load webpack_loader %}
    {% render_bundle 'main' 'css' %}
    {% render_bundle 'main' 'js' %}
    

    View Slide

38. django-parcel?
    

    View Slide

39. View Template
    Frontend
    Framework
    Context ???
    

    View Slide

40. 
    <br/>var data = {{ data_json|safe }}<br/>
    {% render_bundle 'main' 'js' %}
    

    View Slide

41. 
    <br/>var data = JSON.parse('{{ data_json|escapejs }}')<br/>
    {% render_bundle 'main' 'js' %}
    

    View Slide

42. <br/>{{ data_json|escapejs }}<br/>
    {% render_bundle 'main' 'js' %}
    const contextData = JSON.parse(
    document.querySelector('#data').textContent
    )
    

    View Slide

43. Take a Step Back
    

    View Slide

44. View Template
    Frontend
    Framework
    Produces
    context
    Renders

    the UI
    Also renders
    the UI??
    

    View Slide

45. https://stimulusjs.org
    

    View Slide

46. Stimulus
    • By Basecamp (maintainers of Rails)
    • Interacts with the DOM directly
    • Works well with PJAX (Turbolinks)
    

    View Slide

47. Stimulus
    • Easy parallel from Rails to Django
    • Use what’s already there—templates
    • Mostly server-side integration
    

    View Slide

48. Stimulus framework
    jQuery re-imagined
    Works for Django too
    

    View Slide

49. Django’s Next Steps
    

    View Slide

50. DISCLAIMER
    

    View Slide

51. Django
    DB
    Forms
    Generic Views Templates
    URLs
    Admin
    Model Forms
    

    View Slide

52. Vue (plus tools)
    Django
    DB
    Forms
    Generic Views Templates
    URLs
    Admin
    Model Forms
    Components
    View
    View Model
    Style
    States
    Router
    DOM
    

    View Slide

53. Django
    DB
    Forms
    Generic Views Templates
    URLs
    Admin
    Model Forms
    

    View Slide

54. Django
    DB
    Forms
    Generic Views Templates
    URLs
    Admin
    Model Forms
    

    View Slide

55. https://channels.readthedocs.io/
    

    View Slide

56. https://pybee.org/project/projects/bridges/batavia/
    

    View Slide

57. ! "
    

    View Slide

58. View Slide

59. SHAVE THE YAK
    

    View Slide

60. Summary
    • Pure SPAs don’t really need Django
    • Django is still very good for modern MPA
    • How can Django fit into the SPA model?
    

    View Slide

61. View Slide