3 ms·

Agreed. But as soon as you hit any dynamic behavior, you kind of end up wishing you could "drop" into React. That's why I built the following project: https://

Agreed. But as soon as you hit any dynamic behavior, you kind of end up wishing you could "drop" into React. That's why I built the following project: https://github.com/silviogutierrez/reactivated https://github.com/silviogutierrez/reactivated It's very early on, but essentially, completely replaces the template rendering with React components. Still regular markup, but whenever you need dynamic behaviors, it's trivial. And it's all server side rendered. So basically, looking at https://github.com/silviogutierrez/reactivated/blob/master/client/templates/TrinketList.tsx https://github.com/silviogutierrez/reactivated/blob/master/c... You can see the traditional Django context becomes "Props" in the top level component. Then it's React all the way down. Notes: 1. The most complicated part is the initial setup. You do need to run NodeJS, webpack + Django server. Working on improving that. 2. I like TypeScript and use it here. But theoretically it'll be optional. The Django+Python part is also statically typed using MyPy. 3. No instructions whatsoever yet. But you can see a live site using this stack here: https://www.silviogutierrez.com/ https://www.silviogutierrez.com/ . Notice it's server rendered but has dynamic behaviors that are trivial in React but harder with jQuery + Django. Example: https://www.silviogutierrez.com/blog/making-cck-fields-read-only-drupal-6/ https://www.silviogutierrez.com/blog/making-cck-fields-read-... Look at the nested commenting and moving the form around. Very easy in React. 4. Because of the architecture, adding a much-better-turbolinks style Ajax is trivial. Click around the site above (loading indicator not yet added). The page is re-rendered entirely on the client but gets a server AJAX response. Hope that's interesting info. If you'd like to try it out, definitely let me know. Once you overcome the setup hurdles, it's amazingly productive. As in, if all you wish to do is `{{ form }}` like old school Django, here's the equivalent sample template: https://github.com/silviogutierrez/reactivated/blob/master/client/templates/FormView.tsx https://github.com/silviogutierrez/reactivated/blob/master/c...

iamgopal 8y ago
I was about the embark on making essentially this. A bit above turbolink. Edit: try to make it server agnostic, if open source is your intention ( and not just personal website use case ).
- silviogutierrez 8y ago
  Not a bad idea! In this case though, a major element I wanted from Django was the ability to use its forms "as is" with all the validation powers and ease of doing CRUD. Server agnostic would just be taking JSON -> React.
sandGorgon 8y ago
this is sooo cool. Can you build this for Flask as well - basically Jinja2. I do believe that Django can use jinja2 as well. However, would like to compile all the reactjs stuff before including it in flask/django. You could look into the https://github.com/nozzle/react-static https://github.com/nozzle/react-static project to use their static compiler (which does React -> static html/js) to achieve this exact thing.
ec109685 8y ago
What’s the benefit of rendering on the client given you need to get the Ajax response anyway? Can’t the server just return the html of the page?
- silviogutierrez 8y ago
  First, it's a true JSON response, which is much lighter. Second: React does a DOM diff and only updates the components that changed. So it's super fast. Third: when you DO need to use the raw JSON, you have access to it. Fourth: rebinding behaviors (onClick) etc is done by React seamlessly. And again, uses the DOM diff to be efficient.
  - ec109685 8y ago
    Have you measured the efficiency gains? On your site, you are making large scale changes as you click from link to link, so there isn’t much of the ui you aren’t re-rendering. In the site you linked to, the scroll position gets messed up as you go back and forth between “pages” and click on links — problems that don’t occur when you fully re render a page.
    - silviogutierrez 8y ago
      Efficiency in coding: inmeasurable. For typical CRUD it's amazing once you get over the hump of setup. Efficiency in speed: likely very little over just requesting the HTML via AJAX. As far as scrolling/etc: that behavior is super buggy and I never really tested it. I "turned on" the turbolink-esque behavior as a test but it needs far more work. In any case, one can just turn it off and revert to regular SSR behavior instead of the AJAX-ey one. I might even do that because, in general, I want my page to show the traditional loading icon in place of the favicon.
      - ec109685 8y ago
        This article summarized some of the pitfalls: https://tinnedfruit.com/articles/create-your-own-dysfunctional-single-page-app.html https://tinnedfruit.com/articles/create-your-own-dysfunction...
