ReactCDK: Express Infrastructure Resources using React JSX/TSX

[pfeilbr]

Support the expression of cloud infrastructure resources via React JSX / TSX. Cloud solutions are composed of many services. Being able to efficiently and naturally express the composition is a developer ergonomics/DX concern.

Hello ReactCDK app concept gist

• custom react renderer / reconciler where cloud (cfn) is it's render target getting there via CDK language layer.
• ReactCDKBaseComponent (class or functional component/hooks friendly)
• ReactCDKPatternComponent - pre-composed infra for common use cases.
• leverage React ecosystem adjacencies (e.g. react storybook, etc.)
• mapping from react concepts of props, state, children, render props to typescript CDK constructors, params, hierarchical nesting (parent), etc.

  a clean mapping needs to be proven as is area for more digging**

• special cases of lambda function code being webpack + babel + etc being transpiled, bundled, etc. and handed over to CDK provisioning layer.

  this is a bit more involved and also needs research. this is the blending of app code and infra resources it interacts with.
  This is somewhat similar to Meteor, but instead of only mongodb, it's every cfn supported AWS service. Need to not make same mistakes as meteor.

• step function special cases where the components that make it up are customized for developer ergonomics/dx.
• wrap these ReactCDK components for Amplify “Backend” library
• this is additional alternative to amplify add [backend] (e.g. api, auth, etc.)

Use Case

• Library / framework support is a natural evolution on top of already supported CDK languages.
• React is familiar to a large group of developers, not scary. It's a generalized tech that allows devs to naturally express composition, which is the core tenet of serverless / serviceful solutions.
• This eases developers into more advanced AWS usage and therefore enabling them to get more value from the platform.
• Library/framework support on top of already supported language
  (ts) via jsii

Resources

• original conversation on twitter
• Hello ReactCDK app concept gist
• Part 1/3 - Beginners guide to Custom React Renderers. How to build your own renderer from scratch?

[rrrix]

React is familiar to a large group of developers, not scary.

This is very debatable. I'm familiar with React and it totally scares me. I saw this issue title and had to click in to read more... because I feel this is just so... scary 😆. If I have to manage my CDK Stack state in Redux I'm going to quit and become a carrot farmer.

I think perhaps instead of JSX/TSX, a more Functional (vs Class based) paradigm would be a bigger hit (and probably ease the transition to React style Components).

Anyways, very curious to see where this goes (for better or for worse)... sub'd 🧐

[pfeilbr]

thanks for your feedback @rrrix. very helpful in determining if there would be demand for something like. an idea at this point, and will benefit from more perspectives like yours.

[RomainMuller]

As this sounds like a fairly ambitious (and, judging by the epidermic reaction this triggered on @rrrix, possibly contentious) endeavor, I think the right place to start with this feature request would be for 😉 someone 😉 writing an RFC to get the conversation going.

In the very early days of CDK, we had mused with the similarity between the CDK component model and React's; and if memory serves, @eladb had lightly toyed with the idea of a react-style infrastructure modeling approach (this might well be the reason why jsii includes jsx configurations in it's generated tsconfig.json. We however drifted a little further away from this so as you're noting here... more work would be needed to fully introduce this capability.

[pfeilbr]

Thanks @RomainMuller for your feedback and guidance. I wasn't aware of the RFC process and agree this scope of change/add belongs there. I will create an RFC.

[pfeilbr]

RFC created. RFC tracking issue @ aws/aws-cdk-rfcs#256