Meteoric (source: http://github.com/richstokoe/Meteoric, documentation: http://richstokoe.github.com) is a JavaScript framework that allows UIs to be built on-the-fly driven by JSON metadata. The JSON metadata is parsed by “writers“, very focussed JavaScript functions which understand the specific requirements of that metadata and spit out HTML to the DOM. Styling is done through CSS.

The idea is that you can build web applications very quickly simply by breaking down your applications into [data] and [renderers for the data].

Data

Consider the following JSON object representing a customer:

var customer = {
    "type": "customer",
    "id": "1234",
    "name": "John Smith Ltd.",
    "email": "john@example.com"
}

In reality, this will come from a database. ASP.NET MVC has a great way of converting IQueryable<T> objects from LINQ data sources into JSON objects. At the end of the controller action you simply call Json(object);

http://northwindCo/Customers/1234

[HttpGet]
public ActionResult Customers(Int64 id)
{
    // TODO: Some defensive programming - what if 'id' is -1?

    // Get customer
    Customer customer = this.CustomerRepository.GetCustomer(id);

    // Serialise as JSON object
    return Json(customer, JsonBehavior.AllowGet);
}

Writers

A Writer is a very simple JavaScript function which is registered with Meteoric against a particular type and is used to spit out HTML into the DOM.

$.meteoric.writers.customer = function (context, entity) {
    context.parent.append('<h1>' + entity.name + ' (' + entity.id + ')</h1>'
                                 + 'Contact: <a href="mailto:' + entity.email + '">' + entity.email + '</a>');
}

Bringing It All Together

The final step is to take your Customer object and pass it into the jQuery.meteoric extension method:

$("#customerDiv").meteoric({ entity: customer });

This will then produce the following:

John Smith Ltd. (1234)

Contact: john@example.com

Meteoric comes with a built-in generic writer for types of “businessObject”, which relies on the JSON object having a “fields” array. Each field is then parsed by a suitable writer.

You can see more examples at http://richstokoe.github.com/ and you can download the source at http://github.com/richstokoe/Meteoric/

This is a very active project, I will be updating this a lot over the next few weeks. It probably isn’t a good idea to start writing anything too critical against Meteoric yet, as the API isn’t stable. Add your feedback and feature requests in the comments below.