ReactCDK: Express Infrastructure Resources using React JSX/TSX

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]

RFC created. RFC tracking issue @ https://github.com/aws/aws-cdk-rfcs/issues/256