Reactive Frameworks Comparison

by ramnathv

HTML

<script src="//rawgit.com/Riim/cellx/master/cellx.min.js"></script>
<script src="//rawgit.com/mweststrate/mobservable/master/dist/mobservable.min.js"></script>

Babel + JSX

var user = {
    firstName: cellx('Matroskin'),
    lastName: cellx('Cat'),

    fullName: cellx(function() {
        return this.firstName() + ' ' + this.lastName();
    })
};

user.fullName('subscribe', function() {
    console.log('fullName: ' + user.fullName());
});

//console.log(user.fullName());
// => 'Matroskin Cat'

//user.firstName('Sharik');
//user.lastName('Dog');

let {observable, observe, transaction} = mobservable
var person = observable({
    name: "John",
    age: 42,
    showAge: false,
    labelText: function() {
      return this.name + " " + this.age
    }
})

console.log("mobservable-----")
mobservable.autorun(() => console.log(person.labelText))
transaction(() => {
  person.name = "David"
  person.age = 21
})

var person2 = {
  name: cellx("John"),
  age: cellx(42),
  labelText: cellx(function(){
    return this.name() + " " + this.age()
  })
}

person2.labelText('subscribe', function(){
  console.log(person2.labelText())
})

console.log("cellx-----")
person2.name('David')
person2.age(21)


//console.log(user2.fullName())


//user2.fullName.observe(function(oldValue, newValue){
//  console.log("fullName: " + user2.fullName())
//})