Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.
Let's start with a few tables:
<table class="users">
<tr>
<td class="id">1</td>
<td class="first_name">amy</td>
<td class="last_name">bobamy</td>
</tr>
...
</table>
<table class="photos">
<tr>
<td class="id">1</td>
<td class="user_id">1</td>
<td class="url">http://www.example.com/foo.png</td>
</tr>
</table>
Now we can express some queries:
$('.users')
.where('.id:eq(1)')
.select('*')
This is equivalent to SELECT * FROM users WHERE id = 1
$('.users')
.where('.id:eq(1)')
.select('.id, .name')
This is equivalent to SELECT id, name FROM users WHERE id = 1. Here is something slightly more complicated:
$('.users')
.where('.name:contains(a)')
.and('.name:contains(c)')
.select('*')
But here is the crowning glory, the inner join:
$('.users')
.join('.photos')
.where('.photos.user_id:eq(.users.id)')
.and('.users.id:eq(1)')
.select('.photos.url')
This is equivalent to:
SELECT photos.url FROM users, photos
WHERE photos.user_id = users.id
AND users.id = 1
Download the fun at Github.
Cute.
Hahahahahha, now I have to find an excuse....
No benchmarks? =)
We're not in 2002 anymore. Seriously, relational database in html? I gotta go play with this.
Haha, that's great. Rock on man.
Hey, and with the right stylesheet, your data dumps are going to look real pretty...
Soon you can even use [CSS3 to style tables](http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/ )... But darn, that would totally violate model-view separation :-)
Geeez... this is seriously cool and fun. But dude, you have too much free time man.
On my side, I ended up writing a CSS3 engine which used a relational database on the server side. The two worlds MUST NEVER COLLIDE!!
this might actually be quite usefull for teaching database queries to students. like some sort of interactive web-based tutorial.
That's it, I'm sold! I'm with Yegge, Resig and the rest. JavaScript is the only language that'll matter in a few years' time!
That's awesome. Really awesome... Couple that with things like JS based table sort, you could have a hot little data search engine there...
Very nice, using the output to Firebug Console.
But...from a practical angle, what's the code to display the 3 query results in the web page itself, not in the Firebug Console?
(3 results displayed in the page containing the 2 tables, "users" and "photos"...).
Thanks! SFdude
Very cool :)
For similar fun in a different syntax, you can play with Jan Grant's 'javascript prolog'; eg. I made http://www.w3.org/1999/11/11-WWWProposal/rdfqdemo.html using http://ioctl.org/logic/
Very clever! I made a tablelib, a jQuery library for serializing javascript object into html tables, and/or querying tables. The querying language is just JSON, and of course there is no joining. http://projects.gregweber.info/tablelib