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.
April 8, 2008 at 1:01 pm
Hahahahahha, now I have to find an excuse….
April 8, 2008 at 3:34 pm
No benchmarks? =)
April 8, 2008 at 6:38 pm
We’re not in 2002 anymore. Seriously, relational database in html? I gotta go play with this.
April 8, 2008 at 6:48 pm
Haha, that’s great. Rock on man.
April 8, 2008 at 7:32 pm
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 :-)
April 9, 2008 at 1:24 am
Geeez… this is seriously cool and fun. But dude, you have too much free time man.
April 9, 2008 at 6:13 am
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!!
April 9, 2008 at 7:04 pm
this might actually be quite usefull for teaching database queries to students. like some sort of interactive web-based tutorial.
April 9, 2008 at 7:45 pm
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!
April 10, 2008 at 1:59 am
That’s awesome. Really awesome… Couple that with things like JS based table sort, you could have a hot little data search engine there…
April 10, 2008 at 4:07 am
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
April 10, 2008 at 8:43 pm
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/
April 24, 2008 at 12:45 pm
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
August 8, 2008 at 4:12 am