React Rendering

[JensRavens]

How this works
Reaction is heavily inspired by Superglue and Intertia.js.

On each visit to a page (which is handled like regular rails visits), the server renders a meta tag with detail information about the page (which component to render and the props). Then the corresponding component is lazily imported (for small bundle sizes) and rendered with the props. Navigating from there happens via the Link element, which instead of navigating the browser just downloads the next page in json format (every route has a corresponding .json variant, you can look at it e.g. at /en/sprints.json), requires the corresponding component and renders it.
Page props are cached per path, so if you visit a path that has been visited before, it should render instantly while new data is fetched in the background.

In addition to the global navigation, there's a lower level component named Frame that allows to embed another path (and its data) into the current page. This is used for example in the custom Modal implementation of this project.

To invoke an action, there's the call method that can call specific endpoints and follow the result (e.g. if the endpoint returns data, it patches the cache. Otherwise there is also the refresh: true option that just refetches the current page on completion).

How to add a new path or change the schema

• create the method in the controller (e.g. /users leading to UsersController#index)
• add a corresponding props file (/app/views/users/index.props.rb)
• run the schema generation via rails reaction:schema to write the /data.d.ts file that contains all props of the application
• create the view file /app/views/users/index.tsx with a default export of the component to render. Props from the props file are available at the data prop

export default function ({
  data: { filter, users, currentUser },
}: PageProps<'users/index'>): JSX.Element {
  const t = useTranslate();
  const l = useFormatter();

How to Review
Go to https://nerdgeschoss-feature-re-edbalv.herokuapp.com/ and login with [email protected] (code is always 999999 for review apps).

[danieldiekmeier]

I was a bit surprised how little code Reaction itself is … but I guess it helps if we don't do SSR :D The code for Reaction looks pretty slick. Due to the size of the PR, I mostly skimmed the actual application changes since they seemed pretty harmless and just "reacting" (no pun intended) to be compatible with the new way this app works.

I clicked around in the app for a while, but other than the feedback you addressed already, nothing sprang out at me. I'd say let's ship it and react (there it is again) if any problems occur.