Going isomorphic with Django and React

https://www.pycon.it/conference/talks/going-isomorphic-with-django-and-react

Transcript

1. G O I N G I S O M O R P H I C W I T H D J A N G O & R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1
2. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 2 Full stack developer @ SpazioDati Board game addicted Something between a beer lover and a beer snob MATTIA LARENTIS
3. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 3 Semantic stuff and Big data 30+ employees… hey, we’re hiring! Both in Trento and in Pisa SPAZIODATI
4. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 4 A marketing and sales intelligence tool Works on different countries Written in Django + React ATOKA
5. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 5 Talking about SSR Atoka SpazioDati 2012 2014 TODAY TOMORROW Conquer the world
6. W A I T , W H AT I S S E R V E R S I D E R E N D E R I N G ?
7. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 aɪ.soʊˈmɔɹ.fɪk In web development, an isomorphic application is one whose code (in this case, JavaScript) can run both in the server (in this case, Django) and the client. 7
8. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 Normally when using React, your browser will download a minimal HTML page, and the content will be filled in by JavaScript. 8
9. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 9 Page now viewable and interactable Browser executes React Browser downloads JS Server sends HTML to browser
10. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 With SSR, the initial content is generated on the server, so your browser can download a page with HTML content already in place. Updates to the content are still handled in the browser. 1 0
11. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 1 1 Page now interactable Browser executes React Now viewable The browser downloads JS Server sends ready to be rendered HTML response to browser
12. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 1 2 Rendering server-side helps search engine crawlers find your content. SEO Using the same components both in server and in client side allows you to not repeat yourself. DRY SSR will usually increase performance for your app, but not always. ? PERFORMANCE Using SSR will increase the complexity both of your code and your infrastructure. X COMPLEXITY The page will be rendered even if JavaScript is disabled on the browser. NO SCRIPT
13. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 SEO Search engine crawlers don’t support JavaScript (Google sometimes does). For apps built with React, this means they see a blank page. Fixing this problem is usually the most common reason for going SSR. 1 3
14. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 DRY “Don’t repeat yourself” is the key. Same code running on server and on browser. Use your favourite tech (React) without considering the environment (server / client) you are working in. 1 4
15. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 No script SSR allows you to write applications that gracefully degrade and can be used as thin clients. Processing runs on server and the application can be viewed in a browser without JavaScript enabled. 1 5
16. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 Improve perf. The browser can display your rendered components as soon as it downloaded HTML & CSS. If your JavaScript file is very large, this can be a big improvement. The web page won't be interactive until the JavaScript downloads and React boots up, but perceived performance is still improved. 1 6
17. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 Degrade perf. SSR means more work for your server, so your HTTP response will take a little longer to return. The size of your HTML will increase and will take longer to download. 1 7 X
18. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 More complex OP React components need node to run. Your infrastructure should keep a node instance up and running, that can access the same file system of your Django project. Give a warm welcome to another point of failure. 1 8 X
19. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 More complex code 1 9 X Even if code is shared among server and client, your components have to be adjusted due to different behaviour (Ajax requests). If you use react-router on the client side, you'll need to rewrite those same routers on your server.
20. H O W D O Y O U U S E S S R I N S P A Z I O D AT I R I G H T N O W ?
21. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 We need to build a PDF file containing the same information we render on a web page. We designed a proof-of-concept of this feature in order to use the same React components used on the frontend to build such files. It ain’t important to move the whole system to SSR! 2 1
22. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 2 2 We’re not alone.
23. H O W D O E S I T W O R K ?
24. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 HTTP request to Django app Django embeds React payload into HTML and returns response 2 4 HTTP request to Node server with data HTML payload of rendered React app Request data from DB Response with data
25. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 $ pip install react==4.1.1 2 5
26. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 REACT = { 'RENDER': True, 'RENDER_URL': 'http://127.0.0.1:9009/render', } 2 6
27. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 def index(request): # something super cool here! rendered = render_component( ‘path/to/component-to-render.jsx’, {data: data}, ) # something super cool here as well! return render( request, ‘index.html', {‘rendered’: rendered} ) 2 7
28. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 {# inject the server-side rendered component #} <div id="app-container">{{ rendered | safe }}</div> {# add as global variable the store defined in the index view #} <script>var store = {{ store | safe }};</script> {# add the bundle built by webpack #} <script src="{% static 'js/dist/bundle.js' %}"></script> 2 8
29. D E M O
30. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 http://localhost:8000 3 0
31. W H AT W E L E A R N E D T O D AY ?
32. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 3 2 First Migrating the code is not painless.
33. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 3 3 Second … but it’s not mandatory to move the whole code to SSR.
34. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 3 4 Third Your infrastructure will be more complex and it will contain a new point of failure (node).
35. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 3 5 Fourth … but frontenders will be allowed to write code in a single way using a single language.
36. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 3 6 Fifth Your code will not be so complex, after all.
37. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 3 7 Sixth … but SEO will be improved.
38. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 SRR is not the silver bullet for all the problems… …but it can solve some :) 3 8
40. G O I N G I S O M O R P H I C W I T H D J A N G O A N D R E A C T L A R E N T I S M AT T I A - P Y C O N - 2 0 1 8 / 0 4 / 2 1 4 0 http://t.me/nostalgiaz http://github.com/nostalgiaz https://spaziodati.eu LARENTIS MATTIA