devxpy 8y ago
I have a similar project, that doesn't require you to setup webpack, and integrated beautifully with django https://github.com/pycampers/react-pages https://github.com/pycampers/react-pages
- silviogutierrez 8y ago
  Neat! In this case, it took a lot of work to get the forms "fielded" in React world. So you can individually render fields, etc. But yea, setup is currently a pain.
  - devxpy 8y ago
    I have a quite very crude implementation of form fields on my side, which annotates the type of formfield (as a string) along with several other useful things, like id_for_formfield, html_name etc. -- In your https://github.com/silviogutierrez/reactivated/blob/master/client/templates/FormView.tsx https://github.com/silviogutierrez/reactivated/blob/master/c... import {Form} from '../components/Form'; I can't find `../components/Form`. Where is the source for that? --- Here are the fields I was able to extract, meaningfully. https://github.com/pycampers/react-pages/blob/417ec24129b80b91c4f429f19a0334974a2c286f/react_pages/views.py#L59 https://github.com/pycampers/react-pages/blob/417ec24129b80b... It still doesn't seem enough for building anything serious though.

iamgopal 8y ago

I was about the embark on making essentially this. A bit above turbolink. Edit: try to make it server agnostic, if open source is your intention ( and not just personal website use case ).

silviogutierrez 8y ago
Not a bad idea! In this case though, a major element I wanted from Django was the ability to use its forms "as is" with all the validation powers and ease of doing CRUD. Server agnostic would just be taking JSON -> React.

sandGorgon 8y ago

this is sooo cool. Can you build this for Flask as well - basically Jinja2. I do believe that Django can use jinja2 as well. However, would like to compile all the reactjs stuff before including it in flask/django. You could look into the https://github.com/nozzle/react-static https://github.com/nozzle/react-static project to use their static compiler (which does React -> static html/js) to achieve this exact thing.

ec109685 8y ago

What’s the benefit of rendering on the client given you need to get the Ajax response anyway? Can’t the server just return the html of the page?

silviogutierrez 8y ago
First, it's a true JSON response, which is much lighter. Second: React does a DOM diff and only updates the components that changed. So it's super fast. Third: when you DO need to use the raw JSON, you have access to it. Fourth: rebinding behaviors (onClick) etc is done by React seamlessly. And again, uses the DOM diff to be efficient.
- ec109685 8y ago
  Have you measured the efficiency gains? On your site, you are making large scale changes as you click from link to link, so there isn’t much of the ui you aren’t re-rendering. In the site you linked to, the scroll position gets messed up as you go back and forth between “pages” and click on links — problems that don’t occur when you fully re render a page.
  - silviogutierrez 8y ago
    Efficiency in coding: inmeasurable. For typical CRUD it's amazing once you get over the hump of setup. Efficiency in speed: likely very little over just requesting the HTML via AJAX. As far as scrolling/etc: that behavior is super buggy and I never really tested it. I "turned on" the turbolink-esque behavior as a test but it needs far more work. In any case, one can just turn it off and revert to regular SSR behavior instead of the AJAX-ey one. I might even do that because, in general, I want my page to show the traditional loading icon in place of the favicon.
    - ec109685 8y ago
      This article summarized some of the pitfalls: https://tinnedfruit.com/articles/create-your-own-dysfunctional-single-page-app.html https://tinnedfruit.com/articles/create-your-own-dysfunction...

devxpy 8y ago

I have a similar project, that doesn't require you to setup webpack, and integrated beautifully with django https://github.com/pycampers/react-pages https://github.com/pycampers/react-pages

silviogutierrez 8y ago
Neat! In this case, it took a lot of work to get the forms "fielded" in React world. So you can individually render fields, etc. But yea, setup is currently a pain.
- devxpy 8y ago
  I have a quite very crude implementation of form fields on my side, which annotates the type of formfield (as a string) along with several other useful things, like id_for_formfield, html_name etc. -- In your https://github.com/silviogutierrez/reactivated/blob/master/client/templates/FormView.tsx https://github.com/silviogutierrez/reactivated/blob/master/c... import {Form} from '../components/Form'; I can't find `../components/Form`. Where is the source for that? --- Here are the fields I was able to extract, meaningfully. https://github.com/pycampers/react-pages/blob/417ec24129b80b91c4f429f19a0334974a2c286f/react_pages/views.py#L59 https://github.com/pycampers/react-pages/blob/417ec24129b80b... It still doesn't seem enough for building anything serious though.