Skip to main content

Motivation

Forms concept​

There’s a very interesting class-based inheritance concept for forms. Basically, there are a few types of forms with different capabilities. Most of the time you’ll be using either AutoForm or ValidatedForm, but there are quite a few more to choose from:

AutoForm class inheritance from ValidatedQuickForm which subsequently inherits from QuickForm and ValidatedForm.

If you are not familiar with concept of HOC, read one of many posts about them first. I’m sure you’ve read at least one of Why ES6 classes are bad or class considered harmful posts. I’ve read them too, so why is uniforms using classes? Well, it’s all about the complexity.

-- Radosław Miernik

React DevTools when lots of HOC’s are applied to a component.

I wanted to achieve the same functionality as with multiple HOCs, but within one component. To be honest, readability is more important than performance. In short, I’ve reached (more or less) traits with ES6 classes. The result?

-- Radosław Miernik

import BaseForm from './BaseForm';
import QuickForm from './QuickForm';
import ValidatedForm from './ValidatedForm';

const ValidatedQuickForm = ValidatedForm.Validated(QuickForm.Quick(BaseForm));

Single AutoValidatedQuickSemanticForm component (using 5 "traits") viewed in React DevTools.

While it’s not a universal approach that will work in every situation, using it in uniforms allows us to deliver clean-looking components while keeping extensibility and separation of concerns.

Based on Managing forms in a Meteor/React project with the uniforms package written by Maciej Stasiełuk.