6 ms·

If you want a batteries-included, zero-config Django + React framework, check out https://www.reactivated.io https://www.reactivated.io . It incorporates most

If you want a batteries-included, zero-config Django + React framework, check out https://www.reactivated.io https://www.reactivated.io . It incorporates most of these best practices, along with React server side rendering in addition to regular Django templates. Full disclosure: I'm the creator.

greenie_beans 4y ago
this is cool, thanks for sharing. this (https://www.reactivated.io/documentation/philosophy-goals/ https://www.reactivated.io/documentation/philosophy-goals/) fits my bias so i'm def gonna try it. curious how it works at a low level, too
- singhrac 4y ago
  Same, I agree with many of the thoughts there. When you get a moment, would you mind writing a guide on how to deploy it to Render.com? It sounds like the Heroku of 2022.
  - silviogutierrez 4y ago
    Theoretically, the Dockerfile should "just work"™ with Render.com as well. Right now I focus on fly.io only because their free tier offers PostgreSQL without time limits. Render, I believe, only does so for a period of time. See here: https://github.com/silviogutierrez/reactivated/blob/main/development/Dockerfile https://github.com/silviogutierrez/reactivated/blob/main/dev... https://github.com/silviogutierrez/reactivated/blob/main/development/scripts/launch.sh https://github.com/silviogutierrez/reactivated/blob/main/dev... https://github.com/silviogutierrez/reactivated/blob/main/development/scripts/deploy.sh https://github.com/silviogutierrez/reactivated/blob/main/dev...
ryanisnan 4y ago
This looks great!
lordofgibbons 4y ago
If you're doing server-side rendering, why do it in React SSR instead of Django templates? I've seen this pattern a lot recently but haven't figured out what the extra complexity gets you
- __float 4y ago
  I haven't used this particular framework, but having type safety in React through writing TypeScript, generating bindings to the backend so those are typed as well. There's also a _ton_ of preexisting React components you can generally drop in and use, which is less true these days with something like a Django template. You also have the option of doing SSR and then doing more dynamic stuff on the client side, as a sort of optimization (and plain better user experience than making _more_ server requests to get the initial page state loaded).
  - lordofgibbons 4y ago
    Thanks for taking the time to reply, but I'm still not really understanding the benefit. Type safety is incredibly important if you're lots of logic in a language, which is why TS is great for SPAs. Does the type safety of TS get you anything if you're just doing SSR with not a whole lot of logic in TS? All of your application logic will be on the Python side of things. >You also have the option of doing SSR and then doing more dynamic stuff on the client side Isn't this just the old-school way of doing things before SPAs came around? i.e you render the page on the server and then add dynamics features using JS. I think the new way of doing this is with htmx, hotwire, etc.
    - moomoo11 4y ago
      I think the biggest benefit of SSR is you get the first page fully rendered out (good for SEO), and beyond that page the react SPA takes over by doing all the cool client side stuff like routing and what-not. The biggest benefit for SSR in my opinion is SEO + first load is fast because its already generated. After that though, its just the plain old SPA experience.
- 4y ago
xcambar 4y ago
Tangent comment on JSX/TS/JS and a snippet found on reactivated.io. Not a comment on the article or reactivated.io in any way. > export const Flavor = () => <Select options={flavors} />; When I read the above, I fear for the new devs. The number of concepts to grasps and the level of parsing and mind bending to do is incredible. I used to teach code, before arrow functions and React. And I am convinced I would have lost some students to this snippet, especially the "= () =>" segment. Are we gone too far syntactically for the sake of compactness rather than understandability, allin the name of (fake, IMO) readability?
- fuzzy2 4y ago
  No. That's perfectly normal syntax you would use every day. It is not sophisticated or special. Also, consider functional languages like Haskell or whatever. Their syntax is exceptionally foreign for users of C-like languages, and so are the concepts. Still, they're (relatively) widely used.
  - xcambar 4y ago
    Comparing something to something else harder does not move the former into the realm of easy things. Haskell though requires significantly more work than JS to grasp, for sure.
- wruza 4y ago
  Compactness and understandability are the same thing on a large scale or under time pressure. This example is definitely loaded, but compared to more wordy alternatives it just cuts to the chase.
  - xcambar 4y ago
    > Compactness and understandability are the same thing on a large scale Could you elaborate on that, please? The way I read this, I could not be further from agreement :)
    - wruza 4y ago
wanderingmind 4y ago
Can you link any sample projects that currently uses reactivated?
- silviogutierrez 4y ago
  Sure: The docs site itself: www.reactivated.io . Notice no JS loaded on the client side. It's purely SSR. The code is in the repo under /website. My personal blog: www.silv.io And my business: www.joyapp.com I don't track others that use it, but hopefully they're out there!
  - wanderingmind 4y ago
    Great thanks.
ttymck 4y ago
Oh wow, this looks really good. I want to say, what I was really hoping to see is a "how does this work?" section. I'll read the source code, but it would be nice to have a quick narrative explanation. EDIT: Looks like the "Concepts" page has what I am looking for. I would add some of that to the front page.

greenie_beans 4y ago

this is cool, thanks for sharing. this (https://www.reactivated.io/documentation/philosophy-goals/ https://www.reactivated.io/documentation/philosophy-goals/) fits my bias so i'm def gonna try it. curious how it works at a low level, too

singhrac 4y ago
Same, I agree with many of the thoughts there. When you get a moment, would you mind writing a guide on how to deploy it to Render.com? It sounds like the Heroku of 2022.
- silviogutierrez 4y ago
  Theoretically, the Dockerfile should "just work"™ with Render.com as well. Right now I focus on fly.io only because their free tier offers PostgreSQL without time limits. Render, I believe, only does so for a period of time. See here: https://github.com/silviogutierrez/reactivated/blob/main/development/Dockerfile https://github.com/silviogutierrez/reactivated/blob/main/dev... https://github.com/silviogutierrez/reactivated/blob/main/development/scripts/launch.sh https://github.com/silviogutierrez/reactivated/blob/main/dev... https://github.com/silviogutierrez/reactivated/blob/main/development/scripts/deploy.sh https://github.com/silviogutierrez/reactivated/blob/main/dev...

ryanisnan 4y ago

This looks great!

lordofgibbons 4y ago

If you're doing server-side rendering, why do it in React SSR instead of Django templates? I've seen this pattern a lot recently but haven't figured out what the extra complexity gets you

__float 4y ago
I haven't used this particular framework, but having type safety in React through writing TypeScript, generating bindings to the backend so those are typed as well. There's also a _ton_ of preexisting React components you can generally drop in and use, which is less true these days with something like a Django template. You also have the option of doing SSR and then doing more dynamic stuff on the client side, as a sort of optimization (and plain better user experience than making _more_ server requests to get the initial page state loaded).
- lordofgibbons 4y ago
  Thanks for taking the time to reply, but I'm still not really understanding the benefit. Type safety is incredibly important if you're lots of logic in a language, which is why TS is great for SPAs. Does the type safety of TS get you anything if you're just doing SSR with not a whole lot of logic in TS? All of your application logic will be on the Python side of things. >You also have the option of doing SSR and then doing more dynamic stuff on the client side Isn't this just the old-school way of doing things before SPAs came around? i.e you render the page on the server and then add dynamics features using JS. I think the new way of doing this is with htmx, hotwire, etc.
  - moomoo11 4y ago
    I think the biggest benefit of SSR is you get the first page fully rendered out (good for SEO), and beyond that page the react SPA takes over by doing all the cool client side stuff like routing and what-not. The biggest benefit for SSR in my opinion is SEO + first load is fast because its already generated. After that though, its just the plain old SPA experience.
4y ago

xcambar 4y ago

Tangent comment on JSX/TS/JS and a snippet found on reactivated.io. Not a comment on the article or reactivated.io in any way. > export const Flavor = () => <Select options={flavors} />; When I read the above, I fear for the new devs. The number of concepts to grasps and the level of parsing and mind bending to do is incredible. I used to teach code, before arrow functions and React. And I am convinced I would have lost some students to this snippet, especially the "= () =>" segment. Are we gone too far syntactically for the sake of compactness rather than understandability, allin the name of (fake, IMO) readability?

fuzzy2 4y ago
No. That's perfectly normal syntax you would use every day. It is not sophisticated or special. Also, consider functional languages like Haskell or whatever. Their syntax is exceptionally foreign for users of C-like languages, and so are the concepts. Still, they're (relatively) widely used.
- xcambar 4y ago
  Comparing something to something else harder does not move the former into the realm of easy things. Haskell though requires significantly more work than JS to grasp, for sure.
wruza 4y ago
Compactness and understandability are the same thing on a large scale or under time pressure. This example is definitely loaded, but compared to more wordy alternatives it just cuts to the chase.
- xcambar 4y ago
  > Compactness and understandability are the same thing on a large scale Could you elaborate on that, please? The way I read this, I could not be further from agreement :)
  - wruza 4y ago

wanderingmind 4y ago

Can you link any sample projects that currently uses reactivated?

silviogutierrez 4y ago
Sure: The docs site itself: www.reactivated.io . Notice no JS loaded on the client side. It's purely SSR. The code is in the repo under /website. My personal blog: www.silv.io And my business: www.joyapp.com I don't track others that use it, but hopefully they're out there!
- wanderingmind 4y ago
  Great thanks.

ttymck 4y ago

Oh wow, this looks really good. I want to say, what I was really hoping to see is a "how does this work?" section. I'll read the source code, but it would be nice to have a quick narrative explanation. EDIT: Looks like the "Concepts" page has what I am looking for. I would add some of that to the front page.