Meteor React Form: Autoform for React

One of the arguments for not leaving Blaze is the ecosystem. One the the best packages is Autoform and we don’t have anything similar for Meteor+React.

I started the Meteor React Form project to create the same functionality that Autoform has but in a modern, and easier way for expert users.

MRF uses Simple Schema and new input types are very easy to use.

The project is not ready and I need the help of everyone.

I want to listen your opinions!

6 Likes

It would be nice to include Astronomy support. Version 2.0 (a major rewrite) is right around the corner, and it’s fantastic. Author is: @jagi

5 Likes

You might want to talk with @coniel and also to have a look at this: [package] react-form-handler: Form creation and validation in React using SimpleSchema

1 Like

I have been pushing for this, but I don’t know how feasible it is - we should figure out how to make these work together so that you don’t need to have one form package for each. If astronomy and simpleschema could agree on a standard format, or just export something standard, then it would be a huge boost for people building packages like this.

7 Likes

What I think would be better is a form package that is not dependent on SimpleSchema or Astronomy but is data agnostic. That way we would be able to write plugins for SS and Astronomy that would provide “schema” for such forms package.

// Astronomy
var form = new Form({
  validate: function() {
    var values = this.getValues();
    var doc = new Doc(values);
    doc.validate();
  }
});

// SimpleSchema
var form = new Form({
  validate: function() {
    var values = this.getValues();
    var context = ss.newContext();
    context.validate(values);
  }
});

There is the useful:forms package which allows that but it’s able to create forms.

5 Likes

I completely agree @sashko . I’m warming up to Astronomy but I really wish I could pass simple-schemas to astronomy and let astronomy do its do. It provides for more flexibility and less dependency which is important considering the growing role of react. I understand how Astronomy works in meteor’s primary environment but what about in a react-redux, mantra, or a react-native space; will Astronomy’s advantages still hold?

Thanks a bunch for your contribution. I’m looking forward to version Astronomy 2.0. Could you list, if any, compatibility concerns with meteor 1.3 (modules), react-redux, and settings such as Mantra. It would be nice to know if blaze is the recommended environment for Astronomy. It would be nicer to know that Astronomy is equally effective in any (meteor supported) view-layer setting (e.g., react-native)

I don’t see how React has anything to do with Astronomy in this context. The best way to use Astronomy is to interact with your data through Astronomy, always. You ensure your data is never dirty and always follows the spec you lay out.

If you have a server/models/product.js or server/models/category.js, you can use whatever you want on the frontend, just make sure you are speaking through Astronomy.

1 Like

Which still requires a standard schema interface, no? If you have a validator function, you can do validation, but you still can’t do form generation, that requires an actual data structure.

Yes you’re right. However, let’s consider this question. What do forms package need to display form fields? The first important thing is field name and type to display proper form field. I would say it’s basic and sometimes only requirement. Of course, you could also pass max or min length or information if it’s an email or something like that. So both SS and Astronomy could generate such simple schema for forms package.

I would see it in the following way.

var Form = new Form({
	schema: function() {
		// Astronomy
		return User.getFromSchema();
		// SimpleSchema
		return ssUser.getFormSchema();
		// Both returning something like:
		/*
		{
			firstName: String,
			email: String,
			address: {
				city: String,
				state: String
			},
			phones: [{
				name: String,
				prefix: Number
				number: Number
			}]
		}
		*/
	},
	// Astronomy
	details: {
		email: {
			type: 'email',
			minLength: 2,
			maxLength: 10
		}
	},
	// SimpleSchema
	// From what I know SimpleSchema could generate it automaticaly maybe
	// Astronomy could also do it automaticaly - I don't know right now.
	details: ssUser.getFormDetails(),
	validate: function(values) {
		// Astronomy
		var doc = new User(values);
		try {
			doc.validate();
		}
		catch (err) {
			return err.details;
		}
		// SimpleSchema
		var context = ssUser.getContext();
		try {
			context.validate(values);
		}
		catch (err) {
			return err.details;
		}
	}
});
1 Like

Yeah that makes sense to me - you’re saying that you need a lot less information to generate a form, and Astronomy and SimpleSchema should be free to add any features on top of that. Makes sense to me, thanks for explaining!

Astronomy does not change anything if it goes about usage of React. Blaze is not its dependency so you can use it with any template framework. In fact there is an example of Astronomy usage with React.

Things will change with the introduction of GraphQL, however after watching Transmission - Episode 2.1: Reactive GraphQL I know that it won’t happen soon, which is good. I’m gonna have time to prepare for it. Right now schema definition is prepared to work with GraphQL, however I can’t do more as I don’t know details of Meteor integration with GraphQL. As far as I know DDP is still a standard way of exchanging data between client and server. When GraphQL support will be available I will probably have to create special module that will use GraphQL instead of DDP, but that shouldn’t be a big problem.

So I’m happy to announce that I’m ready for a change, just waiting for information :slight_smile:

3 Likes

Here’s one example: https://github.com/danieltapia/mercadera

We’re using Meteor, React and Astronomy. Works perfect, no ceremony. :thumbsup:

6 Likes

Thanks for the heads up and clarification. I thought deeply about which model management package to adopt. It took me months. I’m new it took a minute for Astronomy to catch my attention. Long story short. I’m really excited about Astronomy. All the talk about minimogo, states, stores, etc. left me confused about where Astronomy fits. A good illustration would help

1 Like

The code is, for lack of a better term, adorable! I also Like the way you leveraged Astronomy. Nice. Thanks for the clarification.

Thanks! That’s what we’re aiming for with this open source project. No ceremony, simple code to show how powerful Meteor is.

Food for thought: http://zedshaw.com/archive/the-master-the-expert-the-programmer/

I used to be this way. I used to love complicated designs and read everything I could about complicated technologies. But as I get more experienced and “older” as a programmer I find complex things just annoying. They aren’t a mental challenge to understand anymore, they are just irritating. I’ll pick apart the flashy crap, boil down the technology to its essence and then come up with a much simpler design for the task at hand almost every time.

What worries me though is how the experts react to my simplified designs. Typically they’ll say that what I’ve written is not “following best practices” or “isn’t well designed.” They’ll propose these endlessly complex designs with endlessly imagined failure scenarios, and not realize that what they are doing will be a nightmare to maintain. The experts will then saunter off to implement their Flaming Tower of Babel without any comments, horribly complex mock enabled tests, making sure EVERY SINGLE CLASS HAS AN INTERFACE, and ending every class with “Impl” because, well, that’s the best practice. After implementing it they’ll continue to complicate the design even further with endless seemingly aimless refactorings for no other reason than to refactor. And when they’re done, I’ll go in and read through their code and cry.

1 Like

I think it’d be very useful to get @aldeed’s feedback on what he’d do differently if he were starting Autoform from scratch today using React. I know he has some ideas on how Autoform could’ve been more modular, for example.

4 Likes

This approach is a lot more modular.
The core package doesn’t has a lot of lines and its very easy to create custom components.

I would love to hear @aldeed’s feedback.

1 Like

Why are people saying there’s no forms solution for React?

There’s so many out there, and these are the ones that I found that are decent:


https://prometheusresearch.github.io/react-forms/
https://www.npmjs.com/package/react-joi-forms
http://jquense.github.io/react-formal/docs/#/?_k=6we37a

With the arrival of 1.3, shouldn’t our search scope for solutions be bigger?

6 Likes

Certainly a valid point: with the release of Meteor 1.3, we have the entire NPM repo to utilize should we choose, albeit none that will integrate with SimpleSchema or Astronomy, and isn’t that the main point of this discussion? (Or am I missing something?)

3 Likes