Now I understand what they mean by tabular data (or: building a relational database using jQuery and <TABLE> tags)
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.
remove
Hahahahahha, now I have to find an excuse....
remove
No benchmarks? =)
remove
We're not in 2002 anymore. Seriously, relational database in html? I gotta go play with this.
remove
Haha, that's great. Rock on man.
remove
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 :-)
remove
Geeez... this is seriously cool and fun. But dude, you have too much free time man.
remove
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!!
remove
this might actually be quite usefull for teaching database queries to students. like some sort of interactive web-based tutorial.
remove
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!
remove
That's awesome. Really awesome... Couple that with things like JS based table sort, you could have a hot little data search engine there...
remove
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
remove
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/
remove
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
remove