is there a canonical meteor.js forms package?

Question

Is there a forms package that is considered canonical or one that is likely to be similar to whatever would eventually end up in core?

In my searching I came up with two main contenders, based on activity, throughouness, and documentation (but there may be others):

• https://github.com/copleykj/Mesosphere
• https://github.com/aldeed/meteor-autoform

If anyone has looked through both of these could you comment on why or where you might use one versus the other?

Ungley

Answer 1

As this has not been answered, I'll chime in with a 'why you should do it yourself' argument.

A form is both display of DOM and validation. I think Meteor's tools for both are good enough, to not need another abstraction between them.

Consider what meteor gives you: you can write a class for your objects, that itself understands all the validations and rules. Not in a generic, 'must be a number way', but in as complicated a way as they exist (must be a prime number?). You can write this class, and it can run on both the client and the server. You should always validate on both the client and the server. Validation libraries sprung up because client and server were (at least) two different languages. Node/Meteor is JS everywhere.

Why not use that wonderful feature? Don't put validation code in multiple places. Give your data to your object, let it accept or reject it on the client (and on the server).

For example, I create each text element through a combination of my own template, and a helper function:

The form

{{label_text fname='name' title='Agent Name' placeholder='Formal Name' collection='agent'  passthrough='autofocus=autofocus ' }}
{{label_text fname='agentInCharge' title='Agent In Charge' placeholder='Owner' collection='agent'   }}
{{label_text fname='phone' title='Phone Number(s)' placeholder='Include Area  Code'collection='agent'   }}
{{>gps }}

The template

<template name='label_text'>
    <div class="row">
        <label class="large-3" for="{{fname}}_{{_id}}">{{title}}</label>
        <div class="large-8">
            <input name="{{fname}}" 
                   id='{{fname}}_{{_id}}' 
                   class="{{fname}}" 
                   value="{{value}}"
                   data-original="{{value}}" 
                   placeholder="{{placeholder}}" 
                   type="{{type}}" {{passthrough}}  />
        </div>
    </div>
</template>

and a few helpers:

generateField = (options) ->
  options.hash.value = options.hash.value or this[options.hash.fname]

  # allow for simple params as default
  options.hash.title = options.hash.title or options.hash.fname
  options.hash.template = options.hash.template or "label_text"
  options.hash.placeholder = options.hash.placeholder or options.hash.title
  options.hash.type = options.hash.type or 'text'

  new Handlebars.SafeString(Template[options.hash.template](options.hash))



Handlebars.registerHelper "label_text", (options) ->
  options.hash.collection = options.hash.collection or 'generic'  
  generateField.call this, options

Handlebars.registerHelper "label_text_area", (options) ->
  options.hash.collection = options.hash.collection or 'generic'
  options.hash.template = "label_text_area"
  options.hash.rows = options.hash.rows or 3
  options.hash.columns = options.hash.columns or 40
  generateField.call this, options

Handlebars.registerHelper "switch", (options) ->
  options.hash.template = "switch"
  options.hash.em = options.hash.em || 7
  generateField.call this, options

Then I send data to the client object to see what it thinks.

Anagnorisis

I do want to support all the good people who take the time to share their great hard work. That makes our community stronger. To use a package/library vs roll your own vs start from and customize a package (and contribute back!) is a choice many of us make, then change, then change again! – Anagnorisis

See also Abigail Watson's reply. – Downwash

Answer 2

There's no canonical package at the moment (Meteor v1.0), it seems that the issue will be left to the community (see roadmap).

I'd also add joshowens:simple-forms to your list, a minimal package (because I like the freedom it gives)

I haven't tried Mesosphere, so I can't compare, but I reckon aldeed:autoform has gotten a lot more traction. Judging by github and atmosphere stars, it's the most popular by far. I believe that the main reason is its great integration with collections2 (automatic inserts, updates etc).

Disrobe

Answer 3

FWIW, we're using autoform and collection2.

Piston