Stencil: Two-way data binding

[MatanYadaev]

Why stencil has only one-way data binding?
I think two-way data binding will make stencil powerful.
what you think guys?

[jgw96]

Hey! So we went with one way data binding as it is more performant. Angular 1 used two way data binding, and as we all know that ended up causing pretty bad runtime performance issues in bigger apps unless you were really careful with your bindings. As a result Angular 2 went with an approach very similar to one way data binding, and people started using React for certain components in AngularJS apps. Hope this answers your question!

[kylecordes]

Here's another way to think about this question. When people ask for two-way data binding, that idea specifically makes sense for forms. Angular 2+ has a (in my opinion, quite important) model driven "reactive" form system in which something much like the older to a data mining is achieved. I think it would be possible, perhaps down the road a bit, to implement something similar to that as an add-on to Stencil. It would not add any complexity of a different binding mechanism to the core product (therefore not create bug surface area or code size), but offer a similarly smooth form data experience.

[bfmatei]

Wouldn’t this be covered by controlled inputs approched? Also, implementing a similar framework to redux forms is quite easy in Stencil. I did it in my boilerplate. You can do it without Redux also. Doing so will help you avoid writing tons of methods that update the state.

[FluorescentHallucinogen]

@jgw96

Angular 1 used two way data binding, and as we all know that ended up causing pretty bad runtime performance issues in bigger apps

Google Polymer uses two-way data binding. Does this mean that Polymer has bad runtime performance?

[beenotung]

I made something similar to "two-way-binding-form" as functional component.
https://github.com/beenotung/stencil-lib/tree/master/src/components/input-form

It takes an object, and some meta data (field names and field types), then create inline-component (functional component) that has "value" and "onIonChange" binded to the given object.