Writing large JavaScript projects is hard. The language lacks both a type system and a canonical module system, it has a rather clunky syntax and has a threading model that is, to say the least, interesting. No wonder so many third party JavaScript frameworks exist. Luckily JavaScript is a flexible language, which makes extending it easy.

As the Silk client keeps growing, keeping our JavaScript code base clean has proven to be a bit of a challenge as well. One of the techniques we use to keep the complexity manageable is Functional Reactive Programming (FRP). Reactive programming allows us to declaratively set up bindings between data in different parts of our product that keep in sync automatically. Most dynamic parts of our user interface are reactively connected to our underlying data model. FRP allows us to abstract over information that changes over time with minimal effort.

Currently we solely use reactive programming within our client application. Although not unthinkable (or even uncommon) we have no reactive connection from the client to the server (yet).

At Silk we developed our own JavaScript library for reactive programming. The interface is heavily inspired by functional programming idioms from Haskell. Prototyping the library in a type safe manner in Haskell gave us great confidence about the expressiveness of the programming interface.

This post demonstrates how we use reactive programming as part of the development process of Silk. If you think this stuff is interesting you might consider joining us!

Reactive Variables

At the basis of our library we can find reactive variables, mutable reference cells containing a value that might change over time. Value changes within a variable can easily be observed by other reactive variables, or by listeners that can perform arbitrary side effects.

We illustrate the basic usage of reactive variables below. We create a variable containing a number and inspect the current value by using the snapshot method get. We can write a new value to the variable with set, after which we can observe a new value. Pretty straightforward so far.

// Creating a variable with initial value: var v = new Reactive(20);

// Snapshot the value using