Thinking more about views

Posted by yrashk

Russian translation is available.

I was thinking about how HTML should be defined in Rails app. There are plenty of ways to: erb, haml, markaby, etc. but I felt that I miss something.

Tonight I’ve conjured a bit in TextMate and here are some of my conclusions:

1. Whether do we want or not, but lots of projects lack of universal members and thus html is done by html coder and it is integrated into template by a developer.

2. Templates with some logic inside (if logged_in?, <%= ... %>, etc.) is a thing that I don’t like much. First of all, they are somewhat hard to read and they are not nice to preview without Rails running. Then, some developers tend to integrate much more complex logic into a template, like person age calculation. Then… ok, two subitems are enough for now.

Ok. Here is what I’ve hacked tonight, laying down with my macbookpro.

1. HTML template should remain untouched and should looks just fine when is opened with a browser.

2. Each view should have a descriptor that manipulates elements.

If elements are accessed with xpath or something like this, this mean that it will be much easier to code it after view spec (rspec), since all element paths are already coded there.

I’ve created a bit of hackish code and now it is possible to write such kind of descriptors:

1
2
3
4
5
6
7
8
9
10
11

at("#current-user") << 'John' 
at("#best-blogs/li").as_template do
  @blogs.each do |blog| 
    self['id'] = "blog-#{blog.id}"
    at("a") << blog.name 
    at("a")['href'] = blog.url
    append
  end
end
at("#hide-me").update { remove }

That’s for HTML code like:

1
2
3
4
5
6
7
8
9
10
11

<html>
 <head>
 </head>
 <body>
        Hello <div id="current-user">Guest</div>
        <ul id="best-blogs">
                <li id="best-blog-example"><a href="#">My blog</a></li>
        </ul>
        <div id="hide-me">Hello</div>
 </body>
</html>

Descriptor syntax is for sure far from being perfect and current implementation is pretty awful (Hpricot-based), but anyway it allows to generate this HTML pretty easily:

1
2
3
4
5
6
7
8
9
10
11
12

 <html>
 <head>
 </head>
 <body>
        Hello <div id="current-user">John</div>
        <ul id="best-blogs">
                <li id="blog-1"><a href="http://novemberain.com">Novemberain</a></li>
                <li id="blog-2"><a href="http://rashkovskii.com">yrashk</a></li>
        </ul>

 </body>
</html>

I want to play with implementation a bit more, since I like this idea. Let’s see what we can do.

Updated: Lilu markup, some ideas on verb based DSL instead of #at-based syntax