ActionView AttributeBuilders

A proposal by Julián Pinzón Eslava

Playground

This website shows the ActionView::AttributeBuilders gem in action.

Head on over to the project in Github to see the code behind the gem and a more detailed technical explanation of the implementation. If you're interested in the context of why this exists, visit the Exploring Rails Forms series of articles.

Each link contains one implementation of the gem for a different component library plus a vanilla implementation of the Rails default using Tailwind CSS.

⚠️ This gem is still experimental. This means some things are not finished, polished or may not work entirely

The interface

Each implementation has 4 tabs:

  • A form to interact with
  • Code and information
    • Information about the implementation and what to look for
    • The erb template used to create the form
    • The rendered HTML by the server
    • The custom FormBuilder used (when applicable)
  • A params section to show the actual parameters the server receives and their shape

How to use it

👀 Each time you submit a form the HTML tab will change and show the newly rendered markup for the request. Make sure to take a pique!

There are two scenarios to play with. Invalid forms and valid ones.

Invalid forms

Simply submit an empty form and let Rails do its thing. You should see some change in the presentation of the markup

Valid forms

Fill in the form with valid fields and click submit. You should see the Params section fill up with the params Rails received

The Usermodel

Use this to figure out how to play with the forms

      
class User
  include ActiveModel::Model
  include ActiveModel::Attributes

  attribute :name # text
  attribute :age, :integer # number
  attribute :email # email
  attribute :password # password
  attribute :search # search
  attribute :telephone # tel
  attribute :website # url

  attribute :active, :boolean # checkbox
  attribute :onboarded, :boolean # switch
  attribute :volume, :integer # slider/range
  attribute :preferred_medium_of_transportation, :integer

  validates :name, length: { minimum: 2, maximum: 80 }
  validates_presence_of :name, :age, :email, :password
end

A note on checkboxes and switches

This playground uses checkboxes and switches because they look nice and fancy (specially in Material design) but they don't behave exactly like a default Rails checkbox would yet. This is because of a browser constraint that Rails accounts for that this implementation does not. I might work on that in the future. Read more here and here