in process

Rails form building using React.markdown

Building forms using React and Rails

SECTIONS:

• Solutions
  ..- Solution 1: Full React Integration
• Quick Comparison
• Hybrid Approach Best Practices

Solution 1: Full React Integration

1. Building the form:
   a. This solution is pretty straight-forward. You can either use ready made npm formbuilders for React or roll your own.
2. Time:
   a. Depending on the features being added and whether or not they're being created from scratch, the time will range. Given that React is a lot easier to read than tracing through JQuery or vanilla JS, the extra time taken to build a feature pays for itself in maintenance and readability.
3. Drawbacks:
   a. Unable to leverage any built-in support from Rails.
   b. Need to build-out and enforce a consistent way to communicate with the server(React-Refetch, AJAX, etc..)
   c. When building new features from scratch, the initial time to build a feature is typically higher.

Solution 2: Hybrid approach

1. Building the form:
   a. Using built-in Rails helpers, we can quickly generate a form template.
   b. We can build custom inputs using React with wrappers that copy the format of simple_form or another Rails helper lib
2. Time:
   a. The time to build a form with this approach is typically very low.
3. Drawbacks:
   a. React inputs have limited interaction -- Reacting to specific keystrokes gets overwritten by the Rails form(ie. It isn't possible to bind the TAB key to a particular event in a React input)
   b. The code is fragile. If the name of a particular table or column is renamed, we have to manually update the affected fields being passed to the React components manually.
   c. Non-react components have to rely on Javascript/JQuery to add features to.
   d. If you want to autosave your form or have your save button outside the context of your form, you need to manually target your form element using Javascript/JQuery(moreso a limitation of the Rails helpers..).

Quick Comparison

The two solutions essentially come down to the initial time that you want to invest in a project. If you have more time, or are using form plugins, going with an all React approach seems like the cleanest and safest solution of the two. The hybrid approach makes sense if your stack isn't built out well to support React initially and you have limited time. The good thing about the hybrid approach is that it allows you to build out individual pieces of your form overtime, eventually allowing you to move toward full React integration, while still providing a near-complete experience

Hybrid Approach Best Practices

TBD