Recently for our local ruby meetup group we had a frontend Battle Royale. The idea was to make a simplistic rails app that could serve as a starting point and then implement a frontend in several different ways (ember, angular, etc) so that we can compare the costs and benefits of these different techniques.

We picked a comic book collection as the simplistic app. You can see the code on the URUG github account. The README contains information on the desired UI.

I wrote up an implementation using Polymer Elements which is basically a way to write custom HTML elements that encapsulate details of javascript, css and html.

Where to Start???

I wanted to start with implementing a small but interesting feature of the UI. In the application.html.erb layout there is a little sidebar that shows a list of comic books with a count of how many issues each comic book has. The initial erb looks like this:

```html sidebar erb template


This looked to me like a good chance to encapsulate some details. Wouldn't it be awesome if our layout just look like this?
```html
  <div class="row">
    <div class="span9"><comics-book-list></comics-book-list></div>
    <div class="span3"><comcis-sidebar></comics-sidebar></div>
  </div>

Lets ignore the details of using a well class and li elements to represent this list. Let’s just think of it as a sidebar element. So what does the definition of a basic sidebar element look like?

```html comics-sidebar.html a polymer element

```