Data-Context-Interaction (DCI) and evented programming in javascript

Question

I recently saw the following presentation on DCI by Trygve Reenskaug : https://vimeo.com/43536416 It kinda blew my mind. Mmmh, seeing in code the interaction between different components of a software is an attractive idea.

I tried to find examples of DCI in javascript, unsuccessfully. Then I started wondering. Isn't the DCI pattern opposed to the evented programming pattern ?

Evented programming is trendy in javascript, i guess because it allows decoupling, and because classical inheritance concepts are not native to js. I think I understand the benefits of evented programming but I also noticed that debugging can be damn hard when it requires to follow event message.

Is it correct to say that both concepts are opposed ? Or did I got it wrong ? Is there some example implementations of DCI in js that I missed ? What should I look at in order to dig the concept ?

Answer 1

Firstly event programming or inheritance are ortogonal to DCI. You can do DCI without inheritance and with event programing (or without).

JavaScript is in somerespect one of the best languages to do DCI in. Most languages has some issues with following DCI stricyly. In JavaScript the issues are could be solved if there was a finalizer but the lack of a finalizer means you will have to "dispose" your self meaning some noilerplate code.

I've written an example in JavaScript that I will put online on http://fullOO.info where you will find the examples Trygve, Jim and I have created together with some other people have created as well.

fullOO.info is also the answer to where you could go to get more familiar with DCI or you can join object-composition a google group for discussion regarding DCI.

The example I've written in JS is the canonical DCI example money transfer and the interesting part (that is everything but boilerplate/library code) can be seen below:

var moneyTransferContext = function(sourcePlayer, destinationPlayer, amount) {
    var source = {
            withdraw: function() {
                var text = "Withdraw: " + amount;
                this.log.push(text);
                this.balance -= amount;
                console.log("Balance: " + this.balance);
            }
        },
        destination = {
            deposit: function() {
                var text = "Deposit: " + amount;
                this.log.push(text);
                this.balance += amount;
                console.log("Balance: " + this.balance);
            }
        };
    source = assign(source).to(sourcePlayer);
    destination = assign(destination).to(destinationPlayer);
    return {
        transfer: function() {
            source.withdraw();
            destination.deposit();
            return this;
        }
    };
},
sourceAccount = {
  log: [],
  balance: 100
},
destinationAccount = {
  log: [],
  balance: 0
};

moneyTransfer(sourceAccount, destinationAccount, 25).transfer().unbind();

The rest can be seen at http://jsfiddle.net/K543c/17/