wsick / Fayde

Inspired by Silverlight; XAML engine using Javascript and rendering to the HTML5 Canvas.
MIT License
189 stars 27 forks source link

Adaptive POJO binding with Object.Observe and dirty checking. #86

Open JeroMiya opened 9 years ago

JeroMiya commented 9 years ago

Newer web frameworks like Aurelia and AngularJS2 support adaptive data-binding to plain old javascript objects. After writing AngularJS applications for a long time, it's painful to go back to XAML's explicit INotifyPropertyChanged system. There's a lot of boilerplate, and for calculated properties it's super-easy to forget to trigger a change event for related calculated properties. Knockout solved the problem of figuring out which change events to trigger by doing automatic dependency tracking, but it didn't reduce the boilerplate much. With AngularJS, there is no boilerplate code OR explicit dependency tracking. You can bind directly to JSON from the server.

AngularJS 1.x used strictly dirty checking, which is good enough 95% of the time. New frameworks like Aurelia and Angular 2 however use a more efficient approach, taking advantage of Object.Observe where available or polyfilled, and falling back to dirty checking only when necessary.

If done right, it wouldn't be a breaking change from the traditional silverlight model. When evaluating a binding expression, simply adapt to what is available. If the view model is observable, use that (thus existing view-models using the INotifyPropertyChanged model work as before). Else if the browser supports Object.Observe and the binding expression is observable, then use that. Finally, fall back to dirty checking if nothing else is available (typically calculated properties, etc..).

This would improve developers lives by reducing boilerplate INotifyProperyChange code by an incredible amount.

BSick7 commented 9 years ago

You have great ideas that we share.

I intend on writing a blog describing our future efforts here.

JeroMiya commented 9 years ago

I was going to mention as an aside related to the performance of dirty checking that both Angular and Aurelia support the concept of one-time bindings to improve performance while data-binding large lists of data, but I forgot that Silverlight already supported one-time bindings. :)