[silviogutierrez]

If you want a batteries-included, zero-config Django + React framework, check out 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.

[xcambar]

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?

[WorldMaker]

Some of that shifts with syntax highlighting: drawing the eyes to which bits are more specifically related. The arrow => should highlight as a single operator (just as >= does), for instance. Most people call these "arrow functions" so thinking of "=>" as the arrow operator is a habit that quickly builds.

They are controversial and everyone has different opinions, but I also think this is where programming ligatures come in extremely handy. When => looks more like ⇒ and is even more obviously an arrow, I think that also starts to make it easier to visually "parse" the flow of code like that.

For what it is worth, arrow functions weren't added solely for compactness, but also to fix some historic issues with classic function syntax. (Lexically scoped `this` versus caller scoped `this` being the big one.) A new type of function syntax was desired anyway for those reasons, and the compact syntax was the icing on the cake.

I haven't had the pleasure of teaching such things to students at this point in my career, but I have given a hand to many a junior developer to grasping some of these ideas and I don't think it is that tough, though it can be a shock/surprise if the last JS you touched was many years before. Especially if you are trying to also learn what JSX and/or TSX add on top of all the changes in ES2015+.

[fuzzy2]

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]

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.

[muspimerol]

If you work with JSX daily, which 99% of React developers do, this is not hard to grok. It's a very typical functional composition pattern in React. Since this framework is targeted at those who want to use React, and presumably already use it, I don't see the issue. It's a snippet to show how Reactivated lets you use the React ecosystem, not how to use React - that's what the docs are for.

[easytiger]

> Are we gone too far syntactically for the sake of compactness rather than understandability, allin the name of (fake, IMO) readability?

One of the reasons perl faded away, imho

[true_religion]

I’m not sure that brand new devs who have trouble reading standard JSX, are exactly the target market for a bleeding edge project that combines two popular frameworks together.

I think the target market is experienced people who want to use both react and Django, and feel that this project saves time on conceiving and writing their own integration.

[sumy23]

`() =>` is just the lambda syntax. JavaScript has, by far, one of the most understandable lambda syntaxes.

For instance, look how blocks are declared in Objective-C: http://fuckingblocksyntax.com/

[wruza]

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]

> 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]

Extended code reads like a narrative journalism. “It was an end to a long dark night and trees shyly stayed in a fog when options in a full entirety of their generous content got passed into a pure functional instance of a select tag”.

[xcambar]

I appreciate your ~writing~ coding style ;)

Maybe we can find consensus by avoiding the extremes.

"Extended code" as you name it is certainly bad with regards to explicitness, while extreme compactness like (some) one liners are as bad as the former but with regards to readability.

Both are negatively impacting understandability.

[lordofgibbons]

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]

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]

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]

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.

[sgt]

It's because React (and other SPA technologies that also happen to work with SSR) is all the buzz. It doesn't actually necessarily make sense. The risk to a project is usually NOT the technology chosen for frontend.

Django templates are perfectly fine as long as you leverage template tags the way they were intended.

[silviogutierrez]

I would agree that "Django templates are perfectly fine"... until: https://www.reactivated.io/documentation/philosophy-goals/#u...

Of course there's many ways around this, but doing them in a declarative, type-safe way is not trivial when using Django templates.

[lordofgibbons]

Given that example, would you say using SSR with React to add bits of dynamic-ness is directly comparable with using templates + hotwire/htmx?

Or is it an apples to oranges comparison?

[silviogutierrez]

It's very similar, except hotwire/htmx won't give you server rendering. It's not that big a deal if it's just small snippets.

This does make testing a lot easier, as the server response is identical to the hydrated client.

[ColonelPhantom]

A hypertext approach such as HTMX in fact does give you server rendering, since you send to the client a normal SSR page with some extra annotations that add SPA features.

For React, SSR is secondary. For HTMX, it is primary.

[sgt]

There's a lot of good advice in that article. I liked the part on cookies in particular. You rarely read that anywhere.

[rattray]

You can use the same templates on the backend and frontend. That may not matter to you, at least not now, but it's a great reason in many contexts.

Personally I find JSX to be a terrific templating system, much better than anything like Django's, but if you're familiar with both and prefer Django's, this benefit does not apply to you!

[ttymck]

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]

this is cool, thanks for sharing. this (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]

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]

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/dev...

https://github.com/silviogutierrez/reactivated/blob/main/dev...

https://github.com/silviogutierrez/reactivated/blob/main/dev...

[wanderingmind]

Can you link any sample projects that currently uses reactivated?

[silviogutierrez]

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]

Great thanks.

[ryanisnan]

This looks great!