formxtra/docs/00-rationale.md

Rationale

Why the need for another form library?

Let us set some facts about existing form libraries:

• Form libraries, especially framework-specific ones have verbose syntax.
  • Please go to your form library of choice and compare the syntax yourself.
• Form libraries are dependent on the architecture of the framework (such as React Hook Form and Formik) and requires using their features.
• Form libraries have differing ways on how to manage state, usually piggybacking on the data flow of the framework they are dependent on.
• Form libraries are relatively complex to what they are supposed to be doing such as providing wrappers to custom components, in which compatibility should be in the hands of the component author.

What does formxtra offer?

• formxtra aims to simplify the syntax to just invoking two functions - getFormValues() and setFormValues().
• formxtra is not dependent to any library and is highly interoperable.
• formxtra is dependent only to the DOM. Since accessing the DOM is fully synchronous, the same can be said for the entire operation of formxtra.
• There are no other paradigms introduced by formxtra. For the library to do its intentions, it only requires respecting the HTML DOM spec, such as providing names to inputs and binding them correctly to forms, which is what all (data-driven) websites should do anyway.
• formxtra is lightweight, even smaller than React Hook Form and Formik.
• formxtra is already type-safe, being written in TypeScript and providing types, thanks to pridepack as a scaffold.

What does formxtra not offer?

• formxtra is not a validation library, nor does it provide utility functions for validation.
  • However, one could use formxtra in tandem with other validation libraries such as ajv or yup for instance, by validating the values returned by getFormValues().
• formxtra does not provide compatibility to custom components.
  • Because custom components have different implementations that mostly favor user experience over compliance, formxtra does not guarantee it can work with them out of the box.
  • However, the solution for this is to provide a corresponding <input type="hidden"> element for each custom
    component, which should always get the latter’s serializable value. In return, this can also simplify the submission of the form as the custom components’ values are already in the form.

Forms are used to package related data, typically sent to an external location or processed internally. In the browser, the default behavior of submitting form data is not always preferred, as this is done through loading or reloading a document as soon as the form is submitted. In addition, applications have limited control over how the data are formatted on submission with this approach. This is why the new way of sending form data is done through AJAX/fetch requests, wherein the data are serialized into formats like JSON. To turn form data into a specific format requires access to the elements holding the values to each field in the form.

Libraries made for extracting form values query field elements in the DOM, which is inefficient since they need to traverse the DOM tree in some way, using methods such as document.getElementsByTagName() and document.querySelector(). This is the same case with setting each form values for, say, prefilling values to save time. It might be a simple improvement to the user experience, but the logic behind can be unwieldy as there may be inconsistencies in setting up each field value depending on the form library being used.

Upon retrieving the field values somehow, some libraries attempt to duplicate the values of the fields as they change, for instance by attaching event listeners and storing the new values into some internal object or map. This is then retrieved by some other exposed function or mechanism within that library. This is common with reactive frameworks, where changes to the document are essential to establish functionality and improved user experience.