SPIKE Look at moving away from Redux Form for CMS 6

maxime-rainville commented 3 months ago

Redux Form is no longer in active development.

The maintainer of Redux Form recommend migrating to React Final Form instead.

Redux form is used by our form schema abstraction.

Timebox

3 days ... with possible follow up

Objectives of the SPIKE

Better understand how form schema is put together and what's it's interconnectivity with Redux is.
The basic approach to form schema is retained (communicate a form structure with JSON)
Review React Final Form's feature set evaluate what a migration would entail.
Research other Library that might fulfil a similar function to ReduxForm or React Final Form.
Review if we need a Form Library at all given the form schema use case.
Present finding at an architecture catch up.

Note

This is really about rendering forms. If you can fine a library that comes with its own form schema standard, that would also be acceptable.

maxime-rainville commented 2 months ago

There appears to be a lot of specs for JSON Form schema:

Maybe we should look at picking one approach used by someone else instead of maintaining our own.

emteknetnz commented 1 month ago

Recommendation:

Either swap out redux-form to react-hook-form, OR
Just keep using redux-form for a while longer as it still works for us and isn't technically broken
Keep redux form state management as is
Keep formschema as is

Existing setup - FormSchema

FormSchema is a JSON representation of a Silverstripe Form class, including both the structure (schema) of the form, and the values (state) of the form as well as any validation errors
While there are other more standardised FormSchema's out there, ours is fine for what it does so I see no reason to invest any effort in changing it, unless we really want to get rid of redux.

Existing setup - redux form state management:

We use redux-form which uses redux to manage form state
FormSchema also uses redux to store formstate (I'm not sure which has precedence)
There's also a 'schema state overrides' that overrides whatever redux-form + formschema has set which happens on several react components via setSchemaStateOverrides()
There's a bunch of existing logic so any attempt to refactor or even remove redux seems like a large amount of effort
If we did want to refactor/remove redux form state management, recommend this done independently of swapping out the form library so that we reduce implementation complexity.

Existing setup - notable react components are:

components/FormBuilder/FormBuilderLoader handles all the XHR formschema + redux stuff
components/FormBuilder/FormBuilder turns the FormSchema JSON into react components using Injector
components/Form/Form - renders the
tag
containers/Form/Form - wraps redux-form HOC around components/Form/Form

Redux-form:

Uses redux to manage form state, which complicates things
redux-form/redux-form - 12.6k stars, last commit 1 year ago, 475 issues
Last commit was to update package.json, so no longer being actively worked on
Github readme recommends that people use react-final-form instead

React-final-form:

Written by the same person who made redux-form
final-form/react-final-form - 7.3K stars,last commit 1 year ago, 367 issues
final-form/final-form - 3k stars, last commit 9 months ago, 98 issues
Does not use redux
react-final-form is a react wrapper around final-form which is framework agnostic
Clearer migration path as they use similar API
However does not use redux, so we'd still need to hook up redux which probably negates a lot of the migration simplicity
I did spend around half a day attempting to follow migration path, however I got nowhere. The complexity and difficulty was in our existing setup which is complicated.
Maintenance support doesn't look good, one man band, docs look pretty rough
Can be used with class components, so doesn't need to refactor class component
Syntax not as nice as react-hook-form or formik
Looks like the worst option

import { Form, Field } from 'react-final-form'

export function MyForm {
  return <Form
    onSubmit={onSubmit}
    validate={validate}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field
          name="bio"
          render={({ input, meta }) => (
            <div>
              <label>Bio</label>
              <textarea {...input} />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        />
// ...

React-hook-form:

react-hook-form/react-hook-form - 39.7k stars last commit 3 weeks ago, 26 issues
Does not use redux
Would require refactoring <FormBuilder> to a functional component
Along with formik, looks like one of the most popular two react form frameworks
Looks as though it has the most active community in terms of fixing github issues. Docs look really good.
The useForm() hook provides a register() method that binds react-hook-form to
Recommend we use this over react-final-form or formik

import { useState } from "react";
import { useForm } from "react-hook-form";

export function MyForm() {
  const { register, handleSubmit } = useForm();
  const [data, setData] = useState('');
  return (
    <form onSubmit={handleSubmit((data) => setData(JSON.stringify(data)))}>
      <Header />
      <input {...register("firstName")} placeholder="First name" />
// ...

Formik

jaredpalmer/formik - 33.5k stars, last commit 1 week ago, 689 issues
Support looks good, though lots of unresolved issues. Docs look good
Does not use redux
Would require refactoring <FormBuilder> to a functional component
Along with formik, looks like one of the most popular two react form frameworks
Looks very similar to react-hook-form, though not quite as nice IMO
Don't recommend we use, see no reason to use over react-hook-form

import React from 'react';
import { useFormik } from 'formik';

export function MyForm() {
  const formik = useFormik({
    initialValues: objectOfData,
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />
// ....

GuySartorelli commented 1 month ago

Spike complete and discussed. Next step is https://github.com/silverstripe/silverstripe-admin/issues/1747

silverstripe / silverstripe-admin