In the last months I have been working on a ‘secret’ project that involves vector graphics and the web. I am really excited about it, it’s going to be awesome. But the project has been getting really complex lately, and I have been struggling to implement certain features, and this time in particular, the notion of associativity between objects.

The idea here is that most programming languages are based on the imperative paradigm, relying on state-based checks on memory and variables. This is tremendously useful in frameworks where execution is continuous and the focus is on the changing nature of the environment, based on how the agents affect its state. But there are certain cases where the stress falls on the structure of the environment and it is the explicit relations declared between agents that drives its global state.

I think I am particularly interested the idea of associative programming from a user’s perspective. I have the feeling that, at least at an introductory level, it’s far more intuitive and manageable to create and maintain a hierarchy of objects and their interactions, rather than controlling their flow state at run-time. I once had a very interesting conversation with Robert Aish on this topic, and he admitted these were some of the ideas he had in mind when developing Design Script, which featured a custom scripting API that mixed imperative execution with associative declarations. You can read more about it here.

Anyway, my new project strongly involves the notions of associativity, dependency and hierarchy of objects, but at its current state, it had become too complex to use it as the workbench to test these ideas. So I decided (again) to start from scratch and try out how would a framework with declarative variables look like inside a fundamentally imperative environment. And this was the reason for the birth to X.js, an open-source library for associative variables in JavaScript. It currently looks something like this:

// Declare two associative variables
var a = X.var(5), b = X.var(10);

// Create a child variable as the addition of its parents
var add = X.add(a, b);
console.log(add.val); // 15

// Change the value of a parent, child is immediately updated
a.val = 20;
console.log(add.val); // 30

You can read more about it in the project page, or the github repo.

It is still a work in progress, but many of the basic ideas are implemented and working, I am happy about the result. Enjoy it, and feel free to drop me a line with comments or suggestions ;)