Business take on

uniforms

What are/is uniforms?

A set of React libraries for building forms from any schema.

Website:​ uniforms.tools

The main package is also called uniforms.

Wait, there's more than one?

Yep, 12 now: 1 (core) + 4 (schemas) + 7 (themes).

What about our competition?

Feature uniforms Formik redux-form React Final Form react-hook-form
Synchronous validation ✔️ ✔️ ✔️ ✔️ ✔️
Asynchronous validation ✔️ ✔️ ✔️ ✔️ ✔️
Field level validation ✖️ ✔️ ✔️ ✔️ ✔️
Manual form layout ✔️ ✔️ ✔️ ✔️ ✔️
Automatic form layout ✔️ ✖️ ✖️ ✖️ ✖️
Manual state management mode ✔️ ✖️ ✔️ ✖️ ✔️
Automatic state management mode ✔️ ✔️ ✔️ ✔️ ✔️
Manually trigger change ✔️ ✔️ ✔️ ✔️ ✔️
Manually trigger reset ✔️ ✔️ ✔️ ✖️ ✔️
Manually trigger validation ✔️ ✔️ ✖️ ✖️ ✔️
Built in focus state management ✖️ ✔️ ✔️ ✔️ ✔️
Bootstrap 3 theme ✔️ ✖️ ✖️ ✖️ ✖️
Bootstrap 4 theme ✔️ ✖️ ✖️ ✖️ ✖️
Bootstrap 5 theme ✔️ ✖️ ✖️ ✖️ ✖️
Semantic UI theme ✔️ ✖️ ✖️ ✖️ ✖️
Your custom theme ✔️ ✔️ ✔️ ✔️ ✖️
JSON Schema support ✔️ ✖️ ✖️ ✖️ ✖️
GraphQL schema support ✔️ ✖️ ✖️ ✖️ ✖️
SimpleSchema support ✔️ ✖️ ✖️ ✖️ ✖️
Your custom schema support ✔️ ✔️ ✔️ ✔️ ✖️

Fast facts

  1. Are multi-page forms or wizards supported?
    • Yes, but it's just a normal form (docs).
  2. Are translations handled out of the box?
    • Yes, either on a schema or UI level (docs).
    • Errors are a different story (more here).
  3. Are there TypeScript type declarations?
    • Yes, uniforms are 100% TypeScript code.
  4. Can I create custom fields? Of course!
  5. Can I create custom themes? Of course!
  6. Can I create custom bridges? Of course!

There are limits, right?

  1. No built-in focus management.
    • Requires custom components.
  2. No built-in conditional logic.
    • Requires custom components.
  3. No built-in server-side logic.
    • This includes populating a dropdown with data from an API.
  4. No "manual" (schema-less) version.

It makes sense if...

  • You have a lot of forms.
  • You have user-defined forms.
  • You need automatically built forms.
  • You want a strict separation of UI and logic.
  • You want the forms to be ready soon.

It doesn't if...

  • You have only a few forms.
  • You have forms that won't change.
  • You have no need for using schemas at all.

Levels of integration

  1. Start with an official theme.
  2. Add custom components.
    • It's far easier now (docs).
  3. Create a fully customized theme.
    • It's easy as well (docs).
  4. Customize the bridge.

I'd say that the distribution would be
25% / 60% / 10% / 5%

$$$

  1. Yes, it's "almost free" to prepare a PoC, where all of the forms are automatically generated.
    • With an assumption that schemas are already there.
    • Without them, it may be faster not to use any form package at all.
  2. Yes, it's possible to replace them with customized ones later.
  3. Yes, components and themes can be reused in other forms and applications.

Key takeway

You don't have to use automatically generated forms nor a theme at all. At its core, it's just a library, that handles the form management and can be used solely for that purpose.

That also means it works with React Native. There's just no theme for it (right now).

Questions?

Business take on uniforms

By Radosław Miernik

Business take on uniforms

  • 650