AutoForm package for React - Meteor app. Which one to choose?

help
1

Hello fellow developers,

as described in here, I am going to create a CRUD list of cars:

Each car will able to assigned to a category (Small truck , medium truck, big truck, etc.), and each of the categories will have its own avatar indicating the size of the truck group.

In order to do so, I am looking for a React ready autoform package that works well with aldeed’s simpl-schema and collection2

So far I have found 2 possible choices:

Uniforms - https://github.com/vazco/uniforms/blob/master/INTRODUCTION.md → if I am correct Uniforms are missing the built in way to upload and crop avatar like images, so in order to make it work I will probably have to use the followin package: GitHub - adamczykjac/upload-image-uniforms

Simple React Forms - GitHub - nicolaslopezj/simple-react-form: The simplest way to handle forms in React → the most tempting thing in that package is its size. Looks much much smaller than Uniforms, and it will be probably easier to use it. And it has an image upload built in already (source: https://devarchy.com/react/library/simple-react-form)

I would like to ask, how are you handling those things in your apps? I am looking for a reusable solution that later on will be implemented in “Create user” form or “Users profile” page

2

Having used both of these packages my personal recommendation is Uniforms. I started out using SRF before I discovered Uniforms and had several issues and bugs that I couldn’t work past and found very little help from the developers of the package. Uniforms on the other hand is very well maintained and I’ve found them to be very responsive to issues as well as in the vazco/uniforms gitter room.

2 Likes
3

I can second recommendation for Uniforms. We’ve been using for almost 2 years and working out great.

Also, we use edgee slingshot for image upload to Amazon S3 for avatar display for list items in Material-UI, works great.

1 Like
4

I’ve used uniforms, and love it! It’s also easy to customize and build custom widgets if you need them.

5

After thinking about it for a while…

Do you guys always use AutoForm? I mean for now, I won’t have many forms in the app (10 -15 I guess), and this is the first time I am using a mix of Meteor and React. So for the understanding purposes maybe it will be better to take a hard way and built everything from scratch?

I would love to hear your opinion about this. I just like to have a hard grasp on stuff, and “automagic” generation is sometime stressfull to me once something is not working. In such cases I feel little bit powerless and confused

6

If you have the time/budget and want to learn, then by all means build everything from scratch. Just be aware that while forms always seem simple at the outset, once you dig in and start building them from scratch, you’ll quickly get bogged down in fairly trivial yet time consuming tasks like validation, state management, layout, testing, etc. Also, if you’re building a system that will be maintained by others in the future (or by your future self who might lose interest in building forms from scratch 6 months from now), just keep in mind that your custom / one-off approach might not be the best option from a maintenance point of view. Popular form libraries are used by thousands, in many different scenarios, so they benefit from a wide range of use-cases, testing scenarios, and feedback. There’s no guarantee that a form library you choose now will still be supported a year from now (or tomorrow in our JS world), but if it’s popular you can usually be fairly certain that it’s at least following best practices, and can be forked and maintained independently if needed.

Again though, if the intent is to learn then by all means dive in and handle all of it yourself. Maybe just keep in mind the impact that decision could have on your time and future maintenance plan.

3 Likes
7

Thank you for your reply, makes a lot of sense to me. Heh… after reading it from being decided to built from scratch I started having doubts. Need to consider all the things once again.

2 Likes
8

I use a pattern in Autoform where I set the schema, but then chery pick my fields:

<AutoForm
  schema={StyleSchema}
  onSubmit={this.handleStylesUpdate}
  model={props.styles}
  autosave
>
  <ColorField
    label="default color"
    name="color"
    colors={props.styles.colors}
  />
  <ColorField
    label="default text color"
    name="textColor"
    colors={props.styles.colors}
  />
  <div className="sidebar__number-form-container">
    <NumField name="tileTextSize" label="default text size" step={1} />
    <div className="sidebar__number-form-text">px</div>
  </div>
  <ListField
    name="colors"
    label="saved colors"
    className="sidebar__color-list"
  >
    <ListItemField name="$" className="sidebar__color-list-item">
      <ColorField name="" hideRemoveBtn />
    </ListItemField>
  </ListField>
  <LongTextField label="misc. styles" name="miscStyles" />
</AutoForm>

Fields like ColorField above are custom written (a simple wrapper around React-Color) using the tools provided by uniforms. I did the first couple version of those without the uniforms connector (which makes the field a one off, tightly coupled to the name of the field, and they don’t work as nicely, so I don’t recommend that), but once I wrapped my head around the HoC, it’s been easy and convenient to create new field types (like self-populating Select fields, and the like - I even wrapped TinyMCE).

This is IMO, the best way to organize forms. You get the convenience of the autoform, and the customizability of being able to strucure your own HTML. Beyond that, uniforms can work with multiple different schema systems including SimpleSchema and GraphQL, and has components for Bootstrap (above) and Material-UI, and others. I’m all in on uniforms.

1 Like
9

Also check this package: not so much Meteor related, but it could be made to work with it easily…
https://mozilla-services.github.io/react-jsonschema-form/