Designing HTML views is an iterative, interactive process by nature. And anything that slows down the iterations, slows down development.
I was working on a form recently where the steps to show it went something like this:
- Go to the home page
- Log in
- Click “New Thingit” (domain terms have been changed to protect the innocent)
- Click “Edit” on the Thingit
- Click “Settings”
- Click “Enable Facebook integration”
- Click “Save”
- Click “New Wodget”
- Fill in the “New Wodget” form
- Click “Save”
- Click “Edit” on the saved wodget
All this just to get to the “Edit” view of a Wodget. Once you got this far the iterations were a little tighter, but because the forms were presented via AJAX, you couldn’t just hit F5 to refresh the form after making a view change. You still had to take a few steps:
- Click “Cancel”
- Click “Edit”
All this rigmarole got in the way of quickly seeing the results of view tweaks.
The way I finally decided to address the issue was to create a “view sandbox” inside the app where I could easily fiddle with arbitrary views.
I created a routing section for the sandbox which would only be enabled in the “development” environment:
if Rails.env.development? match 'sandbox/:action' => 'sandbox' end
Then I created a very basic SandboxController, with an action dedicated to the view I wanted to play with:
class SandboxController < ApplicationController helper 'thingit' helper 'wodget' layout 'application' def edit_wodget @thingit = Thingit.find_or_create_by_name("SANDBOX_THINGIT") do |thingit| thingit.wodgets.create(...) end @wodget = @thingit.wodgets.first end end
The controller action created just enough example model data to keep the view happy.
Finally, I created a
views/sandbox/edit_wodget.html.haml view corresponding to the action, which simply included the Wodget form partial.
With this in place, I was able to simply navigate to http://localhost:3000/sandbox/edit_wodget to experiment with changes to the view, hitting reload when I wanted to see the effect.
Maybe there’s a better way to do this, and if there is I hope you’ll clue me in. I present this in case anyone else has run into a situation where the change->preview->change roundtrip is just too darn slow.