Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Integrating react in django while staying sane and happy

245 views

Published on

This is our developer Mikales presentation for his talk during our Django meetup on June 14, 2018. Enjoy!

The theme was "Django and JS frontend frameworks, making it work" and you can read more about the Django Stockholm Meetup Group at meetup.com/djangosthlm.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Integrating react in django while staying sane and happy

  1. 1. DJANGO MEETUP Integrating React in Django while staying sane and happy
  2. 2. What is this React thing anyway?
  3. 3. REACTJS.ORG “React is a declarative, efficient, and flexible JavaScript library for building user interfaces.”
  4. 4. • Clean code – Complex and reactive frontends usually produce complex code • Fewer frontend bugs with Unit and Snapshot Tests • Frontend developer experience is great • Frontend developers do not need to know the underlying backend Why do I want this in my project?
  5. 5. How do I integrate it in Django?
  6. 6. There are a few ways to do this...
  7. 7. • Leads to a scattered codebase – Hard to navigate • Developers must jump between DTL and React Only using React for some components
  8. 8. • Hard work to keep routing in sync between frontend/ backend-app • Might have to reimplement much functionality that already exists in Django or 3d party apps Everything in React including routing (SPA)
  9. 9. • Clear project structure • Can still use Django and 3d party apps without too much hazel Let React handle the frontend, let Django handle requests and routing
  10. 10. Let´s look at code! 🎉
  11. 11. Django implementation: Template https://github.com/Frojd/django-react-templatetags
  12. 12. Django implementation: Views
  13. 13. React implementation
  14. 14. Client Side Rendering • Slow initial page load • Page flicker on navigation • Does not work without JS
  15. 15. Server Side Rendering (SSR) https://github.com/Frojd/Hastur/ • Running as a node daemon • Integrates with Django-react-templatetags
  16. 16. So... Is there any cons?
  17. 17. • JS bundle file size • Be careful when installing javascript libraries • Analyze your javascript bundle with webpack-bundle-analyzer • Preact or other framework • Server Side Rendering require another service running Cons
  18. 18. • https://github.com/mikaelengstrom/django-react-polls-example • https://github.com/Frojd/django-react-templatetags/ • https://github.com/Frojd/Hastur/ • https://github.com/Frojd/react-sass-starterkit • http://www.django-rest-framework.org/ • https://www.npmjs.com/package/webpack-bundle-analyzer Links
  19. 19. ¿Questions? 🤔
  20. 20. SOCIAL MEDIA OFFICECONTACT Thanks Mikael Engström mikael.engstrom@frojd.se Twitter: @FrojdAgency Facebook: @FrojdAgency Linkedin: Fröjd Agency Fröjd Interactive AB Kungstensgatan 18 113 57 Stockholm

×