Skip to content

mjs: a javascript nested function dsl to generate html

December 10, 2010

Hi there!

It has been a long time since I don’t blog. I’m in Dallas working in a project for ThoughtWorks, which means I’m away from Brazil, friends and girlfriend. That gives me time to hack around. Lately, following my interest in node.js and an idea that another TWer, Paul Hammant has been promoting for some years, I’ve started working in a javascript dsl to generate html. It would be possible to run that in the server-side: generating html and sending it to the client; in the client-side: sending ‘only’ javascript to the client; and most probably in a hybrid fashion: escaping the js code that you want to run in the client-side and running everything else in the server-side.

What I’ve done is in my github account, along with a simple js testing framework that I’ve made to warm up (it gives you hamcrest-like assertion, with ‘assertThat’ and matchers). So far, it is possible to write code like this:

require('./src/mjs-core');

console.log(html(
    head(
        title('Something')
    ),
    body(
        div({id: 'content'}, 
            h1('A title')
        )
    )
));

will output:

<html><head><title>Something</title></head><body><div id='content'><h1>A title</h1></div></body></html>

If you have tidy installed (sudo apt-get install tidy) you can run it through the run script, and get an output like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <meta name="generator" content="HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">

  <title>Something</title>
</head>

<body>
  <div id='content'>
    <h1>A title</h1>
  </div>
</body>
</html>

So I hope you can take a look at that and help me with that stuff! I’m looking for a way to integrate it into a node.js web framework, like expressjs, and also a way to pass some lines of code instead a tag to another tag in a more elegant way. Now you can do that trough an anonymous function, but it’d have to return a string or a function that returns a string, so I’m thinking in a way to make it more flexible. There is an example of that in the ‘example.js’ file in the repository. It also needs a better name – mjs stands for markup javascript, but I don’t like it.

Cheers!

Duda.

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: