These are chat archives for redfin/react-server

20th
May 2016
Nicholas Romero
@ncrmro
May 20 2016 13:45
Any way to extend the react server say with graphQL?
Chris Rittelmeyer
@chrisrittelmeyer
May 20 2016 14:20
Hi guys, very interested in the project. I'm about to start a largish React project, and I haven't quite decided the exact stack. I have been leaning towards either a react/redux solution (probably react-redux-starter-kit as a base) or a react/relay/graphql solution (probably react-starter-kit as a base) with an eye towards a future port to iOS/Android via React Native. In your design.md document you said "We suspected that Relay has the best story, but it was unrealistic to move to Relay all in one go internally. Every solution has strengths and drawbacks." So my question is: now that Relay is a bit more mature, how does it compare to react-server? If you were starting a new project today, would Relay be a more feasible option, or would you still opt for react server? Or is there some meaningful way to use both? (admittedly I haven't fully grokked your system here yet, so this may be a silly question).
Also, in your hello world example I see you're using react's built-in state. Would a more complex project use a state management library like redux, or does react server somehow remove the need for that?
Nicholas Romero
@ncrmro
May 20 2016 14:25

I’m a bit confused as well, redux or relay will need to inject the state server side. Each of them has a routing option using the state in redux or relay.

They each also have a componaion plugin that allows the injection of the relay or redux state on server side render.

I just asked above how to integrate graphql above, not sure how to extend the express server.
Chris Rittelmeyer
@chrisrittelmeyer
May 20 2016 14:26
Yes, I am also interested in how it would integrate with graphql
Nicholas Romero
@ncrmro
May 20 2016 14:26
So I’m still kinda figuring out, Redux seems to have a lot more boilerplate from managing the state.
Like double

This is the most full featured/complex example of react redux. https://github.com/mattkrick/meatier

Editited to mean redux

Took me quite a while to even figure it all out.
I’m currently working on converting that project replacing redux/sockets with relay.
Has authentication handled in GraphQL
The app gets you trello pretty much. lists with notes for each list.
Redux state is managed in the each of the modules folder in a folder called ducks.
Sasha Aickin
@aickin
May 20 2016 14:30
The redfin folks can totally speak for themselves on this, but I think at this point that react-server is pretty neutral on what form of flux/relay/state management you use. I believe Redfin uses a modified form of reflux
But I think (without thinking about it a bunch) that you basically would just need to bootstrap whatever info you need in handleRoute and let whatever flux solution you chose take it from there
Nicholas Romero
@ncrmro
May 20 2016 14:33
Is the idea to implement the graphQL seperate how ever you want? After looking also at a Django GraphQL Relay backend you still will end up with an express server side rendering the app pointed to whatever backend of your choice.
Sasha Aickin
@aickin
May 20 2016 14:35
yeah, the idea behind react-server is that it's your front-end server
and that you probably have one or more backend servers that serve up data in JSON
one of the things that react-server does is that it intercepts all your calls to those backend servers and packages up the JSON data so that it can be shipped to the browser in a script tag. this ensures that the client-side render is using the same data as the server-side.
but react-server has no opinions about how those backend services are implemented, except that they should be a) URL-addressable and b) return JSON. (at least as far as I remember)
Chris Rittelmeyer
@chrisrittelmeyer
May 20 2016 14:44
thanks Sasha, that clears things up
Gonna try it out
Sasha Aickin
@aickin
May 20 2016 14:45
no problem! Also, if you are in the mood for reading, this doc gives a good sense of the high-level reasons for react-server's existence: https://github.com/redfin/react-server/blob/master/docs/why-react-server.md
Chris Rittelmeyer
@chrisrittelmeyer
May 20 2016 14:51
Oh yeah, I read that last night
A very good introduction
Sasha Aickin
@aickin
May 20 2016 14:53
well, I'm a little biased, as I wrote the first draft. ;)
Nicholas Romero
@ncrmro
May 20 2016 14:56
πŸ‘πŸΌπŸ‘ πŸ™‚
Thanks as well.
Joshua Sierles
@jsierles
May 20 2016 16:16
hey all
I have the same questions as others about how to hook up data to react-server. Are there examples?
Bo Borgerson
@gigabo
May 20 2016 16:18
Hi @jsierles. There are some examples in this doc that might be helpful: https://github.com/redfin/react-server/blob/master/docs/understanding-rendering.md
Joshua Sierles
@jsierles
May 20 2016 16:19
Thanks. I have an client-side app already fully depedent on relay, and wanted to try putting it behind react-server. The catch seems to be around how routing will work.
that document makes sense, but doesn't show any examples of fetching data.
Bo Borgerson
@gigabo
May 20 2016 16:22
Hmm... good point.
React Server expects data fetches to go through ReactServerAgent.
Beyond that it doesn't really care how it's fetched or who is fetching it.
Joshua Sierles
@jsierles
May 20 2016 16:24
what does 'go through' mean here?
Bo Borgerson
@gigabo
May 20 2016 16:24
ReactServerAgent.get() for an http GET, for example.
Joshua Sierles
@jsierles
May 20 2016 16:25
For example, in relay, you connect your components and receive props. there is no way to directly fetch data like that. so my guess is tools like Relay won't be usable for now
Bo Borgerson
@gigabo
May 20 2016 16:25
Hmm...
Joshua Sierles
@jsierles
May 20 2016 16:26
Probably just need some example to clarify this. I'll take a run through the code and see what the agent does
Sasha Aickin
@aickin
May 20 2016 16:26
I think Relay would be usable, but it has to use RSA for its GETs. dunno if Relay allows for a plugin like that
Joshua Sierles
@jsierles
May 20 2016 16:27
i see. well the way relay works is by plugging in a network layer yourself. So it might be easy to inject in that case.
Bo Borgerson
@gigabo
May 20 2016 16:27
Nice!
Chris Rittelmeyer
@chrisrittelmeyer
May 20 2016 16:27
Let us know what you discover on that front!
Bo Borgerson
@gigabo
May 20 2016 16:27
I opened a ticket to track this: redfin/react-server#190
Chris Rittelmeyer
@chrisrittelmeyer
May 20 2016 16:27
:+1:
Sasha Aickin
@aickin
May 20 2016 16:28
FYI, in that example TritonAgent should be ReactServerAgent (it was written against an earlier version of react-server)
Joshua Sierles
@jsierles
May 20 2016 16:29
what is the goal of that agent?
looking over the code, it looks like it builds a client-side cache in localStorage for each page separately.
Bo Borgerson
@gigabo
May 20 2016 16:31
"Cache" is actually a little bit of a misnomer there. It's only caching for the duration of a single request. It's purpose is to transfer the data responses that the server received while handling a page request to the browser so the render there has access to the same data, without having to make the same requests over again.
Sasha Aickin
@aickin
May 20 2016 16:31
it's goal is to listen to all the JSON calls made by the code on the server, package up their results, and send them down to the client
then on the client, the app code thinks it's talking to the server, but it's really just getting the results locally
or, um, what @gigabo just said. ;)
Joshua Sierles
@jsierles
May 20 2016 16:33
ah ok, fair enough. well the reality is that Relay can't run yet on the server for other reasons. but when it does, it would be interesting to explore this
Sasha Aickin
@aickin
May 20 2016 16:33
I'm interested; why can't Relay run on the server?
Joshua Sierles
@jsierles
May 20 2016 16:34
I'm not even sure myself of all the issues, but they are being tracked here: facebook/relay#559
Sasha Aickin
@aickin
May 20 2016 16:35
cool, thanks!
Joshua Sierles
@jsierles
May 20 2016 16:36
It's a bit of a frustrating project, with lots of big long term goals and mostly only FB people are working on it. But the behavior is useful
Sasha Aickin
@aickin
May 20 2016 18:00
Love this tweet from someone working on Exponent: https://twitter.com/JI/status/733510767765397506