An overview of JavaScript reactive frameworks

Re:An overview of JavaScript reactive frameworks by nailer on Sunday June 07, 2015 @06:54AM (#9674138)

Nice. I've used ractive for nearly two years now. It's backed by the Guardian and you can learn it by reading this comment:

    var binding = new Ractive{
      el: '.where-to-put-it', 
      data: {some: data}, 
      template: '<p>Put {{ some }} thing here</p>'
    }

Bang, two way binding, virtual DOM, and ridiculously fast when using the same benchmarks that ember and react use to test their performance.

[ Parent | on HN ]

Re:An overview of JavaScript reactive frameworks by WorldWideWayne on Sunday June 07, 2015 @10:10AM (#9674664)

It's pretty nice, but you don't get two-way binding for free and it's not really baked in. In your example you'd have to use an input or content-editable element and then call ractive.observe and write your own code for binding user-input to your model data.

Compare to something like Knockout.js where you don't write any special code to get the two-way binding (other than creating each data field as an 'observable' field.)

[ Parent | on HN ]

Re:An overview of JavaScript reactive frameworks by ThrustVectoring on Sunday June 07, 2015 @10:43AM (#9674795)

Much like Javascript's "==" operator gives you type conversion for "free", it's not clear to me that getting two-way binding for "free" is a good thing. One-way binding is significantly easier to reason about.

[ Parent | on HN ]

Re:An overview of JavaScript reactive frameworks by dkempner on Sunday June 07, 2015 @01:01PM (#9675421)

Most of the time, data binding IS one-way when using Knockout.

Input field? That's one-way from display => a variable in your viewmodel.

P tag? That's one-way from variable in viewmodel => display.

But when do you really need two-way data binding? Form validation and formatting. Man, this stuff is hard even with two-way data binding. You have to be able to accept, parse, format, and validate all in the same element. It's very helpful to be able to use knockout for a task like this.

[ Parent | on HN ]

Re:An overview of JavaScript reactive frameworks by nailer on Sunday June 07, 2015 @01:53PM (#9675631)

In my example, I'd just add

That's all.

[ Parent | on HN ]

Re:An overview of JavaScript reactive frameworks by nailer on Sunday June 07, 2015 @05:50PM (#9676450)

PS. if it's not clear, that's a response to:

> In your example you'd have to use an input or content-editable element and then call ractive.observe and write your own code for binding user-input to your model data.

Using an input element is enough. Try it.

[ Parent | on HN ]

Re:An overview of JavaScript reactive frameworks by WorldWideWayne on Monday June 08, 2015 @11:46AM (#9679810)

Thanks for the correction.

I thought about moving to a system that uses React or something like it and I looked at a bunch of them, but I'm sticking with Knockout for now because it lets me keep my markup in the HTML document where I personally think it belongs.

I'll probably end up moving to Aurelia (or something like it) because it's so pluggable and you can use it with React or not. There are so many choices right now, it's hard to decide!! Sticking with whatever I pick is also sometimes difficult, but I've been using Knockout for about a year now.

[ Parent | on HN ]