Ratchet

Ratchet is a friendly little transformer that's here to fix your views.

For use with Phoenix, check out PhoenixRatchet.

For more information, see the Documentation.

Given a plain HTML view template like this:

<section>
  <article data-prop="post">
    <h2 data-prop="title"></h2>
    <p data-prop="body"></p>
    <a data-prop="permalink"></a>
    <ul>
      <li data-prop="comments"></li>
    </ul>
  </article>
</section>

It can be transformed into your final view by applying data:

data = %{
  post: [
    %{title: "Ratchet is here!", body: "Hope you like it", permalink: {"Iamvery", href: "https://iamvery.com"}, comments: ["Not bad"]},
    %{title: "Robots", body: "What's the deal with them?", permalink: {"Google", href: "https://google.com"}, comments: ["Yea!", "Nah"]},
  ]
}

<section>
  <article data-prop="post">
    <h2 data-prop="title">Ratchet is here!</h2>
    <p data-prop="body">Hope you like it</p>
    <a href="https://iamvery.com" data-prop="permalink">Iamvery</a>
    <ul>
      <li data-prop="comments">Not bad</li>
    </ul>
  </article>
  <article data-prop="post">
    <h2 data-prop="title">Robots</h2>
    <p data-prop="body">What's the deal with them?</p>
    <a href="https://google.com" data-prop="permalink">Google</a>
    <ul>
      <li data-prop="comments">Yea!</li>
      <li data-prop="comments">Nah</li>
    </ul>
  </article>
</section>

Installation

1. Install with Hex:

   def deps do
     [{:ratchet, "~> 0.4"}]
   end
   

Background

Ratchet is inspired by Pakyow's view transformation protocol. One of the benefits of this style of view templates is designers don't have to learn whatever the latest templating language. Instead views are plain HTML and CSS. Once you get an HTML prototype from design, you can sprinkle in the appropriate properties for data binding.

Release

1. Bump the version in mix.exs.

2. Add version to CHANGELOG.

3. Commit version with Git tag vX.X.X.

4. Draft GitHub release.

5. Publish to Hex.

   $ mix do hex.publish, hex.publish docs