$30 off During Our Annual Pro Sale. View Details »

Django After Web 2.0

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.

Tzu-ping Chung

May 19, 2018
Tweet

More Decks by Tzu-ping Chung

Other Decks in Programming

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