Lilu and Rails

Posted by yrashk

I’ve commited initial Rails support for Lilu. Now you can try to install a plugin (svn://dev.railsware.com/lilu/lilu/trunk) and use the following naming schema:

 app/
   layouts/
      application.html
      application.lilu
   views/
      blog/
       post.html
       post.lilu

Typical application.html should contain complete HTML mockup where some element content should be replaced with actual data:

1
2
3
4
5
6
7
8
9
10

<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
  <div id="main">
        Body goes here
  </div>
  </body>
</html>

application.lilu is pretty simple:



update('#main').with yield

or even



replace('#main').with yield

post.html could contain either full page with blog post or blog post design itself. in first case, you should prepend your post.lilu with something like use(’#post’).

1
2
3
4

<div id="post" class="post">
  <div id="title">Hello, world</div>
  <div id="text">I'm Lilu!</div>
</div>
 
1
2
3
4
5

# Uncomment this if you have full page design in your post.html
# use('#post')
update('#post').with :id => @post.id,
                     '#title' => { :id => "title-#{@post.id}", self => @post.title }, 
                     '#text' => { :id => "text-#{@post.id}", self => @post.text }

That’s it, first Lilu + Rails experience. The above code is just from my head (too lazy to check exactly this code right now), so it can contain some minor bugs.

And yes, current Lilu implementation most probably contains bugs and problems. It’s quite young—it’s only few days old. I hope it will be getting better and better each day. I’m working on this.

Some Lilu examples

Posted by yrashk

Before: this and this

I’ve posted some Lilu examples on project’s wiki. It looks pretty nice for me now and it actually seems to be implemented already!

Source code is not well polished yet, some specs are definitely missing yet, couple of thoughts and ideas are around

But anyway it was a short path from idea to something working.

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