Heist is an HTML5 template system that creates a very clear separation between markup and code. This is desireable because it decouples the work of designers and developers. To facilitate this even more, we have created a tool called charade that lets designers quickly mock up Snap applications before writing any back end infrastructure.

Charade is a snap web application that serves heist templates and static files. Heist’s runtime templates and flexible abstraction primitives alone would make this a fairly attractive server for web development. But charade combines Heist’s powerful DOM manipulation capabilities with Haskell’s excellent QuickCheck library, allowing you to easily mock up dynamic web sites without writing a line of Haskell code. Then, when you have written the Haskell code, you can take the HTML, CSS, and Javascript developed with the charade application and drop it into a Snap application with zero changes and everything will Just Work™.

Imagine you need to build an HR application for your company. It needs to do basic employee tracking and management. You give the job to your designer who starts working on a concept employee management page to show the boss for approval. He develops something like this:

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Executive?</th>
  </tr>

  <allEmployees>
    <tr>
      <td><employeeFirstName/></td>
      <td><employeeLastName/></td>
      <td><employeeAge/></td>
      <td><employeeIsExecutive/></td>
    </tr>
  </allEmployees>
</table>

This is exactly the Heist template that you would write if you were building a real site. (If you are not familiar with Heist, this pattern is explained here and here.) But this is not very helpful for the designer because there is no content. Charade lets you easily generate fake content so you can see what your site will actually look like. All you have to do is add a few “fake” attributes.

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Executive?</th>
  </tr>

  <allEmployees fake="list 10 20">
    <tr>
      <td><employeeFirstName fake="first-name"/></td>
      <td><employeeLastName fake="last-name"/></td>
      <td><employeeAge fake="int 21 65"/></td>
      <td><employeeIsExecutive fake="yesno"/></td>
    </tr>
  </allEmployees>
</table>

When you serve this template using charade as your server, it will automatically replace every tag that has a fake attribute with appropriate randomly generated content. When you are done designing the site, you can drop these templates into your application and add an attribute splice that makes all the “fake” attributes go away.

For more information about charade, see the README in github